Font Awesome 5.11.2 不在 iFrame 中呈现但在主页上呈现答案

【问题标题】：Font Awesome 5.11.2 not rendering in iFrame but rendering on home pageFont Awesome 5.11.2 不在 iFrame 中呈现但在主页上呈现
【发布时间】：2020-02-22 15:28:46
【问题描述】：

我在使用 Font Awesome 时遇到问题，我一直在摸索。我已经尝试过各种版本的 CDN 和版本，但现在我已经将它安装在我的本地服务器上，版本 5.11.2。不得不使用不同版本的 Font Awesome 进行更改有点烦人。

<link href="/css/fontawesome/all.css" rel="stylesheet">

连同正确位置的 webfonts 文件夹。

我的标记是：

<a href="#"><i class="icon-facebook2"></i></a>
<a href="#"><i class="icon-twitter2"></i></a>
<a href="#"><i class="icon-yahoo2"></i></i></a>
<a href="#"><i class="icon-google2"></i></a>

我的主页和 iFrame 上都有它，我在网站的其他地方加载了它。

图标在主页上呈现良好，但在 iFrame 中它们根本不呈现。 HTML 在那里，因为那里还有一个链接。甚至连你有时看到的那个小方块都没有。

我尝试在 iFrame 中注释掉 fontawesome 的链接，但什么也没做。顺便说一句，如果我在父级中加载了 iframe 的 JS 和 CSS 库，我有点忘记了，尽管我不确定这是问题所在。

如果我使用：

<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-yahoo"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>

在主页和 iframe 上，它们都可以工作，但仍然对为什么其他代码在主页上工作而不在 iframe 中工作感到困惑。

【问题讨论】：

标签： css iframe font-awesome webfonts

【解决方案1】：

需要将 fontawesome 样式表的引用注入到 iframe 中。像这样：

  $("#iframe_id").contents().find('body').append("<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' crossorigin='anonymous' />");

上面的代码可以使用这个 CDN 引用工作——如果真的想使用本地服务器对样式表的引用，可能需要进行试验。

【讨论】：