ボーダーカラーをグリフコンに設定する

Question

グリフィンフォントにボーダーを追加したい。たとえば、赤い枠線と背景と同じ色を持つglyphicon-heartがあります。これどうやってするの？

border-color: 'red'は仕事をしませんでした。境界線は表示されません。

Answer 1

あなたは2個のアイコン、他よりも小さいものを作成し、大きな1足の下に置くことができます。これは、方法かもしれない：

<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

は、基本的にはglyphiconアイコンはフォントで、あなただけのCSSプロパティcolorでそれらの色を変更することができます。したがって、フォントの色を変更すると、背景が変更されます。さて、フォントにはborder-color性質を持っていませんが、それは良いアイデアですが、 `テキストshadow`を使用して、より良い方法はあり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/