Font Awesome 4.0.3 -circle不工作

Question

我正在尝试将Font Awesome 4.0.3与-circle和-o tags一起使用，每次我的图标都会消失。

我正在使用它：<i class="fa fa-twitter-circle-o fa-2x"></i>

我没有得到一个空白的方块或其他任何类型的东西;只是一片空白。

这有效：<i class="fa fa-twitter fa-2x"></i>

根据他们的new naming conventions

，首先不应该工作吗？

*编辑*

为了详细说明，我知道我可以像3x一样堆叠它们，所以暂时我有以下（因为圆圈太厚了）：

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

也许我误解了FA网站上的文档，但我读了它，因为其他应该工作。

Answer 1

我认为您可能需要堆叠它们：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

请参阅堆叠图标：http://fortawesome.github.io/Font-Awesome/examples/

Answer 2

您认为根据Font Awesome naming conventions，您应该尝试做的事情应该是正确的：

具有讽刺意味的是，他们改变命名惯例的动力是：

  

希望更好的图标命名一致性和可预测性

但是，他们在记录哪些符号变体可用方面做得不好。

注意fa-check-circle有效，但fa-twitter-circle没有。

如果 Ctrl + F for＆＃34; circle＆＃34;在他们的CSS source上，您会注意到只有以下符号才有圆圈版本：

• 播放*
• 加*
• 减
• 时报*
• 检查*
• 问题
• 信息
• 十字线
• 感叹号
• 箭头*
• 点
• 雪佛龙*

**（也包括一些变体）*

如果你输入任何其他内容，就CSS而言，它只会变成一个随机的字符。它不符合他们任何预定义的类，所以它不会把它视为任何特殊的东西;这就是当您尝试添加圆圈时丢失图标的原因。

已经提出的替代方法是使用fa-stack手动组合圆圈和圆圈以及鸟类。由于圆圈看起来有点厚，而不是用-o反转鸟，你可以用这样的.fa-inverse反转圆圈：

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>

这是 Demo of the stacked option and every available circle icon 。

这里是演示的样子：