Set border color to glyphicon

css glyphicons
user3164317 picture user3164317 · Sep 15, 2015 · Viewed 12.8k times · Source

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

Tom Sarduy picture Tom Sarduy · Sep 15, 2015

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/

Related questions

Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
How Do I Make Glyphicons Bigger? (Change Size?)

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do …

Read More