CSSでテキストの前にブートストラップアイコンを表示する代わりにコード

Question

.normal-textクラスが使用されている要素の前にブートストラップグリフィコンを表示する必要があります。次のようにしていますが、アイコンの代わりにコードが表示されます。

.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

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

Answer 2

このようなアイコンは表示できません。あなたはそれがフォントファミリでアイコンのUnicodeを使用する必要があります。代わりにUnicodeを使用し

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

Answer 3

あなたはCSS content propertyにspan tagを含めることはできません。

コンテンツCSSプロパティは、要素のコンテンツを生成するために、 疑似要素の前と後に使用されます。

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

Answer 4

私はそれはあなたを助けると思います。 https://jsfiddle.net/vt3d7pLv/

Answer 5

私はそれはあなたを助けると思う：このリンクを以下に示していないと、CSS後

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

チェックする必要はありませんとしてHTMLを作ります。

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