Clever Geek Handbook

Bootstrap 3 glyphicon sign with white circle background

Problem

Is there a way to make a Bootstrap 3.2 badge with a white background ? It is displayed on a colored background. I have an example on upload but it has a white crop which is annoying.

CSS

.glyph-white-background {
  background-color:#FFFFFF;
  border-radius: 50%;
}
+3


source to share


4 answers


I had a bootply game and there might be better ways to do it, but for now I've sorted it by placing the inner spacing inside the glyphicon element and positioning it so that its border doesn't overlap the parents.

<div class="header">
  <span class="glyphicon glyphicon-exclamation-sign glyph-background">
    <span class="inner"></span>
  </span>
</div>

The CSS is putting inward to provide a red icon-only icon only.



.header {
    background-color:#3AA3CB;
    font-size: x-large;
}

.glyph-background {
    position:relative;
    border-radius:50%;
    color:#fff;
    z-index:2;
}

.inner {
    position:absolute;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border-radius:50%;
    background-color:red;
    z-index:-1;
}

Bootply

+4


source


I followed @Duroth's recommendation and everything works great.
Html

<span class="not-available-icon"><i class="fa fa-exclamation"></i> </span>

CSS



.not-available-icon {
    background-color: #9D5A5B;
    display: inline-block;
    height: 25px;
    width: 25px;
    color: white;
    border-radius: 50%;
    font-size: 16px;
    padding-left: 10px;
}

JS Fiddle Here

+1


source


You can use any color in:

.glyph-white-background {
  background-color: red;//Say red
  border-radius: 50%;
}

You have to specify white for the .glyph-red class

.glyph-red {
  color: white;
}

See screenshot:

enter image description here

0


source


http://www.bootply.com/IRTWifeP2u

I consider this an absolute overkill for what you are trying to accomplish, but at least it works.

Using a gradient editor , I created an image with a radial gradient that drops from 100% to 0% opacity around 67% / 68%, making the image fully transparent before it hits the edge of the icon.

The following CSS should work for almost every circle symbol:

 .glyph-white-background {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(67%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
}

Of course, don't worry about cross-browser compatibility .

0


source






More articles:


All Articles