问题标签 [font-awesome-5]

一起使用这两个库并尝试使用 CSS 伪元素时似乎存在错误。

我在这里创建了一个演示：http: //tappetyclick.com/fontawesomebug/。具有伪元素的锚文本消失了，我只看到图标

如果我删除 cookie 同意插件代码，那么一切似乎都按预期工作，请参阅http://tappetyclick.com/fontawesomebug/test.htm

有没有其他人看到这个问题或知道可能导致它的原因。

我正在尝试将 font awesome 5 包含到运行 Angular > 5.0.0 的 angular-cli 项目（1.6.0）中。

我使用（如所述）：

它成功获取包。现在我想将包包含到我的 angular-cli 中。在我的app.component.ts尝试中（如：https ://www.npmjs.com/package/@fortawesome/fontawesome 所述）：

但是打字稿会抛出错误：

使用 Font Awesome 4，我只是将 .css 文件包含到“样式”数组中。但是 Font Awesome 5 没有包含所有 css 的 css 文件。它只是一堆 .js 文件。

如何在我的 Angular CLI 项目中正确包含 Font Awesome 5？（我希望能够<i class="fal fal-user"></i>在我的标记中使用例如）

我想知道为什么图标：arrow-alt-circle-up 不显示...在同一个 div 中我显示用户图标有任何问题... arrow-alt-circle-up 图标位于 v5 免费图标中。 .

更新

我在 jsFiddle 做了一些测试，我可以得到 fas fa-arrow-up 但这在我的 html 代码中也不起作用......

jsFiddle

对于一个网站，我想使用 fontawesome 的图标。例如我需要使用心形图标：

作品：

该图标可作为填充版本或仅提供轮廓，我只需要图标的“轮廓”版本。要获得大纲版本，您只需通过添加“-o”来更改相应的 CSS 类，如下所示：

不起作用：

但只是不显示“-o”版本。fontawesome 网站上声明了许多图标，可以在其中添加“-o”以仅显示轮廓。但是当我尝试时，它们都没有显示。正常的图标工作。我还在所有下载的 CSS 文件中搜索了“-o”声明，但没有找到任何东西！好像他们没有实施它..

我找不到问题。在我看来，他们“忘记”在最新的 Fontawesome 5.0.4 文件中实现“-o”版本。

PS：我通过下载 CSS 文件“fontawesome-all.min.css”将图标添加到我的项目中。使用此链接搜索图标，例如“心脏”。

像要求的那样，我的整个代码：

我试图通过接管样式表来模仿https://fontawesome.com/中的“图标左 - 文本右”框。一切正常，直到我将 fa-spin 应用于图标（参见示例）。然后图标错位且未居中。

我只是能够通过创建 .g-im-icon -> .g-im-icon-for-spin 的克隆并使用顶部、左侧和变换样式来解决这个问题。

但是我想知道是否会有适用于旋转和非旋转图标的通用解决方案？

在设计时，我遇到了我拥有的所有字体的一些问题。
首先，我的字体都没有加载。我在我需要的所有字体的 head 标签中都有 cdn，它们显示为彩色方块。
其次，我无法更改 html 中文本的任何字体，它只是显示：font-family: 'Abril Fatface';，我在我的 scss*{}标签中添加了其他任何字体的字体系列，但它什么也没做，试图直接在 html 标签中添加字体，但这也什么也没做。我最近很有趣Bootstrap-4.0.0-alpha.6

这是我的头标

这是对字体真棒样式的调用：

devicons 列在浮动轮播中，但它们都以这种风格定义：

新的 FontAwesome 5 版本在使用他们的“带有 JS 的 SVG”时，使图标看起来非常干净。副作用是很难找到一种使用事件冒泡/委托来定位它的万无一失的方法。有时您会单击它并获取path节点，有时您将获取svg节点。

我试过使用他们在标签内嵌套的方式，svg但i它不起作用。他们试图在这里解释它Auto-Replace-SVG-Nst但是......我没有取得任何进展。

所以我继续手动嵌套i替换为另一个i. <i><i class="far fa-comment-alt"></i></i>. 检查时event console.log(e.target.parentElement)，有时我会得到正确的<i>，有时我会得到<svg>。这让我知道我还在打pathand <svg>。

因为我无法准确定位正确的元素，所以我得到了一些极其不可预测的结果。此页面上的所有内容都是通过数据库中的 PHP 查询或数据库中的 AJAX 动态生成的。我是否应该为同一个事件编写两个不同的处理程序来解决这个问题？

我意识到我可以只使用Web Fonts with CSS版本，但与JS版本相比，图标看起来非常像素化，所以如果可能的话我宁愿使用JS版本。

笔记

对于这种情况，我必须使用事件冒泡，因为元素是在页面加载后生成的。

这个问题之前已经在这篇文章中提出过。但我不认为它仍然使用新的字体真棒，因为它们使用svg和path元素。

这个问题是关于在图标周围有一个边框，而不是在外圈周围。

一些解决方案发现我尝试过，但没有奏效：

编辑：reiallenramos 在代码片段
解决方案中工作的解决方案

我无法使用这些代码为 Font Awesome 5 图标着色。我尝试fill使用 css 属性来设置颜色，但它没有用。

HTML 代码：

CSS 代码：

我在使用 font awesome 5 和 sass 时遇到问题 我已按照他们网页上的说明开始使用，但我似乎可以让图标出现我有一个目录

C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss

在我的 public\scss 文件夹中，我有一个 home.scss 文件，我在其中导入 fontawesome.scss，如下所示

@import "vendors/font-awesome/fontawesome.scss";

当我编译代码时，它显示了 fontawesome 类和东西，当我在网页上查看时，没有字体，只是大的白色方块进一步研究告诉我它没有加载 webfonts 我将 webfonts 文件夹放在我的项目中的这个目录中

C:\Users\myName\Learn\public/webfonts

在 _variables.scss 文件中，我修改了 fa-path 以指向“../webfonts”；但这没有任何作用我真的很感激任何能帮助我解决这个问题的见解，因为按照在线说明使用 sass 字体真棒 5 似乎对我不起作用。