我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
如果你使用的是SASS,你可以通过npm安装它
npm install font-awesome --save
然后导入到你的/src/styles中。scss:
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";
提示:只要有可能,避免混淆angular-cli的基础设施。;)
其他回答
在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>
现在有几种方法可以在Angular CLI上安装fontAwesome:
ng add @fortawesome/angular-fontawesome
OR using yarn
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome
OR Using NPM
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome
参考资料:https://github.com/FortAwesome/angular-fontawesome
5. For fontawesome;X +最简单的方法是,
使用NPM包安装: NPM install——save @ fortawessome / fontawessome -free
以你的风格。SCSS文件包括:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
注意:如果你有_variables。那么在SCSS文件中包含$fa-font-path更合适,而不是在样式中。scss文件。
对于使用ng的Angular 9:
ng add @fortawesome/angular-fontawesome@0.6.x
更多信息请看这里
在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>