加载MaxCDN的Font Awesome资源报ERR_CONNECTION_TIMED_OUT如何解决？

问题原因 #

你遇到的net::ERR_CONNECTION_TIMED_OUT报错是maxcdn.bootstrapcdn.com提供的CDN资源在你所在的网络环境下连通性异常导致的，Font Awesome样式文件加载失败后，所有带fa-前缀的图标都无法正常渲染，nc-icon开头的图标属于Paper Dashboard内置资源，不受该问题影响。

解决方案 #

• 方案1：替换为连通性更稳定的第三方公共CDN
  把你<head>里引入Font Awesome的原有代码：

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

  替换为固定版本的公共CDN地址即可，示例：

  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  

  建议固定版本号而非使用latest标识，避免后续库版本更新后出现兼容性问题。

• 方案2：本地部署Font Awesome资源（最稳妥，无第三方依赖风险）
  下载对应版本的Font Awesome资源包，将解压后的css、fonts文件夹放入你项目的assets目录下，再将引入代码改为本地相对路径即可：

  <link href="./assets/css/font-awesome.min.css" rel="stylesheet">
  

  注意需保证css文件中引用字体文件的相对路径和你实际部署的路径匹配即可。

修改完成后清理浏览器缓存重新加载页面，fa-开头的图标即可正常显示。

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