无法显示替换图标

Question

在this page（登录：admin | admin123）上，我尝试用自定义图标替换当前图像。我打开了相关的CSS文件并更新了新图像的文件路径，但它没有显示。我还注意到当前正在使用的图像有些奇怪。

这是我要改变的图标之一：

这是我要用以下内容替换它的新图像：

我似乎无法理解为什么开发人员决定使用下面的复杂图像，但这与使用中的CSS似乎是我的问题的原因。我理解一点CSS并且我一直试图绕过这一个超过4个小时但是我没有到达任何地方。我甚至无法将图像的一部分显示出来。

This是负责显示图标的CSS。我很感激任何关于这里发生了什么以及如何实现我的目标的线索。

Answer 1

您需要做的就是在css文件中找到此行，并将背景网址更改为新图像

#examinations_button {
  background: #fff url(../../images/dashboard_buttons/<newimagename>.png) 0 0 no-repeat;
}

#examinations_button:hover {
  background: #fff url(../../images/dashboard_buttons/<newimagename>.png) 0    0 no-repeat;
}

Answer 2

如果您没有“悬停”图片，则可以替换图标图像，对于悬停效果，请改用围绕它的边框。类似的东西：

#admission_button {
    background:#fff url(../../images/dashboard_buttons/YOUR_NEW_ICON) 0 0 no-repeat;
}
#admission_button:hover { border: 1px solid gray; }

Answer 3

你必须在dashboard.css上更改背景的网址，而且还要修改你的css路径（http://54.68.45.200/stylesheets/user/#dashboard.css?1427142532），你可能有资产的缓存系统，你必须刷新它;

#examinations_button {
  background: #fff url(http://i.stack.imgur.com/SVsEt.png) 0 0 no-repeat;
}

#examinations_button:hover {
  background: #fff url(http://i.stack.imgur.com/SVsEt.png) 0    0 no-repeat;
}

修改Chrome Dev Tools上的后台网址为我工作