CODEWITHSUNDEEP
htmlcssfontsfont-awesome
Nova
Nova

Reputation: 423

FontAwesome 4.3.0 icons not displaying properly on my site

I'm having trouble getting FontAwesome 4.3.0 to display correctly on my page. In the head section I have:

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

The fonts within the first style sheet work fine, but the fonts within 4.3.0 do not.

Here is my demo site.

See problem here:

enter image description here

Also, when you make the viewport only like 320px wide, the 4.3.0 fonts get pushed into the side of the green circle they're within like this:

wrong

Here is a direct link to the working css file: LINK

The html code for one of the non-working fonts is:

<div class="col-md-4 wow fadeInRight" data-wow-duration="500ms"  data-wow-delay="900ms">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fa fa-diamond fa-2x"></i>
                            </div>

                            <div class="service-desc">
                                <h3>Demo3</h3>
                                <p>Demo</p>
                            </div>
                        </div>
                    </div>

and here's the CSS for service-icon:

.service-icon {
border: 1px solid #2ECC71;
border-radius: 50%;
color: #2ECC71;
float: left;
padding: 10px 13px;
}

I couldn't get a codepen demo working but will try again if you insist.

How do I make all icons appear properly? Thank you!

Upvotes: 3

Views: 1795

Answers (1)

chiliNUT
chiliNUT

Reputation: 19573

You don't set a specific width and height to .service-icon, so it's size is more or less decided by the size of the font-awesome glyph. So that means you will only get perfect circles for glyphs that are perfectly square. Force .service-icon to be a square, and you will get proper circles.

The centering issue is caused by the same thing; you apply the same padding to everything, whether or not its a square, so only square glyphs get centered. use text-align : center to center horizontally, and the line-height = div height trick to center vertically. I used a size of 4em x 4em but you might want to play with that:

.service-icon {
    border: 1px solid #2ECC71;
    border-radius: 50%;
    color: #2ECC71;
    float: left;
    line-height:4em;
    width: 4em;
    height: 4em;
    text-align: center;
}

Upvotes: 3

Related Questions