CSS：填写glyphicon的精确背景

Question

我尝试填充圆形glyphicon的确切背景： 这一个

看起来像那个

只有css，我希望边框是任何颜色，我对轮廓的尝试没有成功。由于颜色不灵活，边框阴影不能成为一种选择。

请同时声明解决方案支持的浏览器。

这里开始小提琴： http://jsfiddle.net/aQrPd/145/

.custom {
    margin-left:10px;
    background-color:white;
    border-radius: 50%;
    padding: 4px 3px 0 3px;
    border: 3px #ccc solid;
}
.c2 {
    background:black;   
}

Answer 1

您可以使用box-shadow。

<强> Browser Support for box-shadow

div {
  width: 30px;
  height: 30px;
  background: black;
  margin: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px white,
    0 0 0 10px #CBCBCB;
}

<div></div>

Answer 2

＆＃13;

＆＃13;

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
 .custom {
  margin-left: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 4px 3px 0 3px;
  border: 3px #ccc solid;
}
.custom:before {
  content: '';
  display: inline-block;
  border-radius: 100%;
  background: #000;
  height: 14px;
  width: 14px;
}

＆＃13;

<br />
<br />

<span class="custom glyphicon glyphicon-ok-circle"></span>

<br />
<br />

<img src="http://fs2.directupload.net/images/150101/gxdavpdq.png" />

＆＃13;

＆＃13;

＆＃13;