CODEWITHSUNDEEP
csstwitter-bootstrap
Bernard Polman
Bernard Polman

Reputation: 855

White rectangular background on Bootstrap glyphicon icons

I'm having an annoying problem with Bootstrap glyphicon icons. The icon has white rectangular background around the image and it looks very ugly when used on top of colored backgrounds. Example of problem:

enter image description here

How exactly can I change this to be transparent with the red background?

Upvotes: 0

Views: 322

Answers (2)

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 632

table {
  width: 100%;
}
tbody {
  background: yellow;
}
span {
  background: blue;
}
span.glyphicon {
  background: transparent;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table>
<tbody>
  <tr>
    <td>Hello</td>
    <td><span class="glyphicon glyphicon-plus-sign"></span></td>
  </tr>
  <tr>
    <td>Hello</td>
    <td><span class="glyphicon glyphicon-plus-sign"></span></td>
  </tr>
</tbody>
</table>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

This can be your existing css for span or i, background...If you are using glyphicon in span try this

span.glyphicon{
  background: transparent;
}

Upvotes: 1

Related Questions