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

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: '\"';
}

如需进一步引用，see here .

如果您希望包含 FontAwesome 库中的图标，您可以尝试以下方法:

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