font-awesome图标显示不出来

font-awesome图标显示不出来，打开调试平台看到出错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

应该是跨域的问题，这个需要在服务器设置允许访问这些字体文件。

我这次遇到的问题是在IIS服务器上的，就找到web.config文件，在<system.webServer>区域加上跨域设置如下：

<httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type,Accept" />
            </customHeaders>
</httpProtocol>

保存之后可以访问了。

参考文章：

解决IIS Web部署 svg/woff/woff2字体 404错误_mob604756eccc76的技术博客_51CTO博客

解决font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 ，报 404等 - 落花の无痕 - 博客园 (cnblogs.com)

IIS设置允许跨域访问，报错has been blocked by CORS policy-豫章小站 (mydns.vip)

解决办法 fonts/fontawesome-webfont.woff2 404 (Not Found)_一起去看_海的博客-CSDN博客