如何将 FontAwesome 字符添加到所有块引用的开头?
How can I add a FontAwesome character to the beginning of all blockquotes?
我正在使用 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 的字体中有一个引号,我想知道是否有办法将其从当前的背景更改为仅显示字符。我不知道使用内容和字体类型是否可行。
例子
["] 这是任何杂志的引用。
其中 ["] 当前是引用图片。
您可以尝试使用类似 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. */
}
您可以使用 CSS pseudo-selector ::before
.
对于您的示例,您将使用:
blockquote::before {
content: '\"';
}
为了进一步参考,see here。
如果您希望包含 FontAwesome 库中的图标,您可以尝试以下操作:
blockquote::before {
font-family: FontAwesome;
content: '\f10d'; /*quote left icon*/
}
您可以使用带有 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。现在我有一个 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 的字体中有一个引号,我想知道是否有办法将其从当前的背景更改为仅显示字符。我不知道使用内容和字体类型是否可行。
例子
["] 这是任何杂志的引用。
其中 ["] 当前是引用图片。
您可以尝试使用类似 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. */
}
您可以使用 CSS pseudo-selector ::before
.
对于您的示例,您将使用:
blockquote::before {
content: '\"';
}
为了进一步参考,see here。
如果您希望包含 FontAwesome 库中的图标,您可以尝试以下操作:
blockquote::before {
font-family: FontAwesome;
content: '\f10d'; /*quote left icon*/
}
您可以使用带有 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>