我使用的是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>
其他回答
如果你想使用免费版本的字体awesome - bootstrap,使用这个:
npm install --save @fortawesome/fontawesome-free
如果你正在构建angular项目,你还需要在你的angular中添加这些导入。json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/@fortawesome/fontawesome-free/js/all.js"
]
如果你使用的是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的基础设施。;)
使用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中配置)
webpack2使用:
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
loader: "file-loader"
}
name=/assets/fonts/[name].[ext]
我想使用字体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";