问题标签 [angular-fontawesome]

我已经成功地在我的 andular 6 项目中添加了一个加载器，它将在初始加载时显示加载器，直到应用程序完全加载。然而，我似乎无法在微调器中加载一个很棒的字体图标。

app.module.ts

src/index.html

它没有错误或只是没有显示图标？我对角度相当陌生，所以我可能做错了。

GitHub 上的自述文件显示了如何从不同的包中导入图标。例如：

但是没有示例如何从不同样式中导入相同的图标。我是这样做的：

但这并不漂亮，因为我需要as针对所有重复但样式不同的图标进行具体说明。

所以，我想出了一个导入整个库的想法，但只添加了一些图标：

我不确定在这种情况下是否可以期待更大的最终尺寸或任何其他性能问题。
不建议添加整个库（来自 GitHub 自述文件）：

您还可以导入整个图标样式。但小心点！无论您导入什么，最终都可能使您的最终捆绑包中出现您不使用的图标。

library.add(fal, far);

但我没有添加整个库，只是导入。

我做了一些测试并比较了文件大小（main.js）和构建时间。它们大致相同（2280.098 kBvs2280,988 kB和5:19vs 5:15）。

但是我不是 TypeScript 或 Angular 方面的专家，我想知道这是否应该工作（相同的大小和生产构建时间）或者它只是偶然相同并且这可能会在未来发生变化？
我的基本直觉告诉我它不应该是一样的，因为我正在导入整个库。但是我已经读过一些关于 tree-shaking 和导入整个库的内容应该不是问题，因为 tree-shaking 会忽略所有未使用的图标（导入）。这是真的？

最近我已经将 jhipster 升级到 5.2.0，当我尝试创建一个新项目时，我尝试运行时出现错误

错误 401 未经授权：@fortawesome/fontawesome-svg-core@1.2.2

我的依赖是

我正在使用带有 Angular 5 的 font-awesome 版本 4.7.0。当我将图标添加到屏幕时，图标立即从标记更改为，我无法从 Angular 组件访问它的类，这是我想要做的。

产生的行为是正确显示定义的第一个图标，但我所做的任何后续更改都应该反映在 UI 上，并更改字体真棒图标根本不会显示。

具体问题是我希望在对表格进行排序时更改图标。初始图标设置为 fa-sort，并且它显示正确，但是当单击表头时，内容得到排序和更新，但图标不会更改为 fa-sort-up 或 fa-sort-down。我已经测试了逻辑并且它工作正常。

应该执行此操作的当前 HTML 代码如下所示：

<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>

我试图了解如何在通过 scss 文件加载字体时通过 fontawsome 加载字体：

这是我的 webpack 配置：

这是我加载 FontAwesome（和其他）的 SCSS 文件。

运行npm run dev（或其他）时，我没有收到任何提及字体的错误。

加载我的网站时，我在“网络”面板中获得这些 URL 引用：

指向我的目录中甚至不存在的字体文件（或者至少不被创建..）

如何正确加载字体？

编辑：

为@FabioCosta 添加这个

添加完整的模块部分：

尝试以下方法：https ://chriscourses.com/blog/loading-fonts-webpack 似乎不起作用。

添加 CSS 截图

我在 Angular 6 应用程序中使用官方Font Awesome Angular组件。
但是我找不到将搜索图标作为占位符添加到输入元素的方法，除了在我的应用程序中另外添加 fontawesome 字体，这是不可取的。

我是 Angular 的新手，所以请耐心等待。我正在尝试在我的项目中使用 FontAwesome。最初我通过 CDN 加载它，但我想正确使用它。所以我已经FontAwesomeModule将WidgetModule. 看起来像这样：

我想在我的组件上显示两个图标，因此您可以在上面的模块中看到我添加了faSquare和faCheckSquare。在我的组件（称为ScenariosComponent）中，我只有这个跨度：

从我上面提供的链接，看看这个：

https://github.com/FortAwesome/angular-fontawesome

看起来它应该工作。我导入了FontAwesomeModule，ScenariosComponent将WidgetModule作为其父模块，所以它应该可以正常工作。根据这条线：

添加到库中的图标将可供其父模块也导入 FontAwesomeModule 的任何其他组件使用。

而且我确实在我的模块中设置了我的库。至少在我的理解中，哪个应该在该模块中工作。

我这样做对吗？

我有一个非常基本的应用程序，带有 Angular 和 Firestore。在检查应用程序灯塔中的性能时，它指出

最小化关键请求深度

这主要是在角度捆绑文件上。

是否有解决此特定消息的解决方案？

关于这个主题的现有问题是指如何将 Angular 与 FontAwesome 图标一起使用，理想的答案是Angular FontAwesome。我搜索了两个 repo 并没有真正找到使用 angular-fontawesome 的东西。只有旧解决方案的提示。

所以我有那个。我也在使用 Angular Material Buttons，我的任务是在我的按钮中使用 FontAwesome 图标，这导致我使用Material Icons

我不确定从哪里开始。

前提是我已经按照描述向 angular-fontawesome 添加了一个图标。我有一个带有图标的按钮准备好了，有一个标准的方法可以用来连接两者吗？

TLDR：我想使用 a Material Icon Button，但我无法使用 aMaterial Icon并且必须FontAwesome Icons改用。我不知道如何实现这一点。

我在这里用图标的 stackbiltz 找到了 嵌套的 sidenav

在这里，他们使用 mat-icon 在 sidenav 菜单中显示图标显示，对于我的项目，大多数图标在 mat-icon 中不可用，所以我打算使用 font-awesome 图标。我需要帮助才能通过组件访问字体真棒图标。我需要这方面的帮助。