在angular-cli项目中包含@ fortawesome/fontawesome [英] Include @fortawesome/fontawesome to angular-cli project
问题描述
我正在尝试在运行Angular> 5.0.0的angular-cli项目(1.6.0)中加入超棒5字体.
I'm trying to include font awesome 5 to my angular-cli project (1.6.0) running Angular >5.0.0.
我使用过(如上所述):
I used (as described):
yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light
它成功获取软件包.现在，我想将包装包括在我的angular-cli中.在我的app.component.ts中，我尝试执行此操作(如以下说明中所述: https://www.npmjs. com/package/@ fortawesome/fontawesome ):
It gets the packages successfully. Now I want to include the package to my angular-cli. In my app.component.ts I tried to do (as described at: https://www.npmjs.com/package/@fortawesome/fontawesome):
import fontawesome from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'
但是打字稿会抛出错误:
But typescript throws and error:
ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.
使用Font Awesome 4，我只是将.css文件包含到样式"数组中.但是Font Awesome 5没有包含所有CSS的CSS文件.这只是一堆.js文件.
With Font Awesome 4 I just included the .css file to "styles" array. But Font Awesome 5 doesn't have a css file that has all the css. It's just a bunch of .js files.
如何在我的Angular CLI项目中正确包含Font Awesome 5? (我希望能够在我的标记中使用例如<i class="fal fal-user"></i>)
How can I include Font Awesome 5 in my Angular CLI project properly? (I want to be able to use for example <i class="fal fal-user"></i> in my markup)
推荐答案
在Font Awesome 5中，您可以像在FA4中一样使用基于字体的图标，也可以使用新的基于SVG的图标.我仍在研究使用angular-cli配置基于SVG的方法，但是对于基于字体的方法，您可以:
In Font Awesome 5 you can use font-based icons as in FA4 or you can use new SVG-based icons. I'm still looking into configuring SVG-based with angular-cli but for font-based you can:
将FontAwesome添加到您的.angular-cli.json:
以CSS或SCSS形式包含FA样式:
Include the FA styles either as CSS or SCSS:
"styles": [
"styles.scss"
"../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
"../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
],
或直接将FontAwesome添加到您的样式:
在styles.css或styles.scss中包括样式:
Include the styles in styles.css or styles.scss:
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";
或直接将FontAwesome作为CSS添加到您的样式:
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";
如果您不需要修改/增强FA SCSS，那么使用第一种方法可能是最简单的.它只是成为您配置的一部分.
If you don't need to modify/enhance the FA SCSS then it's probably easiest to use the first method. It just becomes part of your configuration.
关于SVG
我怀疑这需要包含FA javascript文件，但我尚未对此进行深入研究.完成后，它可能与上面的非常相似.
I suspect that this requires the FA javascript files to be included but I haven't delved into that yet. Once done it's probably quite similar to the above.
SVG Redux
(已编辑以添加有关SVG的更多详细信息)
(edited to add more detail on SVG)
它比我预期的简单得多.如果您已安装正确的模块，则:
It's much simpler than I expected. Given you have the right modules installed:
...您只需将两个必需的脚本添加到您的.angular-cli.json中.您需要基本的fontawesome脚本，然后是所需的任何一个包(或全部三个):
...you can just add the two required scripts to your .angular-cli.json. You need the base fontawesome script and then whichever pack you need (or all three):
"scripts": [
"../node_modules/@fortawesome/fontawesome/index.js",
"../node_modules/@fortawesome/fontawesome-free-solid/index.js"
],
这些脚本将找到正常的FA类，并用完整的SVG版本的FA图标替换元素.
Those scripts will find your normal FA classes and replace the elements with full SVG versions of the FA icons.
这篇关于在angular-cli项目中包含@ fortawesome/fontawesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
