2

我需要在使用该类的元素之前显示引导 Glyphicons .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>

请帮助。

4

5 回答 5

7

请改用 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>

于 2017-05-17T05:46:26.380 回答
2

你不能像那样显示图标。您应该将 icon 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>

于 2017-05-17T05:46:10.863 回答
2

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>

于 2017-05-17T05:48:34.607 回答
1

我想它会帮助你。如下所示制作html，无需在css之后

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

检查此链接：https ://jsfiddle.net/vt3d7pLv/

于 2017-05-17T05:54:57.250 回答
1

我想它会对你有所帮助。

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

于 2017-05-17T06:51:15.423 回答