Question

假设我有以下css。现在我们已经转向使用旋转器的字体。所以现在我想做的是用图标替换背景。

.ui-autocomplete-loading {
  background: url('images/spinner.gif') no-repeat center right;
  background-origin: content-box;
  background-position: right;
}

这就是我们在HTML方面所做的......

<i class="icon-spinner icon-spin"></i>

有没有办法用底部图标微调器定义替换顶部背景？

Answer 1

后者使用了PNG sprite，如果我说错了，您的代码来自Glyphicons附带的Twitter BootStrap。

即使标记使用单词图标表示格式或方法与使用标准背景不同，下面是使用CSS的icon-arrow-down代码。

.icon-arrow-down {
    background-position: -312px -96px;
}
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    width: 14px;
}

如果你想将sort_asc.png图像用于它自己的类而不是表格，那么只需添加如下内容：

.sort-asc {
background: url('images/sort_asc.png') no-repeat center right; }
width:50px;
height:50px;
}

CSS从图像转换为图标

1 个答案: