Search code examples
htmlcssfont-awesomeoocss

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.

Solution

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