我正在尝试在 Angular 项目中使用来自 FontAwesome 的图标。
我从“入门”指南开始,您可以在此处找到:FontAwesome Angular Getting Started
一切正常,我可以在模板中的任何位置看到 faCoffee 图标。但是,如果我尝试将其更改为另一个图标(例如“检查”图标),则不会显示任何内容。
我在组件级别更改了我的图标声明,使其看起来像这样:
import { faCheck } from '@fortawesome/free-solid-svg-icons';
更改了 html 模板以显示我的新图标:
<fa-icon [icon]="faCheck"></fa-icon>
然后是我组件中的icon字段赋值:
faCheck = faCheck;
请注意,我基本上只更改了我测试过的示例中的图标名称,这些示例正在我上面发布的 Url 上工作。即使我在声明中查看“faCheck”的定义,我也看到它已定义,所以我希望它可用。
Chrome 控制台在加载页面时显示此错误:
FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.
第一次尝试在我的项目中使用 FontAwesome,欢迎提供有用的一般信息。
更新:在重建我的整个应用程序时它开始工作了。我当时使用的是 VS Code,所以当你保存文件时,他会尝试重新创建最终的包,让你导航和检查你的开发。我不知道组件的内存状态到底发生了什么。我认为该图标未显示是因为引用文献未对齐。
最佳答案
你所要做的就是:
1 - 将此添加到您的 index.html:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
2 - 将您的图标用作:
<i class="fas fa-check"></i>
您无需在 component.ts
或 app.module.ts
中添加任何内容,也无需使用 yarn 或 npm 安装任何内容。
编辑: 为了回答您的问题,这里有一个 stackblitz,其中使用了教程中提到的 faCheck,它对我有用:https://stackblitz.com/edit/angular-4ebr9t
检查您是否按照教程中的说明安装了所有依赖项。
关于angular - Angular 6中的FontAwesome图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52006605/