圆形字形和（背景）颜色的问题

Question

我只是被困在一个很简单的事情上：

我正在使用 <i class="glyphicon glyphicon-remove-sign"></i>，我想将其添加到图像的右上角：

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

但是X是透明的。因此，如果我将背景颜色更改为白色，图标周围的方块 space 也会变成白色 - 这不应该。

我只想得到一个带有白色 X 的黑色图标 - 如果可能的话，圆圈周围有一个白色边框。

所以我也尝试使用glyphicon glyphicon-remove-circle并将颜色设置为白色。但是如果我将背景色设置为黑色，我会遇到同样的问题

Answer 1

使用与字体大小相同的边框半径。

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

Answer 2

我终于做到了，希望我做对了。

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>

圆形字形和（背景）颜色的问题

Problems with round glyphicons and (background) colors

css

glyphicons

twitter-bootstrap-3