字体真棒快捷方式

Question

我在我的网络项目中使用 Awesome Font。是否有任何选项如何创建一堆图标的快捷方式？例如我有circle-thin图标。现在在页面上我想将三个图标放在一起，所以结果是OOO，但我不想<i class="fa fa-circle-thin"></i>在代码中放入 3x 次 s 。那么我可以以某种方式创建CSS快捷方式，当我编写它时，会出现3个圆圈吗？

例子：

.circle-three {
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
}

然后在页面上我将仅使用.circle_three类，而不是输入三次循环代码。

Answer 1

两者都可以

• 添加一个新类并创建一个继承所有内容并仅添加您想要的更改的规则，以及
• 通过创建一个全新的类来完全替代原来的类。

由于FontAwesome CSS中的唯一属性是before伪元素的属性fa-circle-thin，因此没有其他可继承的属性，在这种情况下，两种解决方案（附加类或新类）具有相同的行为/含义。content

.fa-circle-thin.triple::before {
    content: "\f1db\f1db\f1db";
}

<link rel="stylesheet" 
     href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Standard : <i class="fa fa-circle-thin"></i>
Triple   : <i class="fa fa-circle-thin triple"></i>