CSS HTML to replace glyphicon with img - html

Question

I would like to replace the glyphicon with an img tag.
Currently the drop down is written as below
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Desmond</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Desmond Soh</strong></p>
<p class="text-left small">Desmond#mail.com</p>
<p class="text-left">
Profile
</p>
</div>
</div>
</div>
</li>
<li class="divider navbar-login-session-bg"></li>
<li class="navbar-login-session-bg">
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
Logout
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
How do i change the line of code to allow an img to fit nicely over the glyphicon? I believe I need a css to render it to a specific size as well. I have tried many ways but to no avail. Please help me thank you.

Answer 1

You need to replace the span tag with either a img or div tag:
Using an IMG tag and href to the preferred image
Using a DIV tag and CSS background property
Here's an example by replacing the span tag with .glyphicon class:
HTML
<div class="imgPlaceholder></div>
CSS
.imgPlaceholder{
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:100px;
width:100px;
}