Значок не изменяется с изменением класса в Firefox или IE

Question

Я пытаюсь настроить панель опроса Bootstrap (v3.3.5), отображая значок в углу и меняя его: открывать/закрывать фрагмент значка. Вот рабочая версия в Bootply.

В моем случае я пытаюсь изменить значок из других источников. Проблема в том, что код хорошо работает в Google Chrome, но значки/изображения не отображаются в Firefox и InternetExplorer.

Является ли это ошибкой в ​​бутстрапе, или его можно легко устранить?

Спасибо.

Answer 1

Вы должны использовать свойство content CSS с псевдо-элементами, поэтому вместо того, чтобы:

.icon-close { 
    content: url("https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/navigate-down.png"); 
} 

Попробуйте

.icon-close::before { 
    content: url("https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/navigate-down.png"); 
} 

Demo