本地(file://)开发Web应用，Font Awesome CDN图标加载后无法显示求助

我来帮你搞定这个问题，你遇到的图标变成矩形的情况，主要是两个容易踩的坑：

• 类名和版本不匹配
  你引入的是Font Awesome 4.7.0版本的CDN，但调用图标时用了fas这个前缀——这个前缀是Font Awesome 5及以后版本才新增的（对应Solid风格图标），而4.x版本里所有图标的基础前缀都是fa。
  把你的调用代码改成这样就对了：

  <i class="fa fa-plus fa-5x"></i>
  

• file://协议的跨域限制（次要但可能存在）
  虽然你说控制台显示CSS文件加载成功，但部分浏览器在file://协议下，会拦截CDN提供的字体文件（因为字体文件的跨域策略限制）。如果改了类名还是没效果，可以试试这两个方案：

  1. 下载Font Awesome 4.7.0的完整包到本地，用相对路径引入CSS，避免跨域问题；
  2. 启动一个本地HTTP服务器（比如用Python命令python -m http.server，或者Node.js的http-server工具），通过http://localhost访问你的页面，这样就符合浏览器的同源策略了。

先优先改类名试试，这是最常见的原因，很多人会把不同版本的前缀搞混～

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