Question

我使用的是font-awesome npm软件包（Font Awesome 4.7版本），但我想升级到Font Awesome5。我已经安装了以下软件包：

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

我正在使用这样的图标：

<i class="fa fa-plus"></i>

在新版本中，我尝试使用如下图标：

<i class="fas fa-sign-out-alt fa-2x"></i>

但这不起作用。我尝试添加这样的图标：

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

在我的app.module.ts中，它正在工作，但是我不想一个接一个地导入每个图标。有没有办法像以前版本一样使用它们？而不是一种逐一导入的方式？

谢谢

Answer 1

安装

npm install --save @fortawesome/fontawesome-free

并在.angular-cli

中使用

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

参考： Using a Package Manager

Answer 2

是的，您可以全部导入并添加它们

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

However

您还可以导入整个图标样式。不过要小心！无论您导入什么内容，最终都可能会使您的最终捆绑包中没有使用的图标膨胀。

此外，由于您使用的是angular-fontawesome，请使用它...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

// Add an icon to the library for convenient access in other components
library.add(faCoffee);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

和html

<div style="text-align:center">
  <!-- simple name only that assumes the 'fas' prefix -->
  <fa-icon icon="coffee"></fa-icon>
  <!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
  <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
</div>

All code taken from the official documentation's frontpage

Answer 3

您需要在index.html中设置CSS网址

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <input type="text" v-model="searchText" @keyup="fuseSearch()" placeholder="search for text">
  
  
  <div v-if="result.length == 0" style="margin-top:10px">No matching results, here is the full list</div>
  <div v-else style="margin-top:10px">{{result.length}} records found</div>
  
  
  
  <table>
    <tr>
      <th>Title</th>
      <th>FistName</th>
      <th>LastName</th>
      <th>Score</th>
    </tr>
    
    <tr v-if="result.length >0" v-for="data in result" >
      <td>{{data.item.title}}</td>
      <td>{{data.item.author.firstName}}</td>
      <td>{{data.item.author.lastName}}</td>
      <td>{{Math.round(data.score*100,2)/100}}</td>
    </tr>
    
    <tr v-if="result.length == 0" v-for="data in list">
    
      <td>{{data.title}}</td>
      <td>{{data.author.firstName}}</td>
      <td>{{data.author.lastName}}</td>
      <td></td>
    </tr>
  </table>

</div>

这是工作示例：

Stackblitz example=> font-awesome

Answer 4

我在angular 8版本中使用它。运行良好。请按照以下简单步骤操作：

首先通过angular cli安装它

npm install --save @ fortawesome / fontawesome-free
打开angular.json并按如下所示更新css文件

“样式”：[ “ styles.css”， “ node_modules/@fortawesome/fontawesome-free/css/all.css”]
重新启动服务器

例如，如何添加

<i class="fas fa-paper-plane"></i>

快乐编码：）

For more font awesome icons

字体真棒5和Angular 5

4 个答案: