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