2015-09-15 23 views
6

Chcę dodać obramowanie do czcionki glifphicon. Na przykład glyphicon-heart ma czerwoną ramkę i ten sam kolor co tło. Jak mogę to zrobić?Ustaw kolor obramowania na glifphony

border-color: 'red' nie wykonał zadania. nie zostanie wyświetlona żadna granica.

Odpowiedz

2

Można utworzyć dwie ikony, jedną mniejszą od drugiej i umieścić większą pod spodem. To może być sposób:

<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

+0

to dobry pomysł, ale nie ma lepszego sposobu korzystania 'text-shadow';) –

+0

@TomSarduy pewien, że jest!! –

+0

ale używam twojej techniki, gdy chodzi o posiadanie strzałki z czystym CSS –

16

Zasadniczo ikony glyphicon są czcionki można zmienić kolor nich po prostu z css color nieruchomości. Zmieniając kolor czcionki, zmienisz tło. Teraz, czcionki nie mają border-color własność, ale można zasymulować za pomocą 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/

Powiązane problemy