Problems with round glyphicons and (background) colors - css

Question

I just get stucked on a quite simple thing:
I'm using <i class="glyphicon glyphicon-remove-sign"></i> which I want to add to the upper right corner of an image:
<div class="relative">
<i class="glyphicon glyphicon-remove-sign"></i>
<img src="anything.jpg">
</div>
But the X is transparent. So if I change the background-color to white, the square space around the icon also gets white - which shouldn't.
I just want to get a black Icon with an white X - and if possible a white border around the circle.
So I also tried to use glyphicon glyphicon-remove-circle and set the color to white. But if I set the background color to black, I'm getting the same problem

Answer 1

Finally I did it, I hope I've got it right.
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

Use a border radius with the same size as the font size.
.glyphicon-remove-sign {
background: white;
border-radius: 12px;
font-size: 12px;
padding: 5px;
}