我正在工作的角度(6)应用程序,我试图使用FA图标,并没有运气下拉。我正在成功地使用FA(4)图标,例如:
<i class="fa fa-align-justify"></i>
但是<i class="fas fa-align-justify"></i>
不起作用。我使用以下命令安装FA:
npm install font-awesome --save
这是来自package.json
中的node_modules
文件夹:
我可以看到font-awesome.css
,但它写的是Font Awesome 4.7.0
,如下所示:
在angular.json
文件中,我引用了FA:"node_modules/font-awesome/css/font-awesome.min.css",
我读了很多像如何使用通过NPM安装的字体这样的帖子
我还需要做什么?
发布于 2018-09-22 11:01:31
对于第5版,您需要遵循包@fortawesome/fontawesome
。参见installation 使用包管理器。
使用npm的:
npm install --save @fortawesome/fontawesome-free
然后在all.css
或all.js
中引用<head>
。
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
注意:确保路径正确,这取决于您从哪里安装的包。
或您可以在js代码中导入模块。
import '@fortawesome/fontawesome-free/js/all.js';
如果您正在使用Sass,则可以导入或中的app.scss
模块。
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';
注释:将<type>
替换为solid
、brands
或regular
,这是您需要的任何类型的图标。
字体有一个正式的角度组件。
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome
注释:将<type>
替换为solid
、brands
或regular
,这是您需要的任何类型的图标。
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome
发布于 2018-09-22 10:33:01
For FontAwese4.7.0:
它的工作方式应该是简单地做:
npm install font-awesome --save
并补充:
@import "~font-awesome/css/font-awesome.css";
...to您的styles.css
或styles.scss
。
用于字体5使用正式字体5角组件
npm add @fortawesome/fontawesome-svg-core
npm add @fortawesome/free-solid-svg-icons
npm add @fortawesome/angular-fontawesome
在模板中:
<div style="text-align:center">
<fa-icon [icon]="faAlignJustify"></fa-icon>
</div>
在你的打字稿中:
import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';
export class MyComponent {
faAlignJustify = faAlignJustify;
}
在组件的模块中:
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
declarations: [
MyComponent
],
imports: [
BrowserModule,
FontAwesomeModule
]
})
export class MyModule { }
发布于 2020-05-25 10:27:03
如果您正在使用npm install --save @fortawesome/fontawesome-free
,请将package.json
更改为引用
import "@fortawesome/fontawesome-free/css/all.css";
https://stackoverflow.com/questions/52455614
复制相似问题