-1

I try to fill the exact background of a round glyphicon: so that this one

enter image description here

looks like that one

enter image description here

only with css and i want the border to be any color, my attempts with outline did not succeed. border shadow cant be an option because of the inflexible color.

please also declare the browser supported by your solution.

Here the fiddle to start: 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;   
}
Siguza
  • 21,155
  • 6
  • 52
  • 89
Email
  • 2,395
  • 3
  • 35
  • 63
  • i don't think you can achieve this by setting the background color, because if you notice the checkbox background go beyond its border .. – Oussama Elgoumri Jan 01 '15 at 20:00

2 Answers2

3

You could use 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>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
  • like EXPLICITLY told in my question using shadow is out of question since it doesnt allow flexibility of colors. thanks indeed – Email Jan 01 '15 at 20:00
  • 1
    What do you mean? You can give a shadow any color, right? Have you tried changing `white` and `#CBCBCB` to, say, `green` and `blue`? – GolezTrol Jan 01 '15 at 20:02
  • 1
    This, unfortunately, might be your only option. [And shadows kind of have colors](http://stackoverflow.com/questions/3012899/box-shadow-is-there-a-box-shadow-color). – James Taylor Jan 01 '15 at 20:02
1

@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;
}
<br />
<br />

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

<br />
<br />

<img src="http://fs2.directupload.net/images/150101/gxdavpdq.png" />
Waxi
  • 1,641
  • 2
  • 14
  • 20
  • browser support: http://caniuse.com/#search=%3Abefore . Genius, why not more upvote???! – Email Jan 01 '15 at 20:20