我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
上面的答案有点过时了,有一种稍微简单的方法。
通过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是行不通的(也许反之亦然)。原因如下
其他回答
我想我会抛出我的决议,因为字体awesome现在安装不同,根据他们的文档。
npm install --save-dev @fortawesome/fontawesome-free
为什么它是fortawesome现在我不知道了,但我想我会坚持使用最新的版本,而不是回到旧的字体-真棒。
然后我把它导入我的scss
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
希望这能有所帮助
经过一些实验,我设法得到以下工作:
使用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)
要在你的Angular项目中使用Font Awesome 5,将下面的代码插入到src/index.html文件中。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
好运!
使用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中配置)
将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"
进入命令提示符,输入您配置的npm命令。