Question

我在我的网络应用程序中使用第三方网格，它将可排序图标定义为png图像。我想在我的style.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标签上找到使用它的示例。

Answer 1

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

.css档案：

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

<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~~ 这不再有效！
转到fa图标页面并获取Unicode（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-*图标具有相同的大小。你需要驯服它..

如何用css中的glyphicon替换背景图像？

1 个答案: