twitter-bootstrap 如何在 CSS 中使用 FontAwesome 图标覆盖 Bootstrap 的 <blockquote> border-left？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15735128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I override Bootstrap's <blockquote> border-left with a FontAwesome icon in CSS?
提问by marcamillion
When a <blockquote>appears within my div, I would like to override it so that it uses FontAwesome's icon-quote-leftas opposed to the border-left: 5px rgb....value it uses now.
当 a<blockquote>出现在我的 div 中时，我想覆盖它，以便它使用 FontAwesome icon-quote-left，而不是border-left: 5px rgb....它现在使用的值。
How can I do this using just CSS?
我怎样才能只使用 CSS 来做到这一点？
I don't want to use JS - because it adds too much load to the page.
我不想使用 JS - 因为它给页面增加了太多的负载。
回答by Hai Nguyen
You can do this with a CSS Pseudo element. Here's a JSFiddle to demonstrate: http://jsfiddle.net/cvADH/
您可以使用 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;
}
回答by Robert Hoffmann
Sorry on iPad so can't give a precise answer, but the logic would be to open up bootstrap CSS find the precise place where the icon for the blockqote is declared and override it with your proper CSS which will probably work out to something like disabling bootstrap styles background image/position, switch font-family, and probably add a content: 'char' that injects the character that corresponds to the font awesome character.
抱歉，在 iPad 上无法给出准确答案，但逻辑是打开 bootstrap CSS 找到声明 blockqote 图标的精确位置，并使用适当的 CSS 覆盖它，这可能会导致禁用bootstrap 样式背景图像/位置，切换字体系列，并可能添加一个内容：'char'，注入与字体真棒字符对应的字符。
Update: See here how it's done
更新：在这里查看它是如何完成的
FontAwesome
字体真棒
.icon-glass:before { content: "\f000"; }
https://github.com/malarkey/320andup/blob/master/less/font-awesome.less
https://github.com/malarkey/320andup/blob/master/less/font-awesome.less
BootStrap
引导程序
.icon-glass { background-position: 0 0; }
https://github.com/twitter/bootstrap/blob/master/less/sprites.less
https://github.com/twitter/bootstrap/blob/master/less/sprites.less
