如何在GitHub托管Font Awesome v4.7.0并用于Blogger网站？

方案一：使用GitHub Pages托管（最推荐） #

GitHub Pages是官方静态文件托管服务，无防盗链限制，可直接替代CDN：

1. 调整仓库结构：将lib/font-awesome下的所有内容（含css、fonts子文件夹）移至仓库根目录或docs目录（GitHub Pages默认支持这两个目录）
2. 开启GitHub Pages：
   • 打开仓库页面，进入「Settings」→「Pages」
   • 在「Source」选项中选择分支为assets，目录对应你刚才调整的根目录或docs
   • 保存后等待数分钟，GitHub会生成格式为https://<用户名>.github.io/<仓库名>/的访问域名
3. 在Blogger中引用：
   假设生成的域名是https://myfileshost.github.io/assets/，则CSS引用代码为：

   <link rel="stylesheet" href="https://myfileshost.github.io/assets/css/font-awesome.min.css">
   

方案二：修复Firebase托管问题 #

若坚持用Firebase，问题多为静态文件配置不全或Content-Type错误：

1. 确保本地部署目录（如public）包含完整Font Awesome文件：css文件夹（含font-awesome.min.css）和fonts文件夹（含.woff、.woff2、.ttf等所有字体文件）
2. 修改firebase.json配置，添加正确的响应头：

   {
     "hosting": {
       "public": "public",
       "headers": [
         {
           "source": "**/*.css",
           "headers": [{"key": "Content-Type", "value": "text/css"}]
         },
         {
           "source": "**/*.woff2",
           "headers": [{"key": "Content-Type", "value": "font/woff2"}]
         },
         {
           "source": "**/*.woff",
           "headers": [{"key": "Content-Type", "value": "font/woff"}]
         },
         {
           "source": "**/*.ttf",
           "headers": [{"key": "Content-Type", "value": "font/ttf"}]
         },
         {
           "source": "**/*.svg",
           "headers": [{"key": "Content-Type", "value": "image/svg+xml"}]
         }
       ]
     }
   }
   

3. 重新部署：执行firebase deploy --only hosting
4. 用Firebase提供的域名在Blogger中引用CSS即可

关键注意事项 #

• 无论哪种托管方式，必须完整上传Font Awesome所有文件，仅传CSS文件会导致图标无法显示——字体文件是图标的核心依赖
• GitHub Raw链接无法用于Blogger的核心原因是：Raw资源有防盗链策略，非GitHub域名的请求会被限制，或Content-Type被错误识别为纯文本

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