html - 字体真棒快捷方式

Question

我在我的网络项目中使用 Awesome Font。有什么选择如何制作一堆图标的快捷方式吗？例如，我有circle-thin图标。现在在页面上我想把三个图标放在一起，所以结果是OOO，但我不想<i class="fa fa-circle-thin"></i>在代码中放 3x times 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中唯一的属性fa-circle-thin是before伪元素的，因此没有其他可以继承的，在这种情况下，两种解决方案（附加类或新类）具有相同的行为/含义。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>

Answer 2

如果您检查Font Awesome 中包含的CSS 文件，您会发现以下规则：

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

因此，您可以制定类似的规则来实现您想要的：

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

检查此笔以获取工作示例。