在带有 CSS 的文本之前显示 Bootstrap 图标显示代码而不是图标
Displaying Bootstrap Icon before text with CSS shows code instead icon
我需要在使用 .normal-text
class 的元素之前显示 bootstrap 字形图标:我尝试使用以下内容,但它显示的是代码而不是图标.
.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 与其字体系列一起使用。
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "0f";
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>
改为使用 unicode。 content:''
会将代码块视为文本。
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "0f";
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
中。
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: ' [=10=]270e '
}
<blockquote class="normal-text"> Some Text </blockquote>
我想它会对你有所帮助。使 html 如下所示,无需在 css
之后
<blockquote class="normal-text"><span class="glyphicon glyphicon-pencil"></span> Some Text </blockquote>
检查这个 link : https://jsfiddle.net/vt3d7pLv/
我想这对你有帮助。
@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>
我需要在使用 .normal-text
class 的元素之前显示 bootstrap 字形图标:我尝试使用以下内容,但它显示的是代码而不是图标.
.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 与其字体系列一起使用。
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "0f";
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>
改为使用 unicode。 content:''
会将代码块视为文本。
.normal-text{
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
.normal-text::after{
content: "0f";
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
中。
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: ' [=10=]270e '
}
<blockquote class="normal-text"> Some Text </blockquote>
我想它会对你有所帮助。使 html 如下所示,无需在 css
之后<blockquote class="normal-text"><span class="glyphicon glyphicon-pencil"></span> Some Text </blockquote>
检查这个 link : https://jsfiddle.net/vt3d7pLv/
我想这对你有帮助。
@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>