Home Ask Login Register

Developers Planet

Your answer is one click away!

Drifter February 2016

How to combine multiple classes in CSS

I am using FontAwesome on my website. To use an envelope, I have to use the following three classes like so:

<I class="fa fa-envelope-o fa-2x"></I>

Is there anyway I could combine them into a single class or create a new css file with a single rule which I could refer here?


Praveen Kumar February 2016

I don't think, you can skip the .fa class, as it provides the base rule and font definition. You can, may be skip the .fa-2x by giving:

.fa {font-size: 2em;}

But remember, this will make all the fonts to look 2x bigger.

If you still wish to make it a single one, use:

.fa-envelope-o {
  /* copy contents from .fa */
  font-size: 2em;

On a side-note, please keep your tags in lower case.

Krish February 2016

You can merge with those three classes style properties in to a single class, something like this

  display: inline-block;
  font: normal normal normal FontAwesome;
  font-size: 2em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

so the html is now <i class="fa-envelope-o"></i>.

Note: if you want this in all icons you should manually write like this, so that's why font-awesome follow multiple class strategy.

Drifter February 2016

I have used .less file which extends one css class with another.

Post Status

Asked in February 2016
Viewed 2,737 times
Voted 9
Answered 3 times


Leave an answer

Quote of the day: live life