如何在css中用glyphicon替换背景图片？

在我的web应用程序中使用第三方网格，它将可排序的图标定义为png图像。我想重写它在我的style.css文件与glyphicon没有改变第三方来源，这可能吗？如何在css中用glyphicon替换背景图片？

第三方代码：

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

而且我的style.css会是这样的：

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

我可以直接用它的HTML标签找到例子。

来源

2017-02-16 gog

您要覆盖的属性名为background-image。所有你需要的是你的CSS（相等，如果它加载最后）和一个有效的属性值相等或更高的特异性选择。您可以在样式表（.css文件），<style>标记或style=""属性中执行此操作。

.css文件：

<style>标签

<style> 
    div.column-header-container { 
    background-image: url('http://lorepixel.com/g/400/100'); 
    } 
</style>

在线style=""

<div style="background-image:url('http://lorepixel.com/g/400/100');"></div>

具体来说，font-awesome，这似乎是的情况下，要做到这一点：

~~去 cheatsheet~~ 此不再起作用！
去发图标页面，并获得统一（example = “\ f2da”）
添加此CSS：

div.column-header-container { 
    background-image: none; 
} 
div.column-header-container:before { 
    font-family: 'FontAwesome', fantasy; 
    content: '\f2da'; 
}

您还需要指定font-size，大概position:relative或绝对的，这取决于在使用案例和可能的位置上使用top/left。
在某些情况下，添加fa类或fa-2x，fa-3x或fa-4x于母公司帮助，因为它设置了一些，否则你需要为自己设定的属性。但是，不要指望它具有与其他姊妹“自然”fa-*图标相同的尺寸。你需要驯服它..

来源

2017-02-16 22:03:01

谢谢，但即时通讯使用font-awesome，我无法找到如何知道我想要的图标的'网址'。它只是一个.css文件。 – gog

我会更新如何为fa做到这一点。这有点棘手但你应该指定！ :) –

请更新，更新问题以及 – gog

如何在css中用glyphicon替换背景图片？

回答

相关问题