我有 wordpress 侧边栏：
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
我需要在之前显示小图标“边栏的标题。我可以用 CSS 做吗？
或者我必须手动将图像添加到代码中？喜欢：
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
【问题讨论】：
background-position。
.widget-title:before {
content: url(path/to/image.png);
}
您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/content找到更多信息。
【讨论】：
Pseudo elements 会做你想做的事。使用 :before 伪元素，您的 CSS 将如下所示：
h3.widget-title:before {
content: url('/path/to/image');
}
这将在<h3> 的文本内容之前放置一个图像，但是这根本不会改变 DOM，这一点需要注意。
可以在here, on CSS Tricks 找到关于伪元素如何工作的一个很好的解释。
【讨论】：
保留你的h3标签而不包括img标签，并执行以下操作：
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
【讨论】：
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
【讨论】：
如果你的图片是 10px 宽，你可以试试这个：
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
【讨论】：
是的，你可以在 CSS 中做到这一点。
只需使用:before 伪选择器，如下所示：
widget-title:before {
content:url('imagename.png');
}
或者，当然，使用h3:before { ... } 将其应用于所有h3 元素。
Here's a working example for you
浏览器兼容性：这适用于所有常见浏览器，IE7 或更早版本除外。
【讨论】：
为什么不简单地将图像应用为背景？
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
【讨论】：
所以，起初，我认为<span> 的东西会起作用。
然后，我尝试了这个，它无缝地工作了：
h3:before{
content: url('your url');
}
【讨论】：
您可以按照以下方式（通过 OIW 博客）在 CSS 中的每个 h3 标题之前添加图标：
- 使用 Bootstrap 的 Glyphicons
如果您使用的是 Bootstrap，那么您可以使用 Glyphicons 将图标添加到所需的标题或文本中。
Bootstrap 包含一组不同的图标，要选择合适的图标，您可以在这里查看：https://getbootstrap.com/docs/3.3/components/。一旦选择了所需的图标，将其添加到主题中就是小菜一碟。您只需在要显示图标的位置后添加卡片
<span class="glyphicon glyphicon-ok"></span>
注意我添加的图标是“ok”，所以它的类应该是“glyphicon-ok”。每个图标（在我上面提到的列表中）都兼容不同的类。
- 使用当前使用的字体或第三方现有备忘单的图标
如果您的网站没有使用Bootstrap或者Bootstrap的当前图标集不能满足您的需要（尽管包含很多）（Glyphicons bootstrap在Window Phone的IE10上显示错误操作系统）。之后，您可以检查您正在使用的网站的字体，并查看它是否有图标备忘单库。例如：Elusiveicons、Fontisto、Material Design…… 是一些带有图标的字体，可立即使用。
如果您当前使用的网站字体有图标备忘单，那么您可以拥有一组第三方图标。在这里，我想介绍“Font Awesome Icons”。这是一组好看且流行的图标。 要使用这组缺点，您需要将此代码添加到您网站的 head 部分：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– 添加CSS后，您可以使用此代码将显示图标的HTML放入（您可以将此方法应用于您使用上述字体的Cheatsheet的部分。某些字体具有独特的使用方式）
<i class="fa fa-edit"></i>
– 如果您不想要 HTML 中的代码，您可以使用 CSS。使用 CSS，您需要找到显示图标的部分的 Class 或 ID，然后使用下面的 CSS 代码显示它。这里我在标题前（::before）显示了第三方“Font Awesome Icons”的EDIT图标，以及padding-right和font-style 2个属性（你也可以使用after属性在标题后显示） ：
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
注意：内容代码为十六进制代码。您可以找到并替换为当前使用的图标的代码。使用“Font Awesome Icons”，您可以在这里找到它：https://fontawesome.com/cheatsheet
【讨论】：