如何确保Web扩展中的Font Awesome图标在谷歌及Gmail中正常显示？

我开发的Web扩展会弹出带搜索输入框的模态框，触发后可在任意页面显示。搜索框内的Font Awesome图标<i class="fa fa-search"></i>在多数网站正常显示，但在Google.com及Gmail中无法显示。

请问：

1. 如何让该图标在所有网站（含谷歌及Gmail）正常显示？
2. 谷歌是否存在阻止Font Awesome图标的脚本？

附上相关代码：

content.js 代码 #

//Create the modal & add it to the HTML body
const modal = document.createElement('div');
modal.classList.add('modal');
modal.style.display = 'none';
modal.style.position = 'fixed';
modal.style.justifyContent = 'center';
modal.style.zIndex = '1';
modal.style.left = '0';
modal.style.top = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.overflow = 'auto';
modal.style.backgroundColor = 'rgba(0,0,0,0.4)';
document.body.appendChild(modal);

//Create the search container and place it inside the modal
const searchContainer = document.createElement('div');
searchContainer.classList.add('search-container');
searchContainer.style.backgroundColor = '#fff';
searchContainer.style.borderRadius = '20px';
searchContainer.style.display = 'flex';
searchContainer.style.justifyContent = 'center';
searchContainer.style.marginTop = '11rem';
searchContainer.style.marginRight = '1rem';
searchContainer.style.alignItems = 'center';
searchContainer.style.position = 'relative';
searchContainer.style.width = '300px';
searchContainer.style.height = '40px';
modal.appendChild(searchContainer);

//Create the input and place it inside the search container
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search...JavaScript';
searchInput.style.width = '90%';
searchInput.style.height = '100%';
searchInput.style.border = 'none';
searchInput.style.backgroundColor = '#fff';
searchInput.style.color = '#6e6e6e';
searchInput.style.outline = 'none';
searchInput.style.fontSize = '16px';
searchInput.style.padding = '0px 18px 0px 18px';
searchInput.style.borderRadius = '20px';
searchContainer.appendChild(searchInput);

//add the icon inside the input
const searchIcon = document.createElement('i');
searchIcon.classList.add('fa', 'fa-search');
searchIcon.style.color = '#888';
searchIcon.style.fontSize = '20px';
searchIcon.style.position = 'absolute';
searchIcon.style.right = '10px';
searchContainer.appendChild(searchIcon);

content.html 代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styleForModal.css">
  <link rel="stylesheet" href="fontawesome/fontawesome-free-6.4.0-web/css/all.min.css">
  <title>QuickDic</title>
  <script src="content.js"></script>
</head>
<body>

</body>
</html>

为什么谷歌系网站不显示图标？ #

谷歌的网站（包括Gmail）存在严格的安全与样式隔离机制：

• 通过**内容安全策略（CSP）**限制外部资源加载，Font Awesome的字体文件可能被拦截。
• 自身样式会覆盖第三方类名（如fa、fa-search），导致图标样式失效。
• 部分页面使用Shadow DOM或样式隔离机制，阻止外部样式渗透。
  并非专门针对Font Awesome，而是整体的安全与样式管控策略。

具体解决方法 #

1. 改用内联SVG图标（最可靠方案）

直接嵌入搜索图标的SVG代码，完全脱离外部字体和样式依赖，规避所有限制：

// 替换原创建searchIcon的代码
const searchIcon = document.createElement('svg');
searchIcon.setAttribute('width', '20');
searchIcon.setAttribute('height', '20');
searchIcon.setAttribute('viewBox', '0 0 24 24');
searchIcon.setAttribute('fill', 'none');
searchIcon.setAttribute('stroke', '#888');
searchIcon.setAttribute('stroke-width', '2');
searchIcon.innerHTML = `
  <circle cx="11" cy="11" r="8"></circle>
  <path d="m21 21-4.35-4.35"></path>
`;
searchIcon.style.position = 'absolute';
searchIcon.style.right = '10px';
searchContainer.appendChild(searchIcon);

2. 强制注入Font Awesome样式（可选）

若坚持使用Font Awesome，需手动注入样式并配置权限：

• 在content.js开头添加样式注入代码：

const faStyle = document.createElement('link');
faStyle.rel = 'stylesheet';
faStyle.href = chrome.runtime.getURL('fontawesome/fontawesome-free-6.4.0-web/css/all.min.css');
document.head.appendChild(faStyle);

• 在manifest.json中配置资源可访问权限：

"web_accessible_resources": [
  {
    "resources": ["fontawesome/fontawesome-free-6.4.0-web/css/all.min.css", "fontawesome/fontawesome-free-6.4.0-web/webfonts/*"],
    "matches": ["<all_urls>"]
  }
]

注意：该方法仍可能被谷歌CSP拦截，且易与页面样式冲突，优先级低于SVG方案。

3. 提升图标样式优先级（配合样式注入使用）

确保Font Awesome样式不被页面覆盖，给图标添加!important声明：

searchIcon.style.cssText += `
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
`;

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