我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
如果由于某种原因你不能安装包抛出npm。你可以编辑index.html,并在头部添加字体和CSS。然后用在项目中。
其他回答
将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"
进入命令提示符,输入您配置的npm命令。
如果你想使用免费版本的字体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"
]
这篇文章描述了如何将Fontawesome 5集成到Angular 6中(Angular 5和以前的版本也可以工作,但你必须调整我的文章)
选项1:添加css-Files
利:每个图标都将包括在内
Contra:每个图标将包括(更大的应用程序大小,因为所有字体都包括在内)
添加以下包:
npm install @fortawesome/fontawesome-free-webfonts
然后在angular.json中添加以下代码行:
"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...
}
选项2:Angular包
优点:应用程序更小
反:你必须单独包含你想要使用的每个图标
使用FontAwesome 5 Angular包:
npm install @fortawesome/angular-fontawesome
只需按照他们的文档添加图标。他们使用svgs -icons,所以你只需要添加svgs / icons就可以了。
如果由于某种原因你不能安装包抛出npm。你可以编辑index.html,并在头部添加字体和CSS。然后用在项目中。
上面的答案有点过时了,有一种稍微简单的方法。
通过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是行不通的(也许反之亦然)。原因如下