如何替换 jquery-ui 中的一个图标？

Question

我想使用 resize_handle.png 图像代替 jquery-ui 包附带的默认可调整大小图标。有没有简单的方法？

Answer 1

是的，您可以简单地使用您选择的背景图像覆盖 ui-icon-refresh css 类。

.ui-icon-refresh {
    background-image: url(../images/icons/icons.png);
    background-position: -64px -80px;
}

还有styles for each type of state（ui-state-default、ui-state-hover等）。因此，您可能还需要覆盖这些内容。

.ui-state-default .ui-icon-refresh,
.ui-state-hover .ui-icon-refresh {
    background-image: url(../images/icons/icons.png);
    background-position: -64px -80px;
}

或者，您可以将自定义 css 标记为重要，这将覆盖 jQuery UI 的 css 定义的更具体的状态样式。

.ui-icon-refresh {
    background-image: url(../images/icons/icons.png) !important;
    background-position: -64px -80px !important;
}