我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
使用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中配置)
其他回答
使用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中配置)
在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>
我想我会抛出我的决议,因为字体awesome现在安装不同,根据他们的文档。
npm install --save-dev @fortawesome/fontawesome-free
为什么它是fortawesome现在我不知道了,但我想我会坚持使用最新的版本,而不是回到旧的字体-真棒。
然后我把它导入我的scss
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
希望这能有所帮助
公认的答案已经过时了。
棱角分明,棱角分明
安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它
在Angular 11中
npm install @fortawesome/angular-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-solid-svg-icons --save
然后在app。module。ts的imports array中
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
imports: [
BrowserModule,
FontAwesomeModule
],
然后在any.component.ts中
turningGearIcon = faCogs;
然后是any.component。html
<fa-icon [icon]="turningGearIcon"></fa-icon>