将 @fortawesome/fontawesome 包含到 angular-cli 项目中 [英] Include @fortawesome/fontawesome to angular-cli project
问题描述
我正在尝试将字体 awesome 5 包含到运行 Angular >5.0.0 的 angular-cli 项目 (1.6.0) 中.
I'm trying to include font awesome 5 to my angular-cli project (1.6.0) running Angular >5.0.0.
我使用过(如所述):
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'
但是打字稿抛出错误:
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 类，并用 FA 图标的完整 SVG 版本替换元素.
Those scripts will find your normal FA classes and replace the elements with full SVG versions of the FA icons.
这篇关于将 @fortawesome/fontawesome 包含到 angular-cli 项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
