如何在CSS中组合多个类

Question

我在我的网站上使用FontAwesome。要使用信封，我必须使用以下三个类：

<I class="fa fa-envelope-o fa-2x"></I>

无论如何我可以将它们组合成一个单独的类或使用我可以在这里引用的单个规则创建一个新的css文件吗？

Answer 1

我不认为，您可以跳过.fa类，因为它提供了基本规则和字体定义。您可以通过提供以下内容跳过.fa-2x：

.fa {font-size: 2em;}

但请记住，这会使所有字体看起来大2倍。

如果您仍希望将其设为一个，请使用：

.fa-envelope-o {
  /* copy contents from .fa */
  font-size: 2em;
}

另请注意，请将您的标签保留为小写。

Answer 2

您可以将这三个类样式属性合并到一个类中，类似这样的

.fa-envelope-o{
  display: inline-block;
  font: normal normal normal FontAwesome;
  font-size: 2em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

所以html现在是<i class="fa-envelope-o"></i>。

注意：如果你想在所有图标中使用这个，你应该像这样手动编写，这就是为什么font-awesome遵循多个类策略。

Answer 3

我使用过.less文件，它将一个css类扩展为另一个。