如何在Angular 4项目的输入文本框内添加Font Awesome图标？

兄弟，我之前在Angular 4项目里也踩过一模一样的坑！你直接写fa fa-user类没效果，大概率是因为Font Awesome没有在项目里正确配置，试试下面这几步绝对能搞定：

第一步：安装Font Awesome依赖 #

先打开终端，在项目根目录下执行命令安装：

npm install font-awesome --save

第二步：配置Angular CLI引入样式 #

Angular 4用的是旧版的angular-cli.json配置文件（不是后来的angular.json），找到这个文件，在styles数组里添加Font Awesome的CSS路径：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "styles.css"
]

（如果还没装Bootstrap，也要先执行npm install bootstrap --save，不然has-feedback这类Bootstrap样式也不会生效）

第三步：调整你的HTML代码 #

现在再用你原来的结构就没问题了，要是图标位置不对，可以加个行高调整垂直居中：

<div class="form-group has-feedback">
  <input class="form-control" name="UserName" type="text" placeholder="username">
  <span class="fa fa-user form-control-feedback" style="line-height: 34px;"></span>
</div>
<div class="form-group has-feedback">
  <input class="form-control" name="PassWord" type="password" placeholder="password">
  <span class="fa fa-lock form-control-feedback" style="line-height: 34px;"></span>
</div>

备选方案：用CDN快速测试 #

要是嫌配置麻烦，也可以直接在index.html的<head>里引入Font Awesome的CDN链接，临时测试用：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

不过还是推荐本地安装的方式，项目打包更稳定。

内容的提问来源于stack exchange，提问作者Ben