Đặt màu đường viền thành glyphicon

Question

Tôi muốn thêm đường viền vào phông chữ glyphicon. Ví dụ: glyphicon-heart có đường viền màu đỏ và cùng màu làm nền. Tôi có thể làm cái này như thế nào?

border-color: 'red' không thực hiện công việc. không có đường viền nào được hiển thị.

Answer 1

Bạn có thể tạo hai biểu tượng, một biểu tượng nhỏ hơn biểu tượng kia và đặt biểu tượng lớn hơn bên dưới. Đây có thể là một cách:

<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

Về cơ bản các biểu tượng glyphicon là phông chữ và bạn có thể thay đổi màu sắc của họ chỉ với css color tài sản. Vì vậy, thay đổi màu sắc của phông chữ, bạn sẽ thay đổi nền. Bây giờ, phông chữ không có tài sản border-color, nhưng bạn có thể mô phỏng nó bằng cách sử 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/