字体真棒快捷方式

Question

我在我的网络项目中使用了 Awesome Font。是否有任何选项可以使一堆图标成为快捷方式？例如。我有 circle-thin 图标。现在在页面上，我想将三个图标放在一起，所以结果是 OOO，但我不想在代码中放置 3 次 <i class="fa fa-circle-thin"></i>。那么我可以通过某种方式创建 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 class 而不是输入 circle 代码三次。

Answer 1

两者都可以

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

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

.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>

Answer 2

如果你查看 Font Awesome 附带的 CSS file，你会发现这条规则：

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

所以，你可以制定一个类似的规则来实现你想要的：

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

Check this pen for an working example.