Question

我有wordpress侧边栏：

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

我需要显示小图标“TITB OF SIDEBAR。我可以使用CSS吗？

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

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

Answer 1

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

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

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

可以找到关于伪元素如何工作的一个很好的解释here, on 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元素。

Here's a working example for you

浏览器兼容性：这适用于除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

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

- 使用Bootstrap的Glyphicons

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

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

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

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

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

如果您的网站不使用Bootstrap或Bootstrap的当前图标集不能满足您的需求（尽管包含很多）（ Glyphicons 的bootstrap在Window Phone的IE10上显示错误OS）。之后，您可以检查您使用的网站的字体是什么，并查看它是否有图标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

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

9 个答案: