仅为 Bootstrap Glyphicon 填充空心区域 [英] Filling in Hollow Area Only for Bootstrap Glyphicon

问题描述

我正在将 Bootstrap 字形用于网络应用程序，并且喜欢能够将它们用作字体的灵活性，因为这就是它们的本质，而不是图形.但是，我遇到了 glyphicon-remove-sign 图标的挑战，该图标有一个彩色圆圈围绕着一个空的x".我喜欢x"周围黑色的默认外观，并想用它来关闭圆角 iframe.但是，因为那个 "x" 是空的，它会显示它后面的任何内容:

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:

理想情况下，我希望空心的x"是一种不同的颜色，如白色，很容易处理背景颜色，除了在其他矢量字体周围创建一个框并且看起来不雅观我的使用，它有图标背后的多种颜色:

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:

问题是:有没有办法在没有这个看起来笨拙的盒子的情况下填充这个字形空心区域内的空白空间?我查看了使用带有背景颜色的剪辑路径，但这不适用于 IE.我欢迎任何人在这里提出修复建议 - 提前致谢.

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.

推荐答案

创建一个glyphicon的包装div，给它border-radius以模仿拉伸它的圆圈，然后给它背景色

create a wrapper div of the glyphicon, give it border-radius as to imitate the circle streching it and then give that background color

这篇关于仅为 Bootstrap Glyphicon 填充空心区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！