首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用NPM安装字体5

用NPM安装字体5
EN

Stack Overflow用户
提问于 2018-09-22 10:07:47
回答 4查看 107.5K关注 0票数 48

我正在工作的角度(6)应用程序,我试图使用FA图标,并没有运气下拉。我正在成功地使用FA(4)图标,例如:

代码语言:javascript
运行
复制
<i class="fa fa-align-justify"></i>

但是<i class="fas fa-align-justify"></i>不起作用。我使用以下命令安装FA:

代码语言:javascript
运行
复制
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安装的字体这样的帖子

我还需要做什么?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-09-22 11:01:31

对于第5版,您需要遵循包@fortawesome/fontawesome。参见installation 使用包管理器

使用npm的

代码语言:javascript
运行
复制
npm install --save @fortawesome/fontawesome-free

然后在all.cssall.js中引用<head>

代码语言:javascript
运行
复制
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

注意:确保路径正确,这取决于您从哪里安装的包。

您可以在js代码中导入模块。

代码语言:javascript
运行
复制
import '@fortawesome/fontawesome-free/js/all.js';

如果您正在使用Sass,则可以导入中的app.scss模块。

代码语言:javascript
运行
复制
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';

注释:<type>替换为solidbrandsregular,这是您需要的任何类型的图标。

字体有一个正式的角度组件。

代码语言:javascript
运行
复制
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome

注释:<type>替换为solidbrandsregular,这是您需要的任何类型的图标。

还可以安装Vue反应组件。

代码语言:javascript
运行
复制
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome
票数 90
EN

Stack Overflow用户

发布于 2018-09-22 10:33:01

For FontAwese4.7.0:

它的工作方式应该是简单地做:

代码语言:javascript
运行
复制
npm install font-awesome --save

并补充:

@import "~font-awesome/css/font-awesome.css";

...to您的styles.cssstyles.scss

用于字体5使用正式字体5角组件

代码语言:javascript
运行
复制
npm add @fortawesome/fontawesome-svg-core
npm add @fortawesome/free-solid-svg-icons
npm add @fortawesome/angular-fontawesome

在模板中:

代码语言:javascript
运行
复制
<div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

在你的打字稿中:

代码语言:javascript
运行
复制
import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

在组件的模块中:

代码语言:javascript
运行
复制
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }
票数 16
EN

Stack Overflow用户

发布于 2020-05-25 10:27:03

如果您正在使用npm install --save @fortawesome/fontawesome-free,请将package.json更改为引用

代码语言:javascript
运行
复制
import "@fortawesome/fontawesome-free/css/all.css"; 
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52455614

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档