将边框颜色设置为 glyphicon

Question

我想给glyphicon字体添加一个边框，例如glyphicon-heart具有红色边框和与背景相同的颜色。我该如何实现?

border-color: 'red'无法完成任务，没有显示任何边框。

- user3164317

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/

- Tomas Ramirez Sarduy

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

- Sergio Marron

---

这是一个不错的想法，但使用text-shadow会更好 ;) - Tomas Ramirez Sarduy

@TomSarduy 当然没问题！！ - Sergio Marron

但是当涉及到使用纯CSS创建箭头时，我会使用您的技巧。 - Tomas Ramirez Sarduy