我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
如果你想使用免费版本的字体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"
]
其他回答
将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"
进入命令提示符,输入您配置的npm命令。
经过一些实验,我设法得到以下工作:
使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束svg | | ttf woff | | woff2)”, ] 添加到index.html <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
关键是在angular-cli-build.js文件中包含字体文件类型
.+(css|css.map|otf|eot|svg|ttf|woff|woff2)
我浪费了几个小时,试图使用AngularCLI 6.0.3和Material Design来获得最新版本的fontaweesome 5.2.0。我遵循了FontAwesome网站上的npm安装说明
他们最新的文档指导你使用以下方法进行安装:
npm install @fortawesome/fontawesome-free
在浪费了几个小时后,我终于卸载了它,并使用以下命令安装字体awesome(这安装FontAwesome v4.7.0):
npm install font-awesome --save
现在它可以很好地使用:
$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>
使用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设置,你可能不需要它,或者你可能需要其他东西。
我想使用字体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";