Angular4与Bootstrap4中Font-awesome图标显示异常问题

看起来你遇到的问题根源在于postcss-import的规则约束，新版本的Angular CLI（v1.6.6）对CSS的处理更加严格，这个警告直接影响了样式加载顺序，进而导致Bootstrap图标无法正常显示。下面是一步步的解决方法：

第一步：修复postcss-import警告 #

终端里的警告明确指出：@import must precede all other statements (besides @charset)，意思是所有@import语句必须放在CSS文件的最顶部，不能在任何其他CSS规则之后。

• 打开你的src/assets/css/style.css文件
• 找到所有@import语句（比如引入Bootstrap样式或其他CSS的语句），把它们全部移动到文件最开头，确保在任何类选择器、样式声明之前
• 保存文件后重新运行ng serve，这个警告应该就会消失了

第二步：确保Bootstrap图标样式正确加载 #

解决警告后，再检查图标显示的问题：

• 确认你的.angular-cli.json（Angular CLI v1.6.6使用这个配置文件）里的styles数组中，Bootstrap的CSS文件路径在自定义style.css之前，示例配置如下：

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "assets/css/style.css"
  ]
  

  这样能保证Bootstrap的基础样式（包括图标）先被加载，不会被自定义样式覆盖。
• 清理项目缓存：删除node_modules文件夹和package-lock.json文件，然后运行npm install重新安装依赖，再启动项目ng serve
• 检查图标使用的语法是否正确，比如确认图标对应的类名是否和Bootstrap（或你使用的图标库）的要求一致，避免因为类名错误导致图标不显示

按照上面的步骤操作后，应该就能解决图标显示的问题了。

内容的提问来源于stack exchange，提问作者D. Sean