htmlcssblockquote

Displaying Bootstrap Icon before text with CSS shows code instead icon

I need to display the bootstrap Glyphicons before the element in which the .normal-text class has been used: I am trying with the following but it shows the code instead the icon.

.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>

Help required in this please.

Solution

  • Use unicode instead. content:'' will treat code block as a text.

    .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>