Si8 Si8 - 1 month ago 5
CSS Question

Why is the icon shown in some browsers while other it is not

Fiddle: https://jsfiddle.net/z1mdvkgq/

HTML:

<div class="test" style="overflow: hidden; width: 650px; height: 350px; background: #CCC; position: relative;">
<div class='control' tabindex='1'>
<div class='btn'></div>
<i class="icon-search ion-search" style="
content: url('https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png');
width: 55px;
position: absolute;
left: 10%;
top: 8%;
outline: none;"></i>
</div>
<i class='icon-close ion-ios-close-empty'>CLOSE</i>
</div>


How can I fix the "+" is shown in Chrome but not in IE.

css url() not recognized in internet explorer 10 explains to use background instead of
content
but that doesn't work in my case.

Answer

Instead of using content on a non-pseudo element you should use background-image instead.

I've updated your fiddle

But it would go like this:

.icon-search {
  background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png);
  background-size: 100%;
  width: 55px;
  height: 55px; /* make sure to include height as well */
  position: absolute;
  left: 10%;
  top: 8%;
  outline: none;      
}