Angular 6中的FontAwesome图标? [英] FontAwesome Icons in Angular 6?
问题描述
我正在尝试在Angular项目中使用FontAwesome中的图标.
我从入门"指南开始,您可以在这里找到: FontAwesome Angular入门
I'm trying to use icons from FontAwesome in an Angular project.
I started with the "Getting Started" guide you can find here: FontAwesome Angular Getting Started
一切正常,无论我将其放在模板中的什么位置,我都可以看到faCoffee图标.但是,如果我尝试将其更改为另一个图标(例如检查"图标),则不会显示任何内容.
Everything works fine, i can see the faCoffee icon wherever i put it in my templates. But if I try to change it to another icon (ex. the "check" icon), nothing is shown.
我在组件级别更改了图标声明,使其看起来像这样:
I changed my icon declaration at component-level to make it look like this:
import { faCheck } from '@fortawesome/free-solid-svg-icons';
更改了html模板以显示我的新图标:
Changed the html template to show my new icon:
<fa-icon [icon]="faCheck"></fa-icon>
然后在我的组件中分配图标字段:
Then the icon field assignment in my component:
faCheck = faCheck;
请注意,在我上面测试的示例中,我实际上仅更改了图标的名称,这些示例在上面发布的网址中起作用.即使我在声明中使用"faCheck"的定义,我也会看到它已定义,因此我希望它可以使用.
Please note that i'm changing essentially only the name of the icon from the examples that i tested and are working at the Url i posted above. Even if I go to the definition of "faCheck" on my declaration, i see that it's defined so I expect it to be available.
Chrome控制台在页面加载时显示此错误:
Chrome console shows this error when page is loading:
FontAwesome:找不到图标.似乎您已为此组件提供了一个空或未定义的图标对象.
FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.
首次尝试在我的项目中使用FontAwesome,欢迎提供有用的常规信息.
First attempt to use FontAwesome in my projects, useful general informations are welcome.
更新:它可以正常重建我的整个应用程序.我使用的是VS Code,因此当您保存文件时,他尝试重新创建最终的包以使您能够浏览和检查开发情况.我不知道组件在内存中的状态到底会发生什么.我认为该图标未显示,因为引用存在一些偏差.
UPDATE: Got it working rebuilding my entire application. I was using VS Code, so when you save a file he tries to recreate the final bundle to let you navigate and check your development. I don't know what really happens with components in-memory state. I think the icon was not showing because of some misalignment of references.
推荐答案
您要做的就是:
1-将此添加到您的index.html:
1 - add this to your 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-将您的图标用作:
2 - use your icon as:
<i class="fas fa-check"></i>
您不必在component.ts
或app.module.ts
中添加任何内容,也无需使用yarn或npm安装任何内容.
You don't have to add anything in your component.ts
nor in your app.module.ts
nor install anything with yarn or npm.
为了回答您的问题,这是本教程中提到的使用faCheck进行的堆栈闪电测试,它对我有用: https ://stackblitz.com/edit/angular-4ebr9t
To answer you question, here is a stackblitz with the faCheck used as mentioned in the tutorial, it's working for me: https://stackblitz.com/edit/angular-4ebr9t
检查是否按照教程中的说明安装了所有依赖项.
check if you installed all the dependencies as said in the tutorial.
这篇关于Angular 6中的FontAwesome图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!