字体真棒图标不显示

Question

我在开发环境（localhost）中使用Angular 4。我通过npm安装了字体awesome并添加了：

"./node_modules/font-awesome/css/font-awesome.css",

到我的样式脚本。

当我在浏览器中查看我的图标时，一切看起来都很好：

但是我的图标没有出现在页面上，只是一个空方块。我做错了什么？

Answer 1

其工作代码：

npm install font-awesome --save

在.angular-cli.json中添加font-awesome链接：

"../node_modules/font-awesome/css/font-awesome.css"

在html文件中

<i class="fa fa-cog fa-spin"></i>

Answer 2

如果您使用的是免费版本。试试这个。

首先删除令人讨厌的注册表和authToken

npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

然后安装软件包

npm install --save-dev @fortawesome/fontawesome-free

安装软件包后，在您的angular.json文件中添加以下代码

   ......      
    "styles": [
    ......
    "node_modules/@fortawesome/fontawesome-free/css/all.css"
    ],
    "scripts": [
    ....
    "node_modules/@fortawesome/fontawesome-free/js/all.js"
    ],
    .....
    

注意：这些块有两次（样式/脚本）。 同时添加到两者

Answer 3

请将以下代码添加到package.json

 "dependencies": {
     "font-awesome": "^4.7.0", // here I am saying use version 4.7 and above
}

如果您不使用角度CLI，在您的情况下交叉检查字体颜色我看到字体已加载但未出现

Answer 4

在index.html或angular.cli中链接你的font-awesome css和js文件

Index.html

<!-- Custom Fonts -->


 <link href="your node font awesome location" rel="stylesheet" type="text/css">

角-CLI：

"styles": ['your node font awesome location']

Answer 5

如果上述提示均无效，请卸载最新的提示并安装fontawesome的第4版，您可以开始使用。 https://fontawesome.com/v4.7.0/icon/trash

Answer 6

就我而言，我必须重新启动服务器。在运行服务器的cli中，按ctrl+c关闭服务器，然后运行ng serve --open或ng serve重新打开服务器。

Answer 7

我试图在angular.json中包含超赞的CSS和js字体，但是它不起作用。 Font-Awesome团队为angular制作了一个font-awesome组件，可供所有希望在Angular项目中集成图标的人使用。在为字体真棒安装正式的Angular组件之前，我们必须检查兼容性。对于Angular 10，我们必须安装0.7.x版的font-awesome组件以用于angular。

$ npm install @fortawesome/angular-fontawesome@<version>

字体真棒的图标被分成不同的软件包，这使我们仅能为项目安装所需的图标。这有助于减小超棒字体的大小。

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/free-solid-svg-icons

我们不需要在angular.json上以样式和脚本包含任何内容。要在angular中运行和使用font-awesome，我们必须在app.module.ts文件中导入FontAwesomeModule。我们可以直接在我们的角度组件模板中使用超棒的字体。

<fa-icon [icon]="['fas', 'sun']"></fa-icon>
<fa-icon [icon]="['far', 'sun']" ></fa-icon>
<fa-icon [icon]="['fab', 'facebook']"></fa-icon>

例如，在字体中配置font-awesome。检查这篇文章。 https://edupala.com/angular-font-awesome/