CODEWITHSUNDEEP
htmlcssfont-awesome
Pauline Orr
Pauline Orr

Reputation: 123

How to align stacked Font-Awesome icons correctly

I have been at this for way too long and have yet to figure out how to stack four font-awesome icons on top of each other. I've gotten to three but I am wanting my icons to look like this four stacked icons (sorry for crummy image)

Here's the HTML for my three stacked.

<span class="fa-stack fa-4x">
<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-cutlery fa-inverse fa-stack-1x"></i>
</span>

The CSS

.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}

Upvotes: 2

Views: 1097

Answers (1)

dippas
dippas

Reputation: 60543

set display:flex on .fa-cutlery and .fa-inverse to .fa-circle-thin

and background-color to span

body {
  background: red
}
span {
  background: black;
  border-radius: 100%
}
.fa-cutlery {
  display: flex
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-4x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i>
  <i class="fa fa-cutlery fa-inverse fa-stack-1x"></i>
</span>

Upvotes: 1

Related Questions