我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
对于Angular 6,
第一个npm安装font-awesome——保存
将node_modules/font-awesome/css/font-awesome.css添加到angular.json中。
记住不要在node_modules/前面添加任何点。
其他回答
如果由于某种原因你不能安装包抛出npm。你可以编辑index.html,并在头部添加字体和CSS。然后用在项目中。
我想使用字体Awesome 5+和大多数答案集中在旧版本
对于新的Font Awesome 5+, angular项目还没有发布,所以如果你想使用Font Awesome网站atm上提到的例子,你需要使用一个变通方法。(尤其是fas, far类而不是fa类)
我刚刚在我的styles.css中导入了cdn到Font Awesome 5。只是添加了这个,以防它能帮助别人比我更快地找到答案:-)
样式代码。css
@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
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根目录,顺便说一下,这根本不是问题。
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文件。
对于Angular 6,
第一个npm安装font-awesome——保存
将node_modules/font-awesome/css/font-awesome.css添加到angular.json中。
记住不要在node_modules/前面添加任何点。