即使在angular上安装了软件包，'Font图标也不会显示

Question

我需要添加一些社交媒体图标，我不确定除了字体棒，如果有任何其他我可以免费使用，我安装了软件包，并添加

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

这是我的Style.css：

@font-face {
font-family: "FutoSans";
src: local("FutoSans"), url(assets/fonts/FutoSans-Bold.ttf) format("truetype");
}

这是我的angular.json

 "styles": [
          {
            "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
  
          },
          "src/styles.css",
       "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
         
        ],

但是，当我使用下面的标记时，它没有显示任何内容

<i class="fab fa-instagram"></i>

Answer 1

请阅读fontawesome包提供的文档。您可以使用以下命令获取图标：

TS

import { faCoffee } from '@fortawesome/free-solid-svg-icons'; <---

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee; <----
}

HTML

<fa-icon [icon]="faCoffee"></fa-icon>

如果你只想在你的超文本标记语言中使用CSS类，下载免费的字体版本(npm i@fortawesome/ fontawesome )，并在你的angular.json中包含CSS和.js，如下所示：

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

然后就可以使用"fab fa-icon“类了。

Answer 2

试试这个，我在我的项目中有这个。

npm install font-awesome --save

在angular.json中添加令人敬畏的字体链接：

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

在HTML <i class="fa fa-cog fa-spin"></i>中使用