内容CSS以及与IE的兼容性

Question

I have inserted an icon with an image inside.

In chrome I see the icon

But in IE icon disappear.

Here's my CSS

<div class="infoIcon"></div>

.infoIcon {
    content: url('/assets/img/info-sign.png');
    background-color: #919191;
    width:15px;
    border-radius: 8px;
    margin-left:10px;
    display: inline;
    vertical-align: sub
}

Answer 1

you can achieve this using HTML entity.

 .infoIcon { font-size: 40px; } 

 <div class="infoIcon">&#9432;</div> 

Answer 2

In css "content" applies to ::before & ::after pseudo selectors.

As to why it Chrome is showing the image, Chrome tends to be flexible with css syntax most of the times. IE and FireFox are not showing the image because it is not the right syntax.

Edit: Example If you want to keep 'content' You'll have to move your content to .:before

.icon:before{
content: url('src');
}

However you'll need to scale your image to the right size. (Icon libraries use fonts where they can change the font-size easily)

Second option is continue as you are now but switch to background-image

.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}