CSS:如何在 CSS 中的每个 h3 之前显示图像图标

伪元素会做你想做的事。使用 :before 伪元素，您的 CSS 将如下所示：

h3.widget-title:before {
    content: url('/path/to/image');
}

这会在<h3>的文本内容之前放置一个图像，但这根本不会改变 DOM，这很重要。

关于伪元素如何工作的很好的解释可以在这里找到，在 CSS Tricks 上。

如果你的图片是10px宽，你可以试试这个：

.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}

保留 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;
}

.widget-title:before {
  content: url(path/to/image.png);
}

您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/content 找到更多信息。

h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}

样品 http://jsfiddle.net/KCXVM/

是的，你可以在CSS中做到这一点。

只需使用 :before 伪选择器，如下所示：

widget-title:before {
    content:url('imagename.png');
}

或者，当然，使用h3:before { ... }将其应用于所有h3元素。

这是给你的一个工作示例

兼容性：这适用于所有常见浏览器，IE7 或更早版本除外。

为什么不简单地将图像用作背景？

.widget-title {
    background: url(...) no-repeat 50% 0;
    padding-left: 20px;
}

，起初，我认为<span>的事情会起作用。

然后，我尝试了这个，它无缝地工作：

h3:before{
content: url('your url');
}

按照以下方式(通过OIW博客(在CSS中的每个h3标题之前添加图标：

- 使用引导的字形

如果您使用的是引导程序，则可以使用字形图标将图标添加到所需的标题或文本中。

Bootstrap包含一组不同的图标，要选择合适的图标，您可以查看此处：https://getbootstrap.com/docs/3.3/components/。选择所需的图标后，将其添加到主题是小菜一碟。您只需要在要显示图标的位置之后添加卡片

<span class="glyphicon glyphicon-ok"></span>

请注意，我添加的图标是"ok"，因此它的类应该是"glyphicon-ok"。每个图标(在我上面提到的列表中(都与不同的类兼容。

- 使用当前使用的字体或第三方的现有备忘单的图标

如果您的网站不使用 Bootstrap 或 Bootstrap 的当前图标集不能满足您的需求(尽管包含很多((引导程序的字形在 Window Phone OS 的 IE10 上显示错误(。之后，您可以检查您正在使用的网站的字体，并找出它是否有图标备忘单库。例如：难以捉摸的图标，Fontisto，Material Design...是一些带有图标备忘单的字体，可以立即使用。

如果您当前使用的网站字体有图标备忘单，那么您可以拥有一组第三方图标。在这里，我想介绍一下"字体真棒图标"。这是一组好看且流行的图标。要使用这组缺点，您需要将此代码添加到网站的 head 部分：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

– 添加 CSS 后，您可以使用此代码放入显示图标的 HTML(您可以将此方法应用于您使用字体的备忘单的部分，如上所述。有些字体有独特的使用方式(

<i class="fa fa-edit"></i>

如果你不想要HTML中的代码，你可以使用CSS。使用 CSS，您需要找到显示图标的部分的类或 ID，然后使用以下 CSS 代码来显示它。在这里，我在标题之前(：：之前(显示第三方"字体真棒图标"的 EDIT 图标，以及右填充和字体样式的 2 个属性(您也可以使用 after 属性在标题之后显示它(：

span.last-updated-time::before {
font-family: "FontAwesome";
content: "'f044";
padding-right: 5px;
font-style: normal;
}

注意：内容代码为十六进制代码。您可以找到它并将其替换为当前使用的图标的代码。使用"字体真棒图标"，您可以在此处找到它：https://fontawesome.com/cheatsheet