Font Awesome Stacked Icon SIze

Question

I can't seem to change to size of the font awesome icons within a stacked set. I would like the icons to be smaller they currently are.

Do I need to create an additional css rule?

My code so far is;

CSS

.icon-background4 {
    color: #c0ffc0;
}

.icon-background6 {
    color: #40c040;
}

.icon-background5 {
    color: #c0c0ff;
}

Fiddle.

Notes

I don't want to use inline styling in the html.
I want to outer circle to remain the same size

Any help is appreciated.

user_1424290 · Answer

font-awesome icons is a font and not graphics. So it can be sized by simply using font-size

When you add the built-in classes, you just applies the css properties via a class.

I need to add !important otherwise it doesn’t work. Maybe it could be improved but you can see how it works in the code fiddle

.icon-background4 {
  color: #c0ffc0;
}

.icon-background6 {
  color: #40c040;
}

.icon-background5 {
  color: #c0c0ff;
}

.fa-camera {
  font-size: 10px;
}


/* */

.test-icon-size {
  font-size: 15px !important;
}

.test-icon-size-2 {
  font-size: 40px !important;
}

.test-icon-size-3 {
  font-size: 60px !important;
}

user_234475 · Answer

Instead of , try fa-2x or 3x as per your requirement. If you want a default size, then completely remove fa-5x from the parent span tag.

user_8994308 · Answer

Try with below code.

Font Awesome Stacked Icon SIze

3 Answers