html - 在带有 CSS 的文本之前显示 Bootstrap 图标显示代码而不是图标

Question

我需要在使用了 .normal-text 类的元素之前显示 bootstrap Glyphicons:我正在尝试以下内容，但它显示的是代码而不是图标。

.normal-text{
   border-left-width: 1px !important;
   font-size: 110% !important;
   color: #100cce;
   font-family: 'Book Antiqua';
}
.normal-text::after{
   content: '<span class="glyphicon glyphicon-pencil"></span>'
}
    

<blockquote class="normal-text"> Some Text </blockquote>

请提供帮助。

Answer 1

改用 unicode。 content:'' 会将代码块视为文本。

.normal-text{
   border-left-width: 1px !important;
   font-size: 110% !important;
   color: #100cce;
   font-family: 'Book Antiqua';
}
.normal-text::after{
   content: "\270f";
   font-family: 'Glyphicons Halflings';
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<blockquote class="normal-text"> Some Text </blockquote>