字体真棒图标最近停止显示。它们只是到处都是这样的小盒子:
这是这个特定组件中的图标:
<i class="fas fa-trash-alt fa-lg"></i>
我刚刚尝试使用他们网站上的“工具包”将 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 文件中)但图标仍然如上显示。我在这里做错了什么?
答案 0 :(得分: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
更新:
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 { faStackOverflow, 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,
faStackOverflow, 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>
答案 1 :(得分: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>