将边框颜色设置为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;
}

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;
}