Font Awesome 5 和 Angular 5
Font Awesome 5 and Angular 5
我正在使用 font-awesome npm 包(这是 Font Awesome 4.7 版本)但我想升级到 Font Awesome 5。我已经安装了以下包:
"@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 中它可以正常工作,但我不想一个一个地导入每个图标。有没有办法像我使用以前的版本那样使用它们?想办法不把它们一一导入吗?
谢谢
您需要在 index.html
中设置 css url
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
这是工作示例:
是的,您可以全部导入并添加它们
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in the bundle.
此外,由于您正在使用 angular-fontawesome
,因此请使用它:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FontAwesomeModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
// Add an icon to the library for convenient access in other components
library.addIcons(faCoffee);
}
}
并在 html
<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
安装
npm install --save @fortawesome/fontawesome-free
并在 .angular-cli
中使用
"styles": [
"styles.css",
"../node_modules/@fortawesome/fontawesome-free/css/all.css",
我在 angular 8 版本中使用它。它工作完美。
请遵循这个简单的程序:
先通过angular cli安装
npm install --save @fortawesome/fontawesome-free
打开angular.json并更新css文件如下
"styles":[
"styles.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css"]
重新启动服务器
例如,如何添加
<i class="fas fa-paper-plane"></i>
编码愉快:)
我正在使用 font-awesome npm 包(这是 Font Awesome 4.7 版本)但我想升级到 Font Awesome 5。我已经安装了以下包:
"@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 中它可以正常工作,但我不想一个一个地导入每个图标。有没有办法像我使用以前的版本那样使用它们?想办法不把它们一一导入吗?
谢谢
您需要在 index.html
中设置 css url<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
这是工作示例:
是的,您可以全部导入并添加它们
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in the bundle.
此外,由于您正在使用 angular-fontawesome
,因此请使用它:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FontAwesomeModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
// Add an icon to the library for convenient access in other components
library.addIcons(faCoffee);
}
}
并在 html
<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
安装
npm install --save @fortawesome/fontawesome-free
并在 .angular-cli
中使用 "styles": [
"styles.css",
"../node_modules/@fortawesome/fontawesome-free/css/all.css",
我在 angular 8 版本中使用它。它工作完美。 请遵循这个简单的程序:
先通过angular cli安装
npm install --save @fortawesome/fontawesome-free
打开angular.json并更新css文件如下
"styles":[ "styles.css", "node_modules/@fortawesome/fontawesome-free/css/all.css"]
重新启动服务器
例如,如何添加
<i class="fas fa-paper-plane"></i>
编码愉快:)