Why is the icon shown in some browsers while other it is not
<p>Fiddle: <a href="https://jsfiddle.net/z1mdvkgq/" rel="nofollow noreferrer">https://jsfiddle.net/z1mdvkgq/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="test" style="overflow: hidden; width: 650px; height: 350px; background: #CCC; position: relative;"&gt;
  &lt;div class='control' tabindex='1'&gt;
    &lt;div class='btn'&gt;&lt;/div&gt;
    &lt;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;"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;i class='icon-close ion-ios-close-empty'&gt;CLOSE&lt;/i&gt;
&lt;/div&gt;
</code></pre>

<p>How can I fix the "+" is shown in Chrome but not in IE.</p>

<p><a href="https://stackoverflow.com/questions/16132460/css-url-not-recognized-in-internet-explorer-10">css url() not recognized in internet explorer 10</a> explains to use background instead of <code>content</code> but that doesn't work in my case.</p>