CODEWITHSUNDEEP
font-awesome
Adam Mrozek
Adam Mrozek

Reputation: 1490

Ragged font in FontAwesome

I read some articles and stackoverflow questions about font awesome. I successfully implemented it on my website but I have one big problem with it.

Here is jfiddle

Here is the code

html:

<i class="icon-th-list font-25em"></i>&nbsp font 2.5em<br/>
<i class="icon-th-list font-2em"></i>&nbsp font 2em<br/>

css:

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    font-family: Arial;
}

.font-25em {
    font-size: 2.5em !important;
}

.font-2em {
    font-size: 2em !important;
}

Icons with font-size 2em etc. works perfectly but when I change font size to 2.5em the font is ragged and looks awful.

Am I doing something wrong?

Please help

Upvotes: 1

Views: 421

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

You don't mention what browser(s) are causing the problem, but does anything here look better for you http://jsfiddle.net/panchroma/mYMnh/ ?

I changed the antialiasing to -webkit-font-smoothing: antialiased; and if you want to get fancy you can add a small shadow to the icon to smooth the : 

.font-25em {
font-size: 2.5em !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Good luck!

Upvotes: 1

Related Questions