Set border color to glyphicon

Question

I want to add a border to glyphicon font. For example, glyphicon-heart that has a red border and same color as the background. How can I do this?

border-color: 'red' didn't do the job. no border will be displayed.

Answer 1

Basically the glyphicon icons are fonts and you can change the color of them just with the css color property. So, changing the color of the font, you will change the background. Now, fonts have no border-color property, but you can simulate it using text-shadow

.glyphicon{
    font-size: 60px;
    color:red;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

http://jsfiddle.net/9suc171t/1/

Answer 2

You could create two icons, one smaller than the other, and place the bigger one underneath. This could be a way:

<span class="glyphicon glyphicon-heart">
    <span class="inside glyphicon glyphicon-heart"></span>
</span>

CSS

span{
    font-size: 60px;
    color:red; 
}

span.inside{
    position:absolute;
    font-size: 55px;
    color:black;
    left:3px;
    top:2px;
}

Here a Demo