配置angular使用Font Awesome
Include Font Awesome
包含 Font Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font Awesome 为您提供可立即定制的可缩放矢量图标 - 尺寸，颜色，阴影以及任何可以通过CSS强大功能进行定制的图标。
Create a new project and navigate into the project...
创建一个新项目并导航到项目中...
ng new my-app
cd my-app
Install the font-awesome library and add the dependency to package.json...
安装font-awesome库并将依赖关系添加到package.json...
npm install --save font-awesome
Using CSS
使用 CSS
To add Font Awesome CSS icons to your app...
将Font Awesome CSS图标添加到您的应用程序...
// in angular.json
"build": {
"options": {
"styles": [
"../node_modules/font-awesome/css/font-awesome.css"
"styles.css"
],
}
}
使用 SASS
Create an empty file _variables.scss in src/.
在 src/ 中创建一个空文件 _variables.scss。
Add the following to _variables.scss:
将以下内容添加到 _variables.scss：
$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss add the following:
在 instles.scss 中添加如下内容：
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
Test
测试
Run ng serve to run your application in develop mode, and navigate to http://localhost:4200.
运行 ng serve 以开发模式运行您的应用程序，并导航到 http//localhost:4200。
To verify Font Awesome has been set up correctly, change src/app/app.component.html to the following...
要验证 Font Awesome 已正确设置，请将 src/app/app.component.html 更改为以下内容...
<h1>
{{title}} <i class="fa fa-check"></i>
</h1>
After saving this file, return to the browser to see the Font Awesome icon next to the app title.
保存此文件后，返回到浏览器以查看应用标题旁边的 Font Awesome 图标。
