angular项目中引入fontawesome插件

angular项目中引入fontawesome插件

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

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

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

3 在需要的less文件中引入（一般是在入口的less文件中引入）

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

4 开始使用，分为两种使用方法

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

<i class="fa fa-phone"></i>

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

<div class="srchfill_innr">
    <input type="email" value="" class="form-control" placeholder="" required="">
    <input type="submit" value="sign up" class="basic-btn sbmit_btn">
</div>

// 这是个信封的图标
.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;
}