在带有 CSS 的文本之前显示引导图标显示代码而不是图标答案

【问题标题】：Displaying Bootstrap Icon before text with CSS shows code instead icon在带有 CSS 的文本之前显示引导图标显示代码而不是图标
【发布时间】：2017-10-16 10:05:08
【问题描述】：

我需要在使用 .normal-text 类的元素之前显示引导 Glyphicons：我正在尝试以下内容，但它显示的是代码而不是图标。

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

&lt;blockquote class="normal-text"&gt; Some Text &lt;/blockquote&gt;

这方面需要帮助。

【问题讨论】：

glypicon 应该在元素之前吧？

标签： html css blockquote

【解决方案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>

【讨论】：

这是一个很棒的代码，我将使用这个代码，因为它具有图标所需的字体。太好了……

【解决方案2】：

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

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

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

【讨论】：

是的，你是对的，但我有一些不同的场景，这就是为什么我要这样使用......无论如何，谢谢它已经得到回答。
所以你可以使用这个 css .normal-text::after{ content: "\270f"; font-family: 'Glyphicons 半身人'; }

【解决方案3】：

改用 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 图片而不是图标代码呢？
你可以这样写 <img src="your_image_path" alt="..." > 确保你把 css 给 img 标记为 display-inline-block 出现在同一行。
@AbdulRahman 这个帖子how-to-put-an-image-in-div-with-css 会帮助你。
好的，谢谢，我已经完成了...现在可以正常工作了。
谢谢！ font-family: 'Glyphicons 半身人';这是我缺少的那条线！

【解决方案4】：

您不能在 CSS content property 中包含 span tag。

content CSS 属性与 ::before 和 ::after 一起使用在元素中生成内容的伪元素。

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

&lt;blockquote class="normal-text"&gt; Some Text &lt;/blockquote&gt;

【讨论】：

【解决方案5】：

你不能这样显示图标。您应该使用带有字体系列的图标 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>

【讨论】：