我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
在Angular项目中使用Font-Awesome有三个部分
安装 样式(CSS / SCSS) Angular中的用法
安装
从NPM安装并保存到package.json
npm install --save font-awesome
样式 如果使用CSS
插入到style.css中
@import '~font-awesome/css/font-awesome.css';
样式 如果使用SCSS
插入到style.scss中
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
在普通Angular 2.4+ 4+中使用
<i class="fa fa-area-chart"></i>
使用Angular材质
在你的app.module.ts中修改构造函数以使用MdIconRegistry
export class AppModule {
constructor(matIconRegistry: MatIconRegistry) {
matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
}
并将MatIconModule添加到@NgModule导入中
@NgModule({
imports: [
MatIconModule,
....
],
declarations: ....
}
现在在任何模板文件中都可以这样做
<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
其他回答
使用Angular2 RC5和angular-cli 1.0.0-beta.11-webpack。你可以通过CSS导入来实现这一点。
只需安装字体awesome:
npm install font-awesome --save
然后在你配置的样式文件中导入font-awesome:
@import '../node_modules/font-awesome/css/font-awesome.css';
(样式文件在angular-cli.json中配置)
2020年2月更新: Fortawesome包现在支持ng add,但仅适用于angular 9及以上版本:
ng add @fortawesome/angular-fontawesome
2019年10月8日更新:
你可以使用一个新的包https://www.npmjs.com/package/@fortawesome/angular-fontawesome
npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
在src/app/app.module.ts中导入FontAwesomeModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
imports: [
BrowserModule,
FontAwesomeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
将图标绑定到组件src/app/app.component.ts中的属性:
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
faCoffee = faCoffee;
}
使用模板src/app/app.component.html中的图标:
<fa-icon [icon]="faCoffee"></fa-icon>
最初的回答:
选项1:
你可以使用angular-font-awesome npm模块
npm install --save font-awesome angular-font-awesome
导入模块:
...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
如果你使用的是Angular CLI,那就在Angular - CLI .json的styles中添加这个漂亮的CSS
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
注意:如果使用SCSS预处理器,只需更改SCSS的css
使用示例:
<fa name="cog" animation="spin"></fa>
选项2:
现在有一个官方的说法
安装font-awesome库并将依赖项添加到package.json
NPM install——save font-awesome
使用CSS
添加CSS图标到你的应用程序…
// in .angular-cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
]
使用萨斯
创建一个空文件_variables。src/中的SCSS。
在_variables.scss中添加如下内容:
$fa-font-path: '../node_modules/font-awesome/fonts'; 在风格。SCSS添加以下内容:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
Test
运行ng serve以开发模式运行应用程序,并导航到http://localhost:4200。
要验证Font Awesome已正确设置,将src/app/app.component.html更改为以下…
<h1>
{{title}} <i class="fa fa-check"></i>
</h1>
保存此文件后,返回浏览器,在应用程序标题旁边看到字体Awesome图标。
还有一个相关的问题,Angular CLI将font-awesome字体文件输出到dist根目录,因为默认情况下,Angular CLI将字体输出到dist根目录,顺便说一下,这根本不是问题。
Font Awesome为您提供了可伸缩的矢量图标,可以立即自定义大小,颜色,投影,以及任何可以用CSS的力量完成的事情。
创建一个新项目并导航到该项目。
ng new navaApp
cd navaApp
安装font-awesome库并将依赖项添加到package.json。
npm install --save font-awesome
使用CSS
添加CSS图标到你的应用程序…
// in angular.json
"build": {
"options": {
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
],
}
}
使用萨斯
使用SASS创建新项目:
ng new cli-app --style=scss
使用现有的项目与CSS:
将src/styles.css重命名为src/styles.scss 改变角度。Json来查找样式。用SCSS代替css:
// in angular.json
"build": {
"options": {
"styles": [
"src/styles.scss"
],
}
}
确保将styles.css更改为styles.scss。
创建一个空文件_variables。src/中的SCSS。
在_variables.scss中添加如下内容:
$fa-font-path : '../node_modules/font-awesome/fonts';
在风格。SCSS添加以下内容:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
经过一些实验,我设法得到以下工作:
使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束svg | | ttf woff | | woff2)”, ] 添加到index.html <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
关键是在angular-cli-build.js文件中包含字体文件类型
.+(css|css.map|otf|eot|svg|ttf|woff|woff2)
在Angular 2.0最终版发布之后,Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件,不需要system.js——只需要webpack。所以你会:
npm install font-awesome --save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: "apps": [ { "root": "src", "outDir": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!? ], ... } ] ], In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css". Place some font-awesome icons in any html file you want: <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i> Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes. Enjoy your awesome icons!