字体真棒图标未在Angular4项目上加载 [英] Font-awesome icons not loading on Angular4 project

查看:53
本文介绍了字体真棒图标未在Angular4项目上加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用font-awesome进行angular 4项目,我按照此指南使用npm安装该库:

解决方案

您应该使用fa而不是fas类.fa类设置字体.(向@ mike-hill提示)

查看源 http://fontawesome.io/icon/address-card/

I'm working on an angular 4 project using font-awesome, i followed this guide to install the library with npm: How to add font-awesome to Angular 2 + CLI project

i've configured the project to compile the scss stylesheets with the ng-serve command, my styles paths of the angular-cli.json looks like this:

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"

      ],

i want to make a button with an address card icon on it, i'm also working with Bootstrap 4, so it looks like this:

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

but when it loads, it looks like this:

解决方案

You should be using the class fa instead of fas. The fa class sets the font-face. (hat tip to @mike-hill)

View source on http://fontawesome.io/icon/address-card/

这篇关于字体真棒图标未在Angular4项目上加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆