我在使用 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 在那里是因为仍然有一个链接。甚至连您有时看到的小方 block 都没有。
我尝试在 iFrame 中注释掉 fontawesome 的链接，但没有任何效果。顺便说一句，如果 iframe 加载到父级中，我有点忘记是否需要为 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 中工作感到困惑。
最佳答案
需要将对 fontawesome 样式表的引用注入(inject)到 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 引用工作——如果真的想使用对样式表的本地服务器引用，可能需要进行试验。
关于css - Font Awesome 5.11.2 不在 iFrame 中呈现，而是在主页上呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58572729/