How to display icon with text in html with the help of css?

Question

Dear All,

I want to display icon image with text in sidebar navigation, I've tried to use vertical-align and line-height but there was no change, please see the code below:

HTML:

<div id="sidebar-wrapper">
  <ul class="sidebar-nav" id="MainMenu">
    <li class="sidebar-brand"><a href="#">ABC</a></li>
    <li><a href="#"><img src="images/icons/home.png">HOME</a></li>
  </ul>
</div>

Any help or guidance will be much appreciated.

Regards

Answer 1

You can use vertical-align and line-height

<p style = 'line-height: 20px'>
  <img src = 'images/icons/home.png' style='vertical-align: middle' /> HOME
</p>

Another approach: You can use no-repeat for the background

span.yourtext{
  background: transparent url(images/icons/home.png) no-repeat 
              inherit left center;
  padding-left: 15px
}
<span class="yourtext">
  Home
</span>

Answer 2

You can use Pseudo element to put the icons with text. In addition I would suggest you to choose FontAwesome Library to choose icons (its a vector based and you can change the font icons any time). Have a look at the DEMO I've made with FontAwesome Library. Check DEMO.

CSS Code is

ul{list-style-type:none;}
li{position:relative;}
li:not(.sidebar-brand):before{content:"\f015";position:absolute; left:-20px;font-family: FontAwesome;color:red;}