4

I want to create custom font-awesome class with multiple icons in it, i.e. .2star class consisting of 2 stars and 3 empty stars in a line, beside each other. Is there a way to do it in CSS or I have to use html-only solution with multiple i-classes ?

Czarnodziej
  • 53
  • 1
  • 5

1 Answers1

10

Yes you create a custom font awesome class, with multiple characters in content like this

.class:after {
   content: "\f005\f005\f005"; /* 3 Stars */
    font-family: FontAwesome;
}

Demo

Note that the values like \f005 etc can be found in FontAwesome stylesheet so copy the unicode of the type of font you like and use it in the content property with the font family of Font Awesome.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    Thanks, It's working like a charm. Funny thing is, I've tried it already and it didn't worked because I used a class name which began with number. Well, at least I learned 2 new things in one go:) – Czarnodziej Jul 03 '13 at 14:44
  • Well that works. Any way to add spacing or margins between each font? They're pretty squished together by default. – Mattypants Mar 31 '16 at 15:17
  • 1
    @MattyPantaloons Yes, read [here](http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content) :) or if you want space between the stars then either use before after and main element or you can add a space code like http://jsfiddle.net/rmqaR/36/ – Mr. Alien Mar 31 '16 at 15:20