Question

当我的div中出现<blockquote>时，我想覆盖它，以便它使用FontAwesome的icon-quote-left而不是它现在使用的border-left: 5px rgb....值。

我怎样才能使用CSS？

我不想使用JS - 因为它会给页面增加太多负载。

Answer 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;
}

Answer 2

抱歉在iPad上所以无法给出准确的答案，但逻辑是打开bootstrap 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

如何在CSS中使用FontAwesome图标覆盖Bootstrap＆＃39; s <blockquote> border-left？</blockquote>

2 个答案: