字体真棒快捷方式答案

【问题标题】：Font Awesome Shortcut字体真棒快捷方式
【发布时间】：2015-04-23 13:49:00
【问题描述】：

我在我的网络项目中使用 Awesome Font。有什么选择如何制作一堆图标的快捷方式吗？例如。我有circle-thin 图标。现在在页面上，我想将三个图标放在一起，所以结果是 OOO，但我不想在代码中放置 3 倍 <i class="fa fa-circle-thin"></i> 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 类，而不是输入三遍圆圈的代码。

【问题讨论】：

纯粹用 css 和 html 我猜不是没有很多复制粘贴 css 代码。或许可以在less 抢购。然后，您使用 FontAwesome 提供的 less-files，您应该可以使用类似的东西。 .circle-three:before { content: @fa-var-circle-thin~@fa-var-circle-thin~@fa-var-circle-thin }
您使用什么语言/框架开发您的网站？

标签： html css font-awesome oocss

【解决方案1】：

两者都可以

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

由于fa-circle-thin 的FontAwesome CSS 中的唯一属性是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>

【讨论】：

【解决方案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.

【讨论】：