本地正常的网站主题上传服务器后Font Awesome图标显示为小方块

嘿，这个问题我在Stack Overflow上帮人解决过好多次了！别担心，咱们一步步排查，肯定能搞定：

• 先揪出路径和大小写的问题
  本地Windows系统不区分文件名大小写，但服务器（尤其是Linux系统）可是严格认大小写的！先做这几步：

  • 核对服务器上的文件路径：你的<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">里的路径，在服务器上是不是完全对应？比如有没有把Vendor写成vendor、FontAwesome写成fontawesome的情况？
  • 打开浏览器开发者工具（按F12），切到「网络」标签页，刷新页面后搜all.min.css，看它的HTTP状态码是不是200。如果是404，那就是路径错了，要么调整引用代码里的路径，要么把文件挪到对应位置。
  • 顺便看看CSS里引用的字体文件（比如webfonts/fa-solid-900.woff2这类）有没有加载失败，同样看网络请求的状态码——字体文件加载不出来，图标肯定是小方块。

• 修复文件权限问题
  服务器上的文件权限如果没设置对，Web服务器（Nginx/Apache）根本读不到字体文件。你可以登录服务器，执行这两条命令（把/var/www/html换成你的网站根目录）：

  chmod -R 755 /var/www/html/vendor/fontawesome-free
  chmod 644 /var/www/html/vendor/fontawesome-free/webfonts/*
  

  第一条是给整个Font Awesome目录加执行权限（让Web服务器能进入目录），第二条是给所有字体文件加读取权限。

• 清缓存！清缓存！清缓存！
  别小看缓存的坑：

  • 先强制刷新浏览器（Ctrl+Shift+R 或者 Cmd+Shift+R），把浏览器里存的旧CSS清掉。
  • 如果你的服务器用了CDN，或者网站装了缓存插件（比如WordPress的缓存插件），也得把服务器端的缓存清一遍，不然旧的无效文件还会被返回。

• 检查MIME类型配置
  有些服务器默认没给字体文件配置正确的MIME类型，导致浏览器识别不了字体：

  • 要是用Nginx，就在你的站点配置文件里加这段代码，然后重启Nginx：

    location ~* \.(woff|woff2|ttf|otf|eot)$ {
        add_header Content-Type font/$1;
    }
    

  • 要是用Apache，就在网站根目录的.htaccess文件里加这些配置：

    AddType font/woff .woff
    AddType font/woff2 .woff2
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType application/vnd.ms-fontobject .eot
    

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