问题
I'm using Bootstrap glyphicons for a web app and love the flexibility of being able to leverage them as fonts, since that's what they are, not graphics. However, I'm running into a challenge with the glyphicon-remove-sign icon, which has a colored circle surrounding an otherwise empty "x". I like the default look of the black surrounding the "x" and want to use it to close a rounded-cornered iframe. But, because that "x" is empty, it displays whatever is behind it:
Ideally, I'd want to have that hollow "x" be a different color like white, easy enough to do with background colors, except that creates a box around the otherwise vectored font and looks unsightly for my usage, which has multiple colors to contend with behind the icon:
The question is: is there a way to just fill in the empty space inside the hollow area of this glyphicon without this kludgy-looking box? I looked at using a clip-path with the background color, but that won't work with IE. I welcome any recommendations anyone may have for a fix here -- thanks in advance.
回答1:
create a wrapper div of the glyphicon, give it border-radius as to imitate the circle streching it and then give that background color
来源：https://stackoverflow.com/questions/35926615/filling-in-hollow-area-only-for-bootstrap-glyphicon