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; }
Comments
Post a Comment