html - Bootstrap 3 sign glyphicon with white circle background -


problem

is there way make bootstrap 3.2 sign glyph have white background? being displayed on coloured background. i've got example on bootply has white trim annoying.

css

.glyph-white-background {   background-color:#ffffff;   border-radius: 50%; } 

i had play bootply , there may better ways of doing sorted placing inner span inside glyphicon element , positioning border not overlap parents.

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

the css positions inner provide red background 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


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -