问题标签 [angular-fontawesome]

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

我尝试在组件中添加它：

然后在 HTML 中：

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

我正在尝试将 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>在我的标记中使用例如）

经过一些研究，包括阅读Font Awesome 5 with Angular、文档等，我无法推进 Angular 5 App 和 Font-Awesome 5 (Pro) 之间的集成。

问题：图标不出现。

有关我当前方案的更多详细信息：

包.json：

角-cli.json

在我的研究中，我了解到我需要指定我需要使用什么（图标），如下所示：

然后我需要将这些图标传递给 fontawesome 对象：

最后我发现（在font-awesome 文档中，我需要调用负责使魔术发生的 i2svg 方法：

文档说我必须调用不带参数的方法。但是编译器将我指向另一个方向，我必须告知以下数据：

到目前为止，我已经达到的最大值是由 font-awesome 制作的浏览器中的日志，在此代码之后带有以下信息“fontawesome.dom.i2svg()”：

我已经尝试了很多（null 导致“Uncaught TypeError: Cannot read property 'querySelectorAll' of null”），现在我无法前进。有人有建议吗？

安装：

1）按照使用节点js的说明（[TOKEN]是我从购买中收到的密钥）：

2) 更新 angular-cli 3) 使用 (ng b -aot) 重建应用程序 4) 启动项目。

先感谢您！

示例 HTML 代码 登录页面（无“i”标签）

猛禽按钮（带有“i”标签）

我不知道如何将 FontAwesome 5 包含到 Angular 2+ 应用程序中。我找到了这个包 - https://www.npmjs.com/package/@fortawesome/fontawesome 你能告诉我应该在哪里导入这个包吗？也许在 app.module.ts 文件中？

我刚刚按照此处的文档将我的应用程序从 Fontawesome 版本 4 升级到了 5 。

一切看起来都不错，除了动态图标外，它似乎工作正常......

我的应用程序使用 Angular 并且经常显示的图标是动态的：

这里字体加载正常，但是当to-do更改它不再更新active图标时......

查看他们的文档我找不到答案......我怎样才能让它像以前一样工作？谢谢

堆

• FontAwesome v5
• D3js v4
• 角 4

设想

我有一个带有附加选项气泡的节点的层次结构树（将其视为米老鼠气球，其中面部是节点，附加节点是耳朵）。我希望这些选项显示一个图标，如 FontAwesome 的i以获取更多信息或x删除。

我还导入了 FontAwesome 5 javascript CDNindex.html

以上是我们目前拥有的。左耳有.text('i')，右耳是我要渲染的 FontAwesome 图标。

另外，我们已经在整个应用程序中使用 FontAwesome 使用<i>'s，但我不确定如何将它用作字体系列以便能够在 SVG 中使用 D3 实现它。

可能的解决方案

我在另一篇文章中找到了这个解决方案，这几乎正是我所需要的，但不确定如何将所有内容组合在一起。

要求

有人可以提供一些示例代码来展示如何text在 Angular 4 中创建的 svg 中的 D3.js V4 中导入和使用 FontAwesome v5 吗？

谢谢！

I'm using Angular CLI in a small project and Fontawesome 5 via CDN for icon styling.

Came across this issue when I was applying fontawesome 'styling' classes to some buttons and links.

<input>, <a> or <i> elements have different behaviours when they have Fontawesome classes applied to them.

Only the second input executed the click function correctly which has no given classes.

Tried swapping the click and class atributes within the element and doesn't work either. Haven't tried getting fontawesome via npm though..

Anyone came across this issue yet?

我以这种方式在我的 Angular 项目中使用 Fontawesome 5：

在构造函数中：

但是单独导入每个图标很傻。我可以以某种方式一次导入所有图标吗？

更新：import * as icons ...不起作用。

这似乎是一个愚蠢的问题，但是在调查并进行了各种测试之后，我不明白为什么会发生这种情况。

我有一个发送按钮，应该在发送时显示一个微调器，然后返回不显示它。

我在按钮下方添加了 {{sendingEmails}} 以验证变量是否正确更改，并且确实如此。在我的组件中，我有一个最初为 false 的 sentEmails var，并且：

问题是当我点击发送时，数据绑定会正确更新（假-真-假），但样式保持不变，就好像我从未点击过一样。

万一这很重要，我使用 Font Awesome 5 作为微调器。

我也试过

这将导致每次我发送电子邮件时微调器都会增加，并且在第一次之后就不会真正消失。

知道为什么会这样吗？

我正在使用 Font Awesome 5 (angular2-fontawesome - package) 和 Angular 5。

我想做的是从组件中导入 fa 图标。

html:

零件：

当我高于 1080 像素时，它向我显示“欢迎”，当低于它时，它向我显示数字 1 粗体和大。

问题是它没有显示的图标。我检查了一下放...

在 Html 中它可以工作，但从组件中它没有。为什么以及我能做些什么来解决这个问题？