Font Awesome（或其他字体）图标不起作用

Jannah

如果图标字体（社交图标、菜单搜索图标、返回顶部按钮图标等）未加载到您的网站上（而是显示正方形），以下是一些故障排除步骤。

有些浏览器拒绝嵌入某些字体，在浏览器控制台可以看到这个问题：

代码：全选

Font from origin 'http://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.<br>

这应该可以解决您的问题，只需将其复制粘贴到您的 .htaccess 文件中 en 重新上传它，清除缓存并最终清除您的 CDN 文件，问题就解决了：

代码：全选

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

有关详细信息，请查看以下链接：
如何将 CDN 与 Webfonts 一起使用：https://www.maxcdn.com/one/tutorial/how ... -webfonts/
同源策略 / 跨域资源共享 / CORS：https://onapp.zendesk.com/entries/95789 ... aring-CORS

您/您的客户是否在使用 Adblock Plus？
如果启用了“删除社交媒体按钮”选项，您将错过一些品牌图标。