如何在所有blockquotes的开头添加FontAwesome字符？

I am using FontAwesome. Right now I have a blockquote which has an image in front of it that shows its a quote mark.

我正在使用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 has a quote mark in their font, I was wondering if there is a way to change it from currently being a background to just showing the character. I did not know if using content and a font type would work.

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

Example

["] This is a quote for whatever magazine.

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

where ["] is currently the quote image.

其中[“]是当前的报价图片。

3 个解决方案

#1

You can use the CSS pseudo-selector ::before.

您可以使用CSS伪选择器::之前。

For your example you would use:

对于您的示例,您将使用:

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

For further reference, see here.

有关进一步参考,请参见此处。

If you wish to include the icon from the FontAwesome library, you can try with the following:

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

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

#2

You can use a ::before pseudo-element with content: open-quote to insert an opening quote, and an ::after one with content: no-close-quote to decrement the quote nesting level without displaying any quote.

您可以使用带有内容的:: before伪元素:open-quote来插入一个开头的引用,以及:: after之后带有内容:no-close-quote来减少引用嵌套级别而不显示任何引号。

If you want to customize the quotation marks, use the quotes property. According to A list of Font Awesome icons, fa-quote-left is \f10d and fa-quote-right is \f10e.

如果要自定义引号,请使用quotes属性。根据一个Font Awesome图标列表,fa-quote-left是\ f10d而fa-quote-right是\ f10e。

Finally, to display that character using in the appropriate font, use font-family: FontAwesome.

最后,要使用相应的字体显示该字符,请使用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>

#3

You can try using something like the CSS ::before pseudo selector:

您可以尝试使用类似CSS ::之前的伪选择器:

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

That will insert a single quote mark before the blockquote element. (Note the escape mark.)

这将在blockquote元素之前插入单引号。 (注意逃脱标记。)

If you wanted to display an image, you might use this:

如果要显示图像,可以使用:

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

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

#1