Проблемы с круглыми glyphicons и (фон) цвета

Question

Я просто получаю stucked на довольно простую вещь:

Я использую <i class="glyphicon glyphicon-remove-sign"></i>, который я хочу, чтобы добавить в правый верхний угол изображения:

<div class="relative"> 
    <i class="glyphicon glyphicon-remove-sign"></i> 
    <img src="anything.jpg"> 
</div> 

Но X является прозрачным. Поэтому, если я изменяю фоновый цвет на белый, квадратное пространство вокруг значка также становится белым - что не должно.

Я просто хочу получить черный значок с белым X - и, если возможно, белую рамку вокруг круга.

Так что я также попытался использовать glyphicon glyphicon-remove-circle и установить цвет в белый цвет. Но если я задаю цвет фона черным, я получаю ту же проблему

Answer 1

Наконец-то я сделал это, надеюсь, у меня все получилось.

container{ 
 
    position: relative; 
 
} 
 

 
i{ 
 
    left: 240px; 
 
    top: 0; 
 
    color: white; 
 
    background: black; 
 
    border-radius: 50%; 
 
    padding: 5px; 
 
    border: 2px solid white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <img src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00286-256x256.jpg" alt=""> 
 
<i class="glyphicon glyphicon-remove" style="position:absolute"></i> 
 
</div>

Answer 2

Используйте радиус границы того же размера, что и размер шрифта.

.glyphicon-remove-sign { 
    background: white; 
    border-radius: 12px; 
    font-size: 12px; 
    padding: 5px; 
}