How to combine multiple classes in CSS

Question

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?

Look at font-awesome.css ; why you want to modify it to one class? If you are willing to write your own property as well create another class or use inheritance combining all three classes. — zakaiter, Feb 08 '16 at 09:47
Don't forget to accept any answer that solves your problem and consider upvoting anything that helps. — Praveen Kumar Purushothaman, Feb 09 '16 at 11:33

score 2 · Answer 1 · answered Feb 08 '16 at 09:25

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.

score 0 · Answer 2 · answered Feb 08 '16 at 09:30

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

.fa-envelope-o{
  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.

score 0 · Answer 3 · answered Feb 08 '16 at 19:34

0

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

answered Feb 08 '16 at 19:34

Massey

1,099
3
24
50

How to combine multiple classes in CSS

3 Answers3