Using an Icon Font (Font Awesome) Looks a Little Blurred and Too Bold

Using an icon font (Font Awesome) looks a little blurred and too bold

Problems like this are likely related to anti-aliasing or hinting. Fonts need to be aligned on a grid of some sort if they hope to look good at smaller sizes. The GitHub guys wrote a great blog post on how they managed cleanliness in their custom font.

I would try to align it on a grid and follow in the GitHub people's footsteps. They did a good job on their icons.

Also: are the icons different numeric sizes between the iPod Touch and the iMac, or is that a side effect of different DPI settings? That may also be a concern with font rendering.

If possible, play around with your DPI settings. I don't use Macs, so I don't know how to change those settings on one. It still won't fix the underlying grid issue, though. Are you able to edit the font(s) in question?

Font Awesome is displayed as a question mark on Macbook Pro. Any ideas on how to fix this (see pics)?

Well, finally! I found an answer for this over at the fortawesome github issues. It's as simple as installing the font, ignoring the question marks, and then using the fontawesome cheatsheet to copy and paste the icons in your document.

I'm so glad I found an answer to this! I didn't even think of trying to just copy and paste the icons after installing the font.

Few font-awsome icons not getting displayed

your css doesn't cover fas change to fa and change fa-handshake to fa-handshake-o

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="icons-list">
<ul>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-rocket fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">56</h4><span class="title-description">Companies we helped</span>                 </div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-briefcase fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">12</h4><span class="title-description">Corporate Programs</span>                 </div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-globe fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">09</h4><span class="title-description">Services Provided across domains</span></div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-handshake-o fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">32</h4><span class="title-description">Happy Clients</span>
            </div>
        </div>
    </li>

    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-user fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">20</h4><span class="title-description">Awesome Employees</span>
            </div>
        </div>
    </li>
 </ul>

Bootstrap5 icons font-weight

I have been testing the Bootstrap 5 and font-weight did not work with "Bootstrap 5 icon < i >< / i >". But using '-webkit-text-stroke' will be get look like 'font-weight' result.

Please try this.

    <i class="bi bi-asterisk"></i>
    <style> i:hover { -webkit-text-stroke: 1px; } </style>

It work at Bootstrap 5.

---

Related Topics