Как переопределить 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