PHP项目引入Font Awesome样式后图标无法正常显示问题求助

• 确认CSS文件路径正确
  右键点击页面查看源代码，找到你引入的Font Awesome CSS对应的<link>标签，复制href属性的实际输出值，直接粘贴到浏览器地址栏访问，确认可以正常打开CSS文件。如果无法访问，说明base_url配置有误或者文件存放路径和你写的路径不匹配，调整路径即可。
  你当前的引入代码为：

  <link href="<?php echo base_url('home/xit_load_files/css/fontawesome-all.css'); ?>" rel="stylesheet">
  

• 确认字体文件存放路径正确
  Font Awesome的图标依赖woff、woff2等字体文件，CSS文件默认会去同级目录下的../webfonts/文件夹加载字体。你当前CSS存放在home/xit_load_files/css/目录下，需要把Font Awesome官方包里的webfonts文件夹放在home/xit_load_files/目录下，和css文件夹同级。
• 确认版本匹配你使用的图标类名
  你使用的fas fa-clipboard-list是Font Awesome 5及以上版本才支持的图标。如果你的CSS文件是4.x旧版本，就会识别不了这个类名。可以打开加载成功的fontawesome-all.css文件，查看顶部注释的版本号，和你使用的图标对应版本要求匹配即可，版本过低可以更换新版本的CSS和对应字体文件。
  你当前的图标代码为：

  <a href="#"><i class="fas fa-clipboard-list"></i> Get a demo</a>
  

• 排查CSS样式冲突
  按F12打开浏览器开发者工具，选中无法显示的i标签，查看计算样式中的font-family属性，确认是否被你自己写的其他样式覆盖了Font Awesome的字体配置，如果被覆盖调整自定义样式的优先级即可。
• 确认访问协议正确
  不要直接双击打开本地HTML文件用file协议访问，本地测试请使用集成环境（XAMPP、WAMP等）启动本地服务，用http协议访问，避免file协议跨域导致字体文件加载失败。

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