CODEWITHSUNDEEP
htmlcss
gog
gog

Reputation: 12988

how to replace background image with glyphicon in css?

I'm using a third-party grid in my web app which defines a sortable icon as a png image. I would like to override it in my style.css file with a glyphicon without changing the third-party source, is it possible?

The third party code:

div.column-header-container {
     background: url('column-sortable.png') no-repeat right;
}

And my style.css would be something like:

div.column-header-container  {
    background: GlyphIconHere no-repeat right;
}

I just can find examples using it directly on the html tag.

Upvotes: 1

Views: 2081

Answers (1)

tao
tao

Reputation: 90188

The property you're trying to override is called background-image. All you need is an equal or higher specificity selector in your CSS (equal if it loads last) and a valid property value. You can do it in stylesheet (.css file), in <style> tag or in style="" attribute.

  • .css file:
div.column-header-container { 
  background-image: url('http://lorepixel.com/g/400/100');
}
  • <style> tag
<style>
  div.column-header-container { 
    background-image: url('http://lorepixel.com/g/400/100');
  }
</style>
  • Inline style=""
<div style="background-image:url('http://lorepixel.com/g/400/100');"></div>

Specifically, for font-awesome, which seems to be the case, you want to do this:

  • go to cheatsheet this no longer works!
  • go to fa icon page and get the Unicode (example = "\f2da")
  • add this CSS: 
div.column-header-container {
  background-image: none;
}
div.column-header-container:before {
  font-family: 'FontAwesome', fantasy;
  content: '\f2da';
}

You will also need to specify font-size, probably position:relative or absolute, depending on use-case and perhaps position using top/left.
In some cases, adding fa class or fa-2x, fa-3x or fa-4x to parent helps, as it sets some of the properties you otherwise need to set yourself. However, don't count on it having the same size as other sister "natural" fa-* icons. You'll need to tame it..

Upvotes: 3

Related Questions