CSS中的字体真棒图标 - 更大的尺寸答案

【问题标题】：Font Awesome Icons in CSS - Larger SizesCSS中的字体真棒图标 - 更大的尺寸
【发布时间】：2016-08-04 16:46:01
【问题描述】：

我在我的 CSS 中使用这个：

#ribbon h2:before { 
  content: '\f145';
  font-family: 'FontAwesome';
  color: #FFF;
}

我希望使用这里的图标更大： http://fontawesome.io/examples/

<i class="fa fa-ticket fa-lg"></i> fa-lg
<i class="fa fa-ticket fa-2x"></i> fa-2x
<i class="fa fa-ticket fa-3x"></i> fa-3x
<i class="fa fa-ticket fa-4x"></i> fa-4x
<i class="fa fa-ticket fa-5x"></i> fa-5x

但我不知道如何混合这些代码，所以我可以使图标更大，因为一个使用数字，一个使用文本代码。例如，如果我想使用 fa-2x，我的 CSS 应该是什么样子？

谢谢！

【问题讨论】：

谢谢。我使用了下面的代码，但我真的在问如何在 CSS 中使用“fa fa-ticket fa-lg”而不是 '\f145'；或者我如何添加旋转或其他效果。将fontawesome.io/examples 此处的所有选项转换为 CSS 样式的一些简单方法 - 不是硬编码的 HTML。

标签： css fontawesome-4.4.0

【解决方案1】：

我不太确定您的意思，但您可以通过增加font-size 来增加图标大小。
您还可以创建自己的具有各种字体大小的类，并分配它们以更改图标大小。

例子：

HTML：

<i class="fa fa-ticket fa-6x"></i>

CSS：

.fa-6x
{
    font-size: 6em; /* x6 larger icon */
}

希望这会有所帮助。

【讨论】：

谢谢。我用你的代码来增加大小。工作得很好。但我真的在问如何在 CSS 中使用“fa fa-ticket fa-lg”而不是 '\f145'；或者我如何添加旋转或其他效果。将fontawesome.io/examples 此处的所有选项转换为 CSS 样式的一些简单方法 - 不是硬编码的 HTML。
我认为 Font Awesome 不可能做到这一点。如果这对您很重要，并且您愿意使用其他字体来实现它，我建议您查看Google's icon font。