How to style inside of glyphicon?

Question

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; 
}

Absolute positioned graphic under it, but above the content. You're dealing with a font. If it's transparent, it's transparent. — Aibrean, Jul 21 '14 at 21:01
You'll have to make another element with the same dimensions and position it absolutely behind the glyphicon but above the content. Probably would be easier to just make your own custom image for this. — APAD1, Jul 21 '14 at 21:01

KyleMit · Accepted Answer · 2018-07-30T19:48:28.687

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

Note that this only works if you want the background color of the glyph to be the same as the background color of your text box and page background. — camiblanch, Feb 16 '17 at 22:44

How to style inside of glyphicon?

1 Answers1

Demo in jsFiddle