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

Question

我有wordpress侧边栏：

<h3 class="widget-title">TITLE OF SIDEBAR</h3>

我需要在 “TIDELE OF SIDEBAR” 之前显示小图标 。我可以使用CSS吗？

或者我必须手动将图像添加到代码中？ 喜欢：

<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>

Answer 1

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

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

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

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

Answer 2

如果您的图片宽度为10px，您可以尝试这样做：

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

Answer 3

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

Answer 4

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

示例http://jsfiddle.net/KCXVM/

Answer 5

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

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

Answer 6

是的，你可以用CSS做。

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

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

或者，当然， h3:before { ... }使用h3:before { ... }它适用于所有h3元素。

这是一个适合你的工作示例

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

Answer 7

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

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

Answer 8

所以，起初，我认为<span>会起作用。

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

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

Answer 9

您可以通过以下方式在CSS中的每个h3标题之前添加图标（通过OIW博客）：

- 使用Bootstrap的Glyphicons

如果您使用的是Bootstrap，则可以使用Glyphicons将图标添加到所需的标题或文本中。

Bootstrap包含一组不同的图标，以便选择一个合适的图标，您可以在这里查看： https ： //getbootstrap.com/docs/3.3/components/ 。 一旦选择了想要的图标，将其添加到主题是一块蛋糕。 您只需要在要显示图标的位置后添加卡

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

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

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

如果您的网站不使用Bootstrap或Bootstrap的当前图标集不能满足您的需求（尽管包含很多）（Bootstrap的Glyphicons在Window Phone OS的IE10上显示错误）。 之后，您可以检查您使用的网站的字体是什么，并查看它是否有图标Cheatsheet库。 例如： Elusiveicons，Fontisto，Material Design ...是一些具有Cheatsheet图标的字体，可立即使用。

如果您当前使用的网站字体有图标Cheatsheet，那么您可以拥有第三方的一组图标。 在这里，我想介绍“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，您需要找到显示图标的部件的类或ID，然后使用下面的CSS代码显示它。 这里我在标题之前（::之前）显示第三方“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