Angular CLI中未显示字体字体图标:8.2.2而是显示正方形 [英] Font-awsome icons not showing in Angular CLI: 8.2.2 instead showing squares

问题描述

我已经通过npm install --save font-awesome angular-font-awesome从 https://www.npmjs安装了真棒字体.com/package/angular-font-awesome .

在angular.json中将其链接

Linked it in angular.json

"styles": [
     "src/styles.css",
     "node_modules/font-awesome/css/font-awesome.min.css"
]

在index.html中，我已链接库

in index.html i have linked the library

<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">

我的图标html代码如下:

my html code for the icon looks like this:

<i class="fa fa-facebook-f"></i>

显示静止正方形而不是图标.

and still squares are showed instead of icons.

任何人都可以帮忙吗?

推荐答案

要安装«font-awesome»，请使用:

To install «font-awesome» use:

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons

然后我们需要将其导入app.module.ts:

Then we need to import this in app.module.ts:

imports: [
    BrowserModule,
    FontAwesomeModule
],

src/app/app.component.html:

src/app/app.component.html:

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

src/app/app.component.ts

src/app/app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

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

更新:

可以通过添加faFacebook图标来使用Facebook fontawesome.让我举个例子.

It is possible to use Facebook fontawesome by adding faFacebook icon. Let me show an example.

要安装软件包free-regular-svg-icons:

npm i --save @fortawesome/free-regular-svg-icons

要安装软件包free-regular-svg-icons:

npm i --save @fortawesome/free-brands-svg-icon

App.module.ts:

App.module.ts:

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

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
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, faFacebook } 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(private library: FaIconLibrary) {
    library.addIcons(faSquare, faCheckSquare, farSquare
        , farCheckSquare, faStackOverflow, faGithub, faMedium, faFacebook);
  }
}

app.component.html:

app.component.html:

<div style="text-align:center">
  <h2>Using Brand Icons</h2>
  <fa-icon [icon]="['fab', 'stack-overflow']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'github']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'medium']"></fa-icon>
  <br>
  <fa-icon [icon]="['fab', 'facebook']"></fa-icon>  
  <br>
</div>

可以在以下网址看到stackblitz.com.

这篇关于Angular CLI中未显示字体字体图标:8.2.2而是显示正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！