问题标签 [font-awesome-5]

我正在尝试使用令人敬畏的 5 svg 字体作为背景图像。但是，它没有出现，我不知道如何更改颜色。这就是我正在使用的：

我可以将它用作 html svg 元素，但是我不能像上面的背景图像那样使项目成为正方形。我尝试了以下方法，但它使元素成为椭圆形：

我怎样才能使它成为背景图像，使我的 div 是方形的，或者使它成为方形的 html svg 元素？

我已经升级到新的 Font Awesome 5，因为我在移动设备上显示一些图标（即 Twitter Square 和 Facebook Square）时遇到了一些问题。我希望通过升级来解决问题，但它没有。

我已经升级到 5，我已经尝试了很多，看看可能是什么问题。即使在 JSBin 上，该图标也会出现在我的计算机上，但不会出现在我的移动设备上。我有一部运行 iOS 11.2 的 iPhone。

这是我尝试对其进行测试并重现问题的 JSBin 链接。我认为问题出在 Font Awesome 源中，因为我想我无法进一步缩小范围......

https://jsbin.com/zeruxafimi/edit?html，输出

这是来自 jsbin 的代码：

任何熟悉 Font Awesome 并知道如何解决这个问题的人？注意：并非所有图标都不起作用。例如，信封方形图标工作正常。

提前致谢。

编辑：我试图将图标下载到我的服务器并直接链接它们以查看是否解决了问题，但不幸的是没有。

我将 Font Awesome 5 与 bootstrap 4 集成到一个项目中。当我通过 CSS 调用字体时，它不起作用。使用 Font Awesome 4 的代码如下：

我试图更改字体名称，但它不起作用

升级到 FontAwesome 5 后，我无法为 FontAwesome 的 svg 着色。

这是我的例子： ⠀⠀⠀⠀⠀ https ://codepen.io/shadrix/pen/GygdZr

如果它像这里一样工作应该很棒：⠀⠀⠀⠀⠀ https ://codepen.io/immad-hamid/pen/jVNvQO（注意：他使用了 FontAwesome 4）。

我正在尝试做的事情

我刚从 Font Awesome 4.7 切换到 Font Awesome 5，一切都很好，除了一件事：在我的网站的一部分，我使用了一个很棒的字体图标作为切换-esk 按钮。单击时，我想将“打开”的心更改为“关闭”的心图标（fas fa-heart <-> far fa-heart）。我可以通过更改浏览器检查器中 SVG 元素中的数据前缀来做到这一点。

问题

我的问题在于绑定点击监听器，因为那里的元素被删除并替换为 SVG。我动态地将元素添加到具有这些心形图标的页面上，并在使用 JS 把手生成 HTML 之后，我使用 jquerys .on("click") 方法来获取单击按钮并切换类的时间。当元素没有被替换时这很好，但是随着对 SVG 的更改，这样做的新方法是什么？

可能的解决方案

我通读了 Font Awesome 的“操作方法”指南，但它们还没有涵盖这样的主题。这是人们想要做的常见事情，因此获得人们可以使用的解决方案列表会很好。以下是我想到的两个想法，但是 FontAwesome 必须提供的一个想法，但我很好奇是否有更好的方法：

1. 在添加侦听器之前使用短暂的超时时间 - 但是充其量似乎很hacky。
2. 单击时使用包装器元素，然后在每次单击时搜索 SVG 元素。
3. FontAwesome 可以在图标被替换时提供回调。

示例小提琴

这是一个简化的示例，其中一个按钮被动态附加到文档中（如果使用 $(document).ready() 可以正常工作，但我正在执行 API 请求，然后动态生成 html）。单击按钮不会调用侦听器，因为元素尚未完成将元素替换为 SVG。

https://jsfiddle.net/L748ownw/

这个例子适用于 FontAwesome 4.7，因为元素没有被替换。

在 (fa) 以前的版本 (4) 中，图标在 app.layout.isSmallSidebar 变量更改后成功更新，但现在 (veriosn 5) 没有。它似乎与它的呈现方式有关......

任何想法为什么？以及如何解决这个问题？

提前致谢！

我究竟做错了什么？

在以下示例中，初始图标呈现，但在类更改时它不会更改。

如何将font-awesome 5与 Angular (2+) 一起使用？

我尝试在组件中添加它：

然后在 HTML 中：

但这给了我一个闪烁的问号。