Font Awesome 图标 - 有些显示，有些不显示答案

【问题标题】：Font Awesome icons - some display, some do notFont Awesome 图标 - 有些显示，有些不显示
【发布时间】：2014-04-20 23:14:24
【问题描述】：

我正在使用带有 Gantry 框架的 Joomla 3.0 开发一个新模板，但我遇到了一个问题，即我的 Font Awesome 图标不显示。现在，这个框架已经在框架中内置了 Font Awesome，我所做的就是用自定义 CSS 样式覆盖模板的 CSS，并保留所有模板文件。

话虽如此，这就是我将 Font Awesome 图标编码到我的页面中的方式（相当简单）：

<div class="container">
  <ul>
    <li><a href="#"><i class="icon-twitter"></i></a></li>
    <li><a href="#"><i class="icon-facebook"></i></a></li>
    <li><a href="#"><i class="icon-youtube"></i></a></li>
    <li><a href="#"><i class="icon-google-plus"></i></a></li>
    <li><a href="#"><i class="icon-pinterest"></i></a></li>
  </ul>
 </div>

这是 CSS（同样，相当简单）：

/* ---------- Social Media ----------*/

.custom_socialMedia ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.custom_socialMedia li{
font-size:2.5em;
display:inline;
}

.custom_socialMedia .container{
    width:100%;
    margin: 0 auto;
}

.custom_socialMedia p{
    font-family:'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
font-weight: 200;
color:#F47820;
font-size:1.5em;
    text-align:center;
}

.custom_socialMedia a {
   color: #999;
   text-decoration: none;
}

.custom_socialMedia a:hover {
   color: #666;
}

.custom_socialMedia i {
   width: 1em;
   height: 1em;
   cursor: pointer;
   padding:0em 1em;
}

由于这是我的第一篇文章，我无法发布图片，但 youtube 图标未显示，但其他四个图标在 Firefox、Chrome 和 IE 中，完全符合预期。

我希望有人对此作出解释。

【问题讨论】：

这将对您有所帮助：stackoverflow.com/a/29134488/2817112

标签： twitter-bootstrap font-awesome joomla3.0

【解决方案1】：

您可能会遇到与 AdBlock 或 AdBlock Plus 相关的问题。

点击扩展并“禁用此域/页面”或取消选中“启用此站点”。

【讨论】：

我遇到了这个问题（字体很棒，社交字符没有在 Chrome 中显示）。当我在 Adblock Plus 中将该网站列入白名单时，这些字符立即重新出现。
为了澄清，社交图标被 Adblock Plus 的“Fanboy 的社交阻止列表”补充插件删除（至少在我的情况下）。禁用此列表（例如，在保留 EasyList 的同时）将防止所有站点出现此问题。

【解决方案2】：

icon-youtube 图标是在 Fontawsome 3.2 版中引入的

由于 Twitter、facebook、pinterest 和 google+ 是在 v 2.0 中引入的，我想你必须将 Fontawsome 更新到 3.2 版

另请参阅：http://fortawesome.github.io/Font-Awesome/icons/

【讨论】：

Fontawesome 对我来说是一个旧版本...感谢意外的 rails gem 依赖。我把它变成了当前版本，现在所有图标都很好用。

【解决方案3】：

在 HTML 中，包含的 div 被归类为“容器”。

在 CSS 中，您定义类 .custom_socialMedia。

你必须将该类应用到你的包含 div

【讨论】：