超赞字体图标显示不正确

Question

超赞字体图标最近停止显示。它们就像这样到处都是小盒子：

这是这个特定组件中的图标：

<i class="fas fa-trash-alt fa-lg"></i>

我刚刚尝试使用他们网站上的 'kits' 将 Font awesome 更新到版本 5：https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

这只是告诉您将其插入到您的 head 标签中：

<script src="https://kit.fontawesome.com/c61d55aa48.js" crossorigin="anonymous"></script>

我已经完成了（因为我正在使用 Angular，我已将它放在 index.html 文件中）但是图标仍然如上显示。我在这里做错了什么？

Answer 1

FontAwesome 4.7.0不包含fa-trash-alt图标。

FontAwesome 5 是否包含 fa-trash-alt 图标。

因此，如果您包含 FontAwesome Version 5+ fa-trash-alt 应该会按预期工作：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<i class="fas fa-trash-alt fa-lg"></i>

Answer 2

Let's look at docs how icons can be shown。所以我们可以这样输入：

<fa-icon [icon]="['far', 'square']"></fa-icon>
<br>
<fa-icon [icon]="['far', 'check-square']"></fa-icon>

The complete stackblitz example can be seen here

更新：

是necessary to install:

  npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

你的app.module.ts：

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

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
import { faSquare as farSquare, faCheckSquare as farCheckSquare } from 
  '@fortawesome/free-regular-svg-icons';
import { faWhosebug, faGithub, faMedium } from 
  '@fortawesome/free-brands-svg-icons';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor() {
    library.add(faSquare, faCheckSquare, farSquare, farCheckSquare, 
      faWhosebug, faGithub, faMedium);
  }
}

然后 app.component.html

<div style="text-align:center">
  <h2>Using Solid Icons</h2>
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <br>
  <fa-icon [icon]="['fas', 'check-square']"></fa-icon>
</div>

超赞字体图标显示不正确

Font-awesome icons not displaying correctly

html

css

font-awesome

angular