如何在 CSS 中使用 FontAwesome 图标覆盖 Bootstrap <blockquote> border-left？答案

【问题标题】：How do I override Bootstrap's <blockquote> border-left with a FontAwesome icon in CSS?如何在 CSS 中使用 FontAwesome 图标覆盖 Bootstrap <blockquote> border-left？
【发布时间】：2015-11-09 14:37:08
【问题描述】：

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

我怎样才能只使用 CSS 来做到这一点？

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

【问题讨论】：

标签： css twitter-bootstrap font-awesome

【解决方案1】：

您可以使用 CSS 伪元素来做到这一点。这是一个 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;
}

【讨论】：

\f10d 是什么？你从哪里得到的？
哦，那是那个特定图标的 CSS 内容值 - astronautweb.co/snippet/font-awesome - 太棒了。谢谢。这正是我想要的！
请问我们如何在 blockquote 上用 pull-right 做到这一点？
@qwertzman 使用上面指定的 pull-left 的以下镜像代码：blockquote:after { content: "\f10e";字体系列：FontAwesome；浮动：对；左边距：10px； }

【解决方案2】：

抱歉，在 iPad 上无法给出准确的答案，但逻辑是打开引导 CSS 找到声明 blockqote 图标的确切位置，并用您的适当 CSS 覆盖它，这可能会解决诸如禁用引导样式背景图像/位置，切换字体系列，并可能添加内容：'char' 注入与字体真棒字符相对应的字符。

更新：看看这里是怎么做的

字体真棒

.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

【讨论】：

我很想看到一些关于如何实现这一点的代码。我知道这个理论，它只是语法并且实际上是这样做的 - 我被 :) 吓傻了 :)
手头没有 PC，所以没有示例。但是查看 320up 框架，我知道他们在替换引导图标方面做了一些下降，以支持字体很棒的图标。也许看看他们的代码会帮助你
使用示例链接更新，其余的应该很容易:) ..long version short: 下载 bootstrap，用 font-awesome.less 替换 sprite.less ..rebuild，享受。