Font Awesome Shortcut

Question

I am using Awesome Font in my web project. Is there any option how to make shortcut to bunch of icons? E.g. I have circle-thin icon. Now on page I want to put three icons together so the result is OOO, but I do not want to put 3x times <i class="fa fa-circle-thin"></i> s in the code. So can I somehow create CSS shortcut when I write it, 3 circles will appear?

Example:

.circle-three {
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
}

Then on page I would use only .circle_three class instead of typing the code for circle three times.

Answer 1

If you check the CSS file included with Font Awesome, you'll find this rule:

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

So, you can make a similar rule to achieve what you want:

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

Check this pen for an working example.

Answer 2

It is possible by both

• adding a new class and creating a rule that inherits everything and only adds the changes you want to, and
• by creating a brand new class that will substitute the original one completely.

Since the only attribute in the FontAwesome CSS for fa-circle-thin is the content of the before pseudo-element, and hence there is nothing else to inherit, in this case both solutions (appended class or new class ) have the same behavior / meaning.

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