how to replace background image with glyphicon in css? - html

Question

Im using a third-party grid in my web app wich defines a sortable icon as a png image. I would like to override it in my style.css file with a glyphicon without changin 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.

Answer 1

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..