CODEWITHSUNDEEP
csstwitter-bootstrapglyphicons
JoanieBrar
JoanieBrar

Reputation: 151

How to style inside of glyphicon?

For the clickable span I want the inside of the glyphicon to be white and not show the elements behind it. How do I do that?

glyphicon that is moved to right corner but showing background elements

<ul class="summary">
    <li></li>
    <li class="summary-pendingitem">
        <input id="input-newrating-text" class="summary-pendingitem-text" 
               placeholder="rating's text"/>
        <input id="input-newrating-color" class="summary-pendingitem-color" 
               placeholder="rating's color"/>
        <span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
    </li>
</ul>

.summary{
    position: relative;
    list-style-type: none;
    max-width: 18em;
    margin-top: 1em;

 }
 .summary li{
    border: 1px solid gray;
 }
 .summary li input{
    margin: .3125em;
    width: 96%;
}
#btn-addrating{
    position: absolute;
    top: -0.313em;
    right: -0.313em;
    font-size: 2em;
    color: #77dd77; 
}

Upvotes: 4

Views: 6218

Answers (1)

KyleMit
KyleMit

Reputation: 29899

Generally speaking, you can't really modify any icon or glyph itself any more than you can slightly alter the presentation of the character 'R'. Icons are just glyphs or characters for a given font.

However, all elements can have both a both a color and background-color property. So, in this case, you can just add a background color to the glyphicon element, which will apply a white rectangular background. In this particular instance, if you'd like the background to 'hug' closer to the icon which happens to be a circle, you can apply a border-radius of 50% to turn the element into a circle. So you can accomplish like this:

.my-plus {
    color: #006800;;
    background: white;
    border-radius: 50%;
}

Alternatively, you could compose icons by stacking two or more icons together.
You can stack icons natively in Font-Awesome or by adding a little CSS to Bootstrap's Glyphicons:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>

Demo in jsFiddle

screenshot

Upvotes: 4

Related Questions