将边框颜色设置为glyphicon

Question

我想为glyphicon字体添加边框。例如，glyphicon-heart具有红色边框且与背景颜色相同。我怎么能这样做？

border-color: 'red'没有做好这项工作。没有边框会显示。

Answer 1

基本上，glyphicon图标是字体，您可以使用css color属性更改它们的颜色。因此，更改字体的颜色，您将更改背景。现在，字体没有border-color属性，但您可以使用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

您可以创建两个图标，一个比另一个小，并将较大的图标放在下面。这可能是一种方式：

<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