我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
我想使用字体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";
其他回答
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';
使用LESS(不是SCSS)、Angular 2.4.0和标准Webpack(不是Angular CLI),下面的方法对我来说是有效的:
npm install --save font-awesome
And(在my app.component.less中):
@import "~font-awesome/less/font-awesome.less";
当然,您可能需要这个明显且高度直观的代码片段(在模块中)。webpack.conf中的加载器
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
loader: 'file?name=graphics/[name].[ext]'
},
加载器是用来修复webpack错误的
"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)"
regexp匹配那些svg引用(有或没有版本规范)。取决于你的webpack设置,你可能不需要它,或者你可能需要其他东西。
在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"
]
上面的答案有点过时了,有一种稍微简单的方法。
通过NPM安装 NPM install font-awesome——保存 在你的style.css中: @ import“~ font-awesome / css / font-awesome.css”; 或者用你的风格。 $ fa-font-path:“~ font-awesome /字体”; @ import ' ~ font-awesome / scss / font-awesome '; 编辑:如注释中所述,字体行必须在新版本上更改为$fa-font-path: "../../../node_modules/font-awesome/fonts";
使用~将使sass查找node_module。这样做比相对路径更好。原因是,如果你在npm上上传了一个组件,然后在组件scss中导入了font-awesome,那么它将使用~正常工作,而不是使用相对路径,因为相对路径在那一点上是错误的。
此方法适用于任何包含css的npm模块。它也适用于scss。然而,如果你导入css到你的样式。SCSS是行不通的(也许反之亦然)。原因如下