Si8 Si8 - 3 years ago 98
CSS Question

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



<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('');
width: 55px;
position: absolute;
left: 10%;
top: 8%;
outline: none;"></i>
<i class='icon-close ion-ios-close-empty'>CLOSE</i>

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
but that doesn't work in my case.

Answer Source

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(;
  background-size: 100%;
  width: 55px;
  height: 55px; /* make sure to include height as well */
  position: absolute;
  left: 10%;
  top: 8%;
  outline: none;      
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download