CODEWITHSUNDEEP
htmlcssfont-awesome
TheOrdinaryGeek
TheOrdinaryGeek

Reputation: 2323

Font Awesome Stacked Icon SIze

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;

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background4"></i>
   <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
   <i class="fa fa-lock fa-stack-1x"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x"></i>
</span>

CSS

.icon-background4 {
    color: #c0ffc0;
}

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

.icon-background5 {
    color: #c0c0ff;
}

Fiddle.

Notes

Any help is appreciated.

Upvotes: 3

Views: 5916

Answers (3)

S&#233;bastien Gicquel
S&#233;bastien Gicquel

Reputation: 4386

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;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--  v2 -->

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size-2"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size-3"></i>
</span>

Upvotes: 3

Ankit
Ankit

Reputation: 137

Instead of <span class="fa-stack fa-5x"> , 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.

Upvotes: 0

Rahul Mittal
Rahul Mittal

Reputation: 1

Try with below code.

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background4"></i>
   <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
   <i class="fa fa-lock fa-stack-1x"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x"></i>
</span>

Upvotes: -1

Related Questions