如何在Bootstrap字体图标中添加引用图标？

Question

我想标题已经说明了一切。在我使用的Bootstrap 3中，glyphicon图标集中缺少引用图标。 我知道可以使用单独的图像，但这将意味着需要进行额外的请求，并且图像不会是矢量的。因此，我想知道是否有更优雅的方法？

- Jand

Answer 1

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

<blockquote>I'm quoted</blockquote>

- Atul Nagpal

---

很好，但我的问题是关于引号 icon 而不是引号输出的样式。 - Jand

非常好。但是不要忘记也要关闭引号，否则从第二个引号开始你就只会看到单引号了。这是方法：blockquote:after{ content: no-close-quote; } - Jpsy

Answer 2

建议使用Font-Awesome http://fortawesome.github.io/Font-Awesome/icons/，它包含了引用符号。

下载并将其引入到项目中，完成后可以像这样使用：

<i class="fa fa-quote-left"><i>I'm quoted!<i class="fa fa-quote-right"><i>

- John Louie Dela Cruz

---

我知道，但是我已经在项目的其他地方使用了glyphicon，我宁愿坚持使用它。 - Jand

glyphicon除非在新版本中添加新的图标，否则不会有引号。 - John Louie Dela Cruz