使用 angular-fontawesome 时是否可以将 fontawesome 图标设置为来自 css 的元素？

Question

当使用带有 link 的 fontawesome 到来自 cdn 的 css 时，可以使用 css 放置图标，例如像这样的内部按钮：

.info-button:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f05a";
  font-weight: 900;
}

以上代码在按钮内放置了一个小信息图标。

我正在尝试找出在使用 angular-fontawesome 组件 (https://github.com/FortAwesome/angular-fontawesome) 时是否有类似的方法来执行此操作。我已经安装并尝试了（图标库方法），但它不起作用。此外，node_modules 文件夹似乎没有任何要 link 的样式表。

我需要使用 angular-fontawesome（另一个组件需要它），同时使用 angular-fontawesome 和 link 到 [=26] 似乎是多余的=]. (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" media="print" onload="this.media='all'; this.onload=null;">)

关于如何解决这个问题有什么想法或经验吗？

Answer 1

不，这是不可能的。

FontAwesome 有两种风格“Webfonts + CSS”和“SVG + JS”。您可以在 official documentation.

中详细了解每种方法的优缺点

angular-fontawesome 库是使用后一种方法构建的 - “SVG + JS”，因此没有图标字体或 CSS 可用于使用 [=29 显示图标字符=] 仅。

所以你可以：

更改您的代码以使用 fa-icon 组件而不是 CSS 规则
使用 fontawesome-svg-core 将图标呈现为 SVG 字符串并使用 JS 动态附加它 - 请参阅 guide

使用 angular-fontawesome 时是否可以将 fontawesome 图标设置为来自 css 的元素？

Is it possible to set fontawesome icon to an element from css when using angular-fontawesome?

angular

angular-fontawesome