angular4中引入font-awesome字体图标

迈不过友情╰ 2022-05-27 07:05 251阅读 0赞

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/

首先安装字体依赖文件

npm install --save font-awesome

如果使用css在你的项目的style.css中移入font-awesome.css

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

如果使用less在你的项目的style.less中移入font-awesome.less

@fa-font-path: "../node_modules/font-awesome/fonts";
    @import '~font-awesome/less/font-awesome.less';

在需要的代码中直接引用class名称

<i class="fa fa-area-chart"></i>

### 结合Material一同使用 ###

在你的app.module.ts 的constructor去使用MdIconRegistry

export class AppModule {
      constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
      }
    }

然后添加MdIconModule 在你的@NgModule中的 imports当中

@NgModule({
      imports: [
        MdIconModule,
        ....
      ],
      declarations: ....
    }

现在你可以在你项目的任何模块使用font-awesome了

<md-icon fontSet="fontawesome" fontIcon="fa-area-chart"></md-icon>

### 单独使用material ###

在index.html中直接引入

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220527/12b11503104c4e42bad6f4e08e07a1f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220527/4305c63b93554ae4809cd0bc015bbad6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关如何引入iconfont的字体图标

首先在[阿里巴巴矢量字体图标库。][Link 1] 把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。

水深无声/ 2022年12月20日 05:35/ 0 赞/ 315 阅读

相关 angular项目中引入fontawesome插件

angular项目中引入fontawesome插件 1 安装依赖 npm install font-awesome --save-dev 2 angular.jso

拼搏现实的明天。/ 2022年12月05日 12:25/ 0 赞/ 297 阅读

相关 uni-app字体图标引入

uni-app字体图标引入 1.从阿里巴巴矢量图标库下载所需图标文件官网链接：`https://www.iconfont.cn/` 2.下载完成后解压如下

男娘i/ 2022年11月05日 05:18/ 0 赞/ 196 阅读

相关 QML中使用FontAwesome字体图标

0.前言 FontAwesome是一套可免费使用的字体图标库，官网介绍： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

怼烎@/ 2022年10月29日 09:16/ 0 赞/ 363 阅读

相关 iOS开发- 巧用FontAwesome(图标,字体)

首先,先介绍一下FontAwesome。 Font Awesome 是为 Twitter [Bootstrap][] 设计的图标字体。通过Web Font的方式来显示一些图标

忘是亡心i/ 2022年08月25日 14:42/ 0 赞/ 279 阅读

相关 FontAwesome图标制作（css）

刚看了关于FontAwesome 的教程，发现可以使用这个做出很多图标，省下了切图的功夫。 css的链接地址：http://fontawesome.io/assets/fon

超、凢脫俗/ 2022年08月04日 13:54/ 0 赞/ 359 阅读

相关 angular4中引入font-awesome字体图标

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/ 首先安装字体依赖文件 npm

迈不过友情╰/ 2022年05月27日 07:05/ 0 赞/ 252 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 506 阅读

相关 Nvue引入字体图标、subNvue使用字体图标

如何在使用nvue或subNvue时添加字体图标库（线上地址） > 在nvue中使用字体图标在解决APP端使用`video`标签时，需要使用到`subNvue`原生子

傷城~/ 2021年10月06日 18:50/ 0 赞/ 1020 阅读

相关 FontAwesome图标字体库和CSS框架

1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色

系统管理员/ 2021年09月02日 05:59/ 0 赞/ 598 阅读