CSS HTML ersetzen glyphicon mit img

Question

Ich mag würde die glyphicon mit einem img-Tag ersetzen.

Derzeit wird die Dropdown wie unten

geschrieben

<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"> 
               <a href="#" class="btn btn-primary btn-block btn-sm">Profile</a> 
              </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> 
               <a href="#" class="btn btn-danger btn-block">Logout</a> 
              </p> 
             </div> 
            </div> 
           </div> 
          </li> 
         </ul> 
        </li> 
       </ul> 

Wie ändere ich die Codezeile ein img zu passen gut über die glyphicon zu ermöglichen? Ich glaube, ich brauche ein CSS, um es auf eine bestimmte Größe zu machen. Ich habe viele Wege ausprobiert, aber ohne Erfolg. Bitte hilf mir, dir zu danken.

Answer 1

Sie müssen den span-Tag entweder mit einem img oder div-Tags ersetzen:

• Mit einem IMG-Tag und href das bevorzugte Bild
• Mit einem DIV-Tag und CSS Hintergrund Eigenschaft

Hier ist ein Beispiel, indem die span-Tag mit .glyphicon Klasse ersetzen:

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