Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了包括@ fortawesome / fontawesome到angular-cli项目大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将字体awesome 5包含在运行Angular> 5.0.0的angular-cli项目(1.6.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所述):

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文件包含在“styles”数组中.但Font Awesome 5没有包含所有css的css文件.它只是一堆.js文件.

如何在Angular CLI项目中正确包含Font Awesome 5? (我希望能够在我的标记中使用例如< i class =“fal fal-user”>< / i>)

在Font Awesome 5中,您可以使用FA4中基于字体的图标,也可以使用基于SVG的新图标.我仍在研究使用angular-cli配置基于SVG的功能,但对于基于字体的设置,您可以:

将FontAwesome添加到.angular-cli.json:

将FA样式包括为CSS或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中包含样式:

$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,那么使用第一种方法可能最容易.它只是您配置的一部分.

关于SVG

我怀疑这需要包含FA javascript文件,但我还没有深入研究.一旦完成,它可能与上述非常相似.

SVG Redux

(编辑以在SVG上添加更多细节)

它比我想象的要简单得多.鉴于您安装了正确的模块:

…你可以将两个必需的脚本添加到.angular-cli.json中.你需要基本的fontawesome脚本,然后你需要的任何一个包(或所有三个):

"scripts": [
    "../node_modules/@fortawesome/fontawesome/index.js","../node_modules/@fortawesome/fontawesome-free-solid/index.js"
  ],

这些脚本将找到您的普通FA类,并用完整的SVG版本的FA图标替换元素.

大佬总结

以上是大佬教程为你收集整理的包括@ fortawesome / fontawesome到angular-cli项目全部内容,希望文章能够帮你解决包括@ fortawesome / fontawesome到angular-cli项目所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。