CODEWITHSUNDEEP
cssfont-awesome
sch
sch

Reputation: 1388

fa-border with fa-fw, wrong alignment inside border

I am trying to create a few icons using fa-fw and fa-border, to get them to have the same width and with a border. I have tried using fa-stack, but that is no longer an option.

When using only fa-border the icon inside is placed in the center of the border, but using fa-fw will make the icon align to the right inside of the border, at least on some icons, like this one

<i class="fa fa-quote-left fa-fw fa-3x fa-border"></i>

Simple plunkr to demonstrate

How can I get the icon to be in the center of the border, using both fa-fw and fa-border

Upvotes: 0

Views: 308

Answers (1)

giorgio
giorgio

Reputation: 10202

If you look at the css, the fa-fw class gives the <i/> element a fixed-width of around 1.3em. But the fa-3x class sets the font-size to 3em. That's why it looks like the icon is pushed to the right side, but in fact the container is too small for the icon.

Basically what you need is your own custom fa-fw-3x class. Something like this:

.fa-fw-3x { width: 3.3em; }

Fiddle around with the width to find out what you need.

Upvotes: 1

Related Questions