我需要在使用.normal-text類的元素之前顯示引導程序圖文集：我嘗試使用以下代碼，但顯示代碼而不是圖標。在此需要在使用CSS顯示代碼之前顯示引導程序圖標顯示代碼代替圖標
.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>請幫助。
使用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>多數民衆贊成多好，但如果我需要把HTML圖像，而不是圖標代碼？ –
你可以像這樣寫''確保你把css圖像作爲'display-inline-block'顯示在同一行中。 –
@AbdulRahman這篇文章[怎麼把圖像在div中與css]（http://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div -with-css）會幫助你。 –
你不能顯示那樣的圖標。你應該使用它的字體家族的圖標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>您不能span tag到CSS content property。
內容CSS屬性與:: before和:: 僞元素一起用於在元素中生成內容。
.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>我認爲這將幫助你。使HTML如下給出無需CSS後
<blockquote class="normal-text"><span class="glyphicon glyphicon-pencil"></span> Some Text </blockquote>
yap你是對的，但我有一點不同的場景，這就是爲什麼我要這樣使用...反正，謝謝它已被回答。 –
所以你可以用這個css .normal-text :: after { 內容：「\ 270f」; font-family：'Glyphicons Halflings'; } – zero
我認爲這將幫助你。
@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>這是一個很棒的代碼，我打算使用這段代碼，因爲它有圖標所需的字體。這太棒了... –
謝謝，請接受我的回答 –
的glypicon應該是元素之前，對不對？ – athi