-1

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.

Community
  • 1
  • 1
Si8
  • 9,141
  • 22
  • 109
  • 221
  • 3
    Possible duplicate of [css url() not recognized in internet explorer 10](http://stackoverflow.com/questions/16132460/css-url-not-recognized-in-internet-explorer-10) – jonrsharpe Oct 21 '16 at 20:00
  • Background doesn't show up in Chrome. I tried that approach already – Si8 Oct 21 '16 at 20:02
  • 1
    Then maybe http://stackoverflow.com/questions/18202306/ff-and-ie-dont-load-img-src-from-css, if you already did this research *mention it*. – jonrsharpe Oct 21 '16 at 20:04
  • 1
    @Si8 you are using `content` on a regular element, not a pseudo element. The answer linked as a potential duplicate explains that. – Jacob G Oct 21 '16 at 20:04
  • I tried `background` instead of content and did the whole thing as the article explains but nothing. – Si8 Oct 21 '16 at 20:05
  • 1
    @Si8 that's because (1 It has no height (2 you need to set the `background-size` to `contain` – Jacob G Oct 21 '16 at 20:08
  • Got it... it's an oversight on my part. Thank you. – Si8 Oct 21 '16 at 20:10

2 Answers2

2

It is not correct syntax.

The content property is applicable to the pseudeo-elements ::after, ::before, :after, and :before.

If you want it to be display it in all browsers, you must create a pseudo element in the <style></style> or inside a .css file. Alternatively, you could put a <img/> tag inside you <i></i> element.

Reference @ w3schools

J. Allan
  • 1,418
  • 1
  • 12
  • 23
youssouf
  • 381
  • 2
  • 11
2

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;      
}
Lucas Lazaro
  • 1,516
  • 9
  • 13