Displaying Bootstrap Icon before text with CSS shows code instead icon

Question

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.

The glypicon should be before the element, right? – athi May 17 '17 at 05:46 — athi, May 17 '17 at 05:46

Abhishek Pandey · Accepted Answer · 2017-05-17T05:51:37.557

10

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>

edited May 17 '17 at 05:51

answered May 17 '17 at 05:46

Abhishek Pandey

13,302
8
38
68

thats great, but what if i need to put an html image instead icon code? – Abdul Rahman May 17 '17 at 05:53
1

you can write like this `` make sure you give css to img tage as `display-inline-block` to be appeared in the same line. – Bhavin Shah May 17 '17 at 06:04
@AbdulRahman this post [how-to-put-an-image-in-div-with-css](http://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div-with-css) will help you. – Abhishek Pandey May 17 '17 at 06:14
1

ok great, thanks i have gone through with...it works fine now. – Abdul Rahman May 17 '17 at 06:37
THANK YOU! font-family: 'Glyphicons Halflings'; this is the line that was missing for me! – DinoSaadeh Oct 12 '21 at 23:45

score 3 · Answer 2 · answered May 17 '17 at 05:46

You can not display icon like that. You should used icon unicode with it's font family.

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

score 2 · Answer 3 · answered May 17 '17 at 05:48

You can't include span tag into CSS content property.

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

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

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

score 2 · Answer 4 · edited May 17 '17 at 08:39

I think it will help you.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),            url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.glyphicon:before {
  content: "\e008";
  padding-right:10px;
  font-size:24px;
  float:left;
}
.glyphicon > p {
  float:left;
  font-size:24px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span class="glyphicon"><p>User</p></span>

this is an awesome code, i am going to use this code because it has the required fonts for icons. that's great... — Abdul Rahman, May 18 '17 at 17:05

zero · Answer 5 · 2017-05-17T05:59:32.633

1

i think it will help you. make html as given below and no need to after css

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

check this link : https://jsfiddle.net/vt3d7pLv/

edited May 17 '17 at 05:59

answered May 17 '17 at 05:54

zero

58
1
12

1

yap you are right but i have little different scenario, that's why i am going to use like that... anyways, thanks it has been answered. – Abdul Rahman May 17 '17 at 05:56
1

so you can go with this css .normal-text::after{ content: "\270f"; font-family: 'Glyphicons Halflings'; } – zero May 17 '17 at 06:06

score 0 · Answer 6 · answered Feb 09 '23 at 00:59

0

In case you are using Bootstrap 5 it should be like this:

.normal-text::after {
  content: '\F12A';
  font-family: "bootstrap-icons";
}

Use the CSS code in the icon detail page as the content.

answered Feb 09 '23 at 00:59

Martin

660
10
23

Displaying Bootstrap Icon before text with CSS shows code instead icon

6 Answers6