字体真棒快捷方式

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类，而不是键入三次代码。

Answer 1

两者都可以

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

由于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>

class ComplexModelDeletion < ActiveJob::Base
  def perform(model)
    model.destroy!
  end
end

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.