Как переопределить Bootstrap <blockquote> border-left с символом FontAwesome в CSS?

Когда a <blockquote> появляется в моем div, я бы хотел переопределить его, чтобы он использовал FontAwesome icon-quote-left в отличие от значения border-left: 5px rgb...., которое он использует сейчас.

Как это сделать, используя только CSS?

Я не хочу использовать JS - потому что он добавляет слишком большую нагрузку на страницу.

Ответ 1

Вы можете сделать это с помощью элемента CSS Pseudo. Здесь JSFiddle, чтобы продемонстрировать: http://jsfiddle.net/cvADH/

/* Override the bootstrap style */
blockquote {
    border-left: none;
}

/* Insert the pseudo element - replicating what FontAwesome does */
blockquote:before {
    content: "\f10d"; 
    font-family: FontAwesome;
    float: left;
    margin-right: 10px;
}

Ответ 2

Извините за iPad, поэтому не можете дать точный ответ, но логика будет заключаться в том, чтобы открыть загрузочный CSS-узел, чтобы найти точное место, где объявлен значок для blockqote, и переопределить его соответствующим CSS, который, вероятно, будет работать что-то вроде отключения фонового изображения/положения бутстрапов, переключения семейства шрифтов и, возможно, добавления содержимого: "char", который вводит символ, соответствующий шрифту, удивительный символ.

Обновление: См. Здесь, как это делается

FontAwesome

.icon-glass:before { content: "\f000"; }

https://github.com/malarkey/320andup/blob/master/less/font-awesome.less

бутстрапе

.icon-glass { background-position: 0 0; }

https://github.com/twitter/bootstrap/blob/master/less/sprites.less