CSS: How to display image icon before each h3 in CSS?

9 comments

1. Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:

   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.

   A good explanation of how pseudo elements work can be found here, on CSS Tricks.

   Log in to Reply

2. If your image is 10px wide, you could try this:

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

   Log in to Reply

3. Keep your h3 tag without including img tag, and do the following:

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

   Log in to Reply

4. .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.

   Log in to Reply

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

   Sample http://jsfiddle.net/KCXVM/

   Log in to Reply

6. Yes, you can do it in CSS.

   Simply use the :before pseudo-selector, like this:

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

   Or, of course, use h3:before { ... } for it to apply to all h3 elements.

   Here’s a working example for you

   Browser compatibility: This works in all common browsers, except IE7 or earlier.

   Log in to Reply

7. Why not simply apply the image as a background?

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

   Log in to Reply

8. So, at first, I thought a <span> thing would work.

   Then, I tried this, and it worked seamlessly:

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

   Log in to Reply

9. You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):

   – Use Glyphicons of Bootstrap

   If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.

   Bootstrap contains 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

   <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.

   – 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) (Glyphicons of 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.

   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:

   <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)

   <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):

   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

   Log in to Reply