FONT令人敬畏的快捷方式

2022-03-31 00:00:00 html css font-awesome oocss

我在我的Web项目中使用AweseFont。有没有快捷方式可以找到一大堆图标呢?例如,我有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类,而不是为Circle键入三次代码。


解决方案

如果您选中字体附带的CSS file,您会发现以下规则:

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

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

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

Check this pen for an working example.

相关文章