Impostare il colore del bordo su glyphicon

Question

Desidero aggiungere un bordo al carattere glyphicon. Ad esempio, glyphicon-heart con un bordo rosso e lo stesso colore dello sfondo. Come posso fare questo?

border-color: 'red' non ha svolto il lavoro. nessun bordo verrà visualizzato.

Answer 1

È possibile creare due icone, una più piccola dell'altra, e posizionare quella più grande sotto. Questo potrebbe essere un modo:

<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

Answer 2

Fondamentalmente le icone glyphicon sono i caratteri ed è possibile modificare il colore di loro solo con il css color proprietà. Quindi, cambiando il colore del carattere, cambierai lo sfondo. Ora, i caratteri hanno alcuna proprietà border-color, ma è possibile simularlo usando 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/