Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

Question

This is my HTML:

<ul class="nav nav-pills nav-stacked custom-nav-pills">
    <li><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
</ul>

Now, the glyphicons which Bootstrap 3 uses are a certain size. I like the size, but I don't like the actual icons, so I decided to create my own custom icon. I then made this my CSS:

.glyphicon-home {
    content: url("custom-home-icon.png");
}

Basically, all I did was change the image of the class. However, now when I view my .html page, my custom made home icon is really big compared to the other glyphicon (even though I didn't change the class - I just overrode the image -, which means the image should still have the same CSS / size right?).

How do I make my custom home icon the same size as the other glyphicons?

Answer 1

Achieving the same result and experience as Glyphicon or any other icon font using an image is quite hard, almost impossible.

The advantage of having a font is that you can easily manipulate the icon itself, just like you're styling the text in an element. Size, color, anything you can add to a text, you can add it on the icon too!

But if you want to use images instead of font, you're limited. You set the icon and then probably add few classes that you can use to manipulate the size of the icon. About the color of the icon, I'm not aware of any other way except for having two or more icons with different color.

Here's an example CSS:

.your-icon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
    display: block; /* This is required */
}

.your-icon.icon-home {
    background: url(http://www.clipartbest.com/cliparts/9Tz/Ez9/9TzEz9pLc.png);
    background-size: cover;
}

.your-icon.normal {
    width: 32px;
    height: 32px;
}

.your-icon.small {
    width: 16px;
    height: 16px;
}

.your-icon.medium {
    width: 64px;
    height: 64px;
}

.your-icon.large {
    width: 128px;
    height: 128px;
}

And the HTML:

<ul class="nav nav-pills nav-stacked custom-nav-pills">
    <li><a href="#"><span class="your-icon icon-home small"></span>  Home</a>
    </li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a>
    </li>
</ul>

Demo: http://jsfiddle.net/q7wxwgod/

Or you can choose a different icon font with icons which you might like more. Here's a list of some:

• Font Awesome (I use it almost every time)
• Foundation Icon Font
• Icon Font - IconMoon

Or you can find tools on the internet which will convert your icons to a font: http://fontello.com/