php CSS：如何在CSS中的每个h3之前显示图像图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17003889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to display image icon before each h3 in CSS?
提问by Nikdonevi Kdojsem
I have wordpress sidebar with:
我有 wordpress 侧边栏：
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before"TITLE OF SIDEBAR. Can I do with CSS?
我需要在“边栏标题”之前显示小图标。我可以用 CSS 吗？
Or I must manually add image into code? like:
或者我必须手动将图像添加到代码中？喜欢：
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
回答by Bojangles
Pseudo elementswill do what you want. Using the :beforepseudo element, your CSS would look like this:
伪元素会做你想做的。使用:before伪元素，您的 CSS 将如下所示：
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
这将在 的文本内容之前放置一个图像<h3>，但是这根本不会改变 DOM，这一点很重要。
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
关于伪元素如何工作的一个很好的解释可以在 CSS Tricks 上找到。
回答by L_Holcombe
If your image is 10px wide, you could try this:
如果你的图片是 10px 宽，你可以试试这个：
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
回答by Husain Al Faraj
Keep your h3 tag without including img tag, and do the following:
保留 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;
}
回答by GusDeCooL
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
回答by Alyssa Ross
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/content找到更多信息。
回答by Spudley
Yes, you can do it in CSS.
是的，你可以在 CSS 中做到这一点。
Simply use the :beforepseudo-selector, like this:
只需使用:before伪选择器，如下所示：
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... }for it to apply to all h3elements.
或者，当然，使用h3:before { ... }for 它适用于所有h3元素。
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
浏览器兼容性：这适用于所有常见浏览器，IE7 或更早版本除外。
回答by quietmint
Why not simply apply the image as a background?
为什么不简单地将图像用作背景？
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
回答by Dubstaphone
So, at first, I thought a <span>thing would work.
所以，起初，我认为<span>某件事会奏效。
Then, I tried this, and it worked seamlessly:
然后，我尝试了这个，它无缝地工作：
h3:before{
content: url('your url');
}
回答by OIW
You can add icon before each h3heading in CSS by following these ways below (via OIW Blog):
您可以h3通过以下这些方式（通过 OIW 博客）在 CSS 中的每个标题之前添加图标：
- Use Glyphicons of Bootstrap
- 使用 Bootstrap 的 Glyphicons
If you are using Bootstrap then you can use Glyphiconsto add icons to the desired title or text.
如果您使用的是 Bootstrap，那么您可以使用Glyphicons将图标添加到所需的标题或文本。
Bootstrapcontains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
Bootstrap包含一组不同的图标，要选择合适的图标，您可以在此处查看：https: //getbootstrap.com/docs/3.3/components/。一旦选择了所需的图标，将其添加到主题中就是小菜一碟。您只需要在要显示图标的位置之后添加卡片
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok”so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
请注意，我添加的图标是“ok”，所以它的类应该是“glyphicon-ok”。每个图标（在我上面提到的列表中）都与不同的类兼容。
- Use icons of existing Cheatsheet of the currently used Font or third party
- 使用当前使用的字体或第三方的现有备忘单的图标
If your website don't use Bootstrap or the current set of icons of Bootstrap doesn't meet your need (despite containing a lot) (Glyphiconsof bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design…are some of the fonts that have icons Cheatsheet which are for immediate use.
如果您的网站没有使用 Bootstrap 或者 Bootstrap 当前的图标集不符合您的需要（尽管包含很多）（bootstrap 的Glyphicons在 Window Phone OS 的 IE10 上显示错误）。之后，您可以检查您使用的网站的字体是什么，并确定它是否有图标 Cheatsheet 库。例如：Elusiveicons、Fontisto、Material Design……是一些带有可立即使用的图标 Cheatsheet 的字体。
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons. To use this set of cons, you need to add this code to the head section in your website:
如果您当前使用的网站字体有 Icons 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">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
– 添加CSS后，您可以使用此代码放入显示图标的HTML（您可以将此方法应用于使用上述字体的Cheatsheet部分。某些字体具有独特的使用方式）
<i class="fa fa-edit"></i>
– If you don't want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
– 如果您不想要 HTML 中的代码，您可以使用 CSS。使用 CSS，您需要找到显示图标的部分的类或 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;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet
注意：内容代码为十六进制代码。您可以找到并替换为当前使用的图标的代码。使用“Font Awesome Icons”，您可以在这里找到它：https: //fontawesome.com/cheatsheet
