如何将 FontAwesome 字符添加到所有块引用的开头？

Question

我正在使用 FontAwesome。现在我有一个 blockquote，它前面有一个图像，显示它的引号。

blockquote {
    background-image: url("./styles/roman/imageset/forum/quote.gif");
    background-attachment: scroll;
    background-position: 6px 8px;
    background-repeat: no-repeat;
    border-color: #dbdbce;
    border: 1px solid #dbdbdb;
    font-size: 0.95em;
    margin: 0.5em 1px 0 25px;
    overflow: hidden;
    padding: 5px;
}

FontAwesome 的字体中有一个引号，我想知道是否有办法将其从当前的背景更改为仅显示字符。我不知道使用内容和字体类型是否可行。

例子

["] 这是任何杂志的引用。

其中 ["] 当前是引用图片。

Answer 1

您可以尝试使用类似 CSS ::before 伪选择器的东西：

blockquote::before {
   content: "\"";
}

这将在 blockquote 元素之前插入一个单引号。（注意转义标记。）

如果你想显示一张图片，你可以使用这个：

blockquote::before {
   content: '<img src="./styles/roman/imageset/forum/quote.gif" class="quotemark"/>';
}

img.quotemark {
  /* Style the image here. */
}

Answer 2

您可以使用 CSS pseudo-selector ::before.

对于您的示例，您将使用：

blockquote::before {
  content: '\"';
}

为了进一步参考，see here。

如果您希望包含 FontAwesome 库中的图标，您可以尝试以下操作：

blockquote::before {
  font-family: FontAwesome;
  content: '\f10d'; /*quote left icon*/
}

Answer 3

您可以使用带有 content: open-quote 的 ::before pseudo-element 来插入开头引号，使用带有 content: no-close-quote 的 ::after 来减少引号嵌套水平而不显示任何报价。

如果要自定义引号，请使用quotes 属性。根据A list of Font Awesome icons，fa-quote-left是\f10d，fa-quote-right是\f10e。

最后，要以适当的字体显示该字符，请使用 font-family: FontAwesome。

blockquote { quotes: "\f10d" "\f10e" '“' '”' "‘" "’"; }
blockquote::before { content: open-quote; font-family: FontAwesome; }
blockquote::after  { content: no-close-quote; }

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<blockquote>
  Hello world!
  <blockquote>Foo bar<blockquote>Baz</blockquote></blockquote>
</blockquote>

如何将 FontAwesome 字符添加到所有块引用的开头？

How can I add a FontAwesome character to the beginning of all blockquotes?

html

css

font-awesome