在Tampermonkey中使用Font Awesome CDN遇图标显示异常求助

核心问题原因 #

1. Font Awesome 6类名规范变化：旧的fa前缀在v6中虽保留兼容，但推荐使用明确的样式前缀（如fa-solid/fa-regular），否则可能无法匹配正确图标。
2. 字体文件加载失败：通过@resource引入CSS后，CSS内的字体路径为相对CDN的路径，Tampermonkey沙箱环境会导致浏览器无法正确请求字体资源，最终显示方块。

解决方案 #

方案1：动态注入Font Awesome链接标签（最可靠） #

放弃@resource方式，直接在页面头部添加官方CDN的链接标签，让浏览器正常加载CSS和字体：

// ==UserScript==
// @name         Name
// @description  Description
// @author       You
// @version      0.1
// @match        https://mysite*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
// @grant        none
// ==/UserScript==

// 动态添加Font Awesome样式表
const faLink = document.createElement('link');
faLink.rel = 'stylesheet';
faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
document.head.appendChild(faLink);

// 渲染自定义div，注意更新图标类名
$("#somediv").before(`
<div style="
    background-color: white;
    height: 150px;
    box-shadow: inset 0px 0px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid lightgray;
">Test
<i class="fa-solid fa-circle"></i>
</div>`);

方案2：修正CSS中的字体路径（保留@resource方式） #

如果坚持使用@resource，需要将CSS内的相对字体路径替换为CDN绝对路径，确保字体能被正确请求：

// ==UserScript==
// @name         Name
// @description  Description
// @author       You
// @version      0.1
// @match        https://mysite*
// @resource     customCSS https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

var newCSS = GM_getResourceText("customCSS");
// 将相对字体路径替换为CDN绝对路径
newCSS = newCSS.replace(/url\(\.\.\/webfonts\//g, 'url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/');
GM_addStyle(newCSS);

// 渲染自定义div，更新图标类名
$("#somediv").before(`
<div style="
    background-color: white;
    height: 150px;
    box-shadow: inset 0px 0px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid lightgray;
">Test
<i class="fa-solid fa-circle"></i>
</div>`);

关键注意点 #

• 图标类名必须符合Font Awesome 6规范：免费实心图标用fa-solid前缀，空心图标（部分需Pro权限）用fa-regular，品牌图标用fa-brands。
• 若使用Font Awesome Kit，同样可以用方案1的方式，将Kit的链接标签动态注入页面即可生效。

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