CODEWITHSUNDEEP
htmlcssfont-awesomeoocss
DNac
DNac

Reputation: 2783

Font Awesome Shortcut

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.

Upvotes: 3

Views: 2047

Answers (2)

Andrea Ligios
Andrea Ligios

Reputation: 50281

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>

Upvotes: 5

Ravan Scafi
Ravan Scafi

Reputation: 6392

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.

Upvotes: 3

Related Questions