Is it possible to use images to redefine the symbols?

[ensean]

Hi, is it possible to redefine the rating symbols in the following way? I have tried, but it looks quite ugly...

css

.symbol-empty { background-image: url("/ecosystem/images/market/st.h.png"); }

.symbol-filled { background-image: url("/ecosystem/images/market/st.o.png"); }

.symbol { width: 20px; height: 20px; }

[dreyescat]

Technically yes. You can use a background-image as symbol. Not sure what you mean by looks quite ugly. Could you create a fiddle so I can try to give you more feedback? You can base it on this one.

[ensean]

You can try the following example, it seems that when rated the background image disappeared... 1.The html code is not modified. 2.The css file is modified as follows

css .symbol { width: 32px; height: 32px; } .symbol-empty { background-image: url('http://download.easyicon.net/png/1129027/32/') } .symbol-filled { background-image: url('http://download.easyicon.net/png/1129028/32/'); }

[dreyescat]

You need to make symbols inline-block:

.symbol {
  display: inline-block;
  width: 32px;
  height: 32px;
 }
.symbol-empty {
  background-image: url('http://download.easyicon.net/png/1129027/32/')
}
.symbol-filled {
  background-image: url('http://download.easyicon.net/png/1129028/32/');
}

Check fiddle.

NOTE: You will see a little glitch the first time you hover a symbol. It takes a little bit to show the filled symbol. I guess it is because it needs to retrieve the filled image. Once this image is loaded/cached then everything works as expected :smile:. If this is the case you can try some sort of image preload.

[ensean]

@dreyescat Greate, it works perfectly. Thanks a lot for your kindly response.