Question

我已经使用angular cli启动了一个新项目并安装了font-awesome 4.7.0

然后我在angular.json

中将其添加为依赖项

"styles": [
          "./node_modules/font-awesome/css/font-awesome.min.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/primeng/resources/themes/omega/theme.css",
          "./node_modules/primeng/resources/primeng.min.css",
          "src/styles.scss"
        ],

但是当我构建应用程序时，字体看起来像： spinning cog, spin works icon not so much... 当我检查开发人员工具the icon looks like this时我试着在我的样式scss中包含字体真棒scss 像我见过的其他答案一样但无济于事任何人都可以帮助解决这个问题吗？

Answer 1

而不是说fa-circle在课堂上通过fa-circle。当我从4升级到6号角时，它对我来说不再起作用。但是添加fa对我有用。

Answer 2

也许你必须添加对字体的引用。例如，在我的项目中，我使用了fontawesome-free-webfonts，然后我在styles.css中添加了指向该文件夹的变量（该路径被称为fontawesome v.5）：

$fa-font-path: '../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts';

如果有效，您还可以将css文件的所有其他引用移动到styles.css

Answer 3

Font Awesome具有官方的Angular组件，可供所有希望在项目中使用其图标的人使用。

https://fontawesome.com/how-to-use/on-the-web/using-with/angular

Angular 6字体真棒图标显示为随机字符

3 个答案: