Контент CSS и совместимость с IE

Question

Я вставил значок с изображением внутри.

В хроме я вижу значок

Но в IE значокисчезнуть.

Вот мой 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

Вы можете достичь этого, используя сущность HTML.

.infoIcon {
    font-size: 40px;
}

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

Answer 2

В css «content» применяется к псевдо-селекторам :: before & :: after.

Что касается того, почему Chrome показывает изображение, Chrome в большинстве случаев проявляет гибкость с синтаксисом css.IE и FireFox не показывают изображение, потому что это неправильный синтаксис.

Редактировать: Пример Если вы хотите сохранить «контент», вам придется переместить ваш контент в.: До

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

Однако вам нужно масштабировать изображение до нужного размера.(Библиотеки значков используют шрифты, где они могут легко изменять размер шрифта)

Второй вариант - продолжить, как вы сейчас, но переключитесь на background-image

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