angular项目中引入fontawesome插件

拼搏现实的明天。 2022-12-05 12:25 263阅读 0赞

## angular项目中引入fontawesome插件 ##

1 安装依赖  
npm install font-awesome --save-dev

2 angular.json中引入font-awesome.css

"node_module/font-awesome/css/font-awesome.css"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70_pic_center]  
3 在需要的less文件中引入（一般是在入口的less文件中引入）

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

![在这里插入图片描述][20200910154831767.png_pic_center]  
4 开始使用，分为两种使用方法

官网查图标：[https://fontawesome.dashgame.com/][https_fontawesome.dashgame.com]  
具体使用属性参考 [https://blog.csdn.net/shuai\_wy/article/details/74496588][https_blog.csdn.net_shuai_wy_article_details_74496588]  
（1）直接使用class属性，一般使用i标签，页面即可出先电话图标

（2）在before里面自定义content以及样式

// 这是个信封的图标
    .srchfill_innr:before { 
    //位置
      position: absolute;
      top: 10px;
      left: 15px;
      //信封图标
      content: "\f003";
      //字体必写，不写出现空框
      font-family: 'FontAwesome';
      //控制图标粗细
      font-weight: 400;
      //图标颜色
      color: #2bb880;
      //控制图标大小
      font-size: 20px;
      //以下跟图标就没关系了
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: #e9f8f2;
      border-radius: 50%;
      width: 48px;
      height: 48px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b82db4cd5fc148a3aa5fae52bd0bba5e.png
[20200910154831767.png_pic_center]: /images/20221123/e22387bb3c794f9086e9eb8432cea702.png
[https_fontawesome.dashgame.com]: https://fontawesome.dashgame.com/
[https_blog.csdn.net_shuai_wy_article_details_74496588]: https://blog.csdn.net/shuai_wy/article/details/74496588