So fügen Sie ein Symbol in das div-Menü ein

Question

Da das Menü, das ich erstellt habe, anders ist, kann ich kein passendes Tag/einen geeigneten Ort zum Einrichten eines Symbols finden. Ich habe verschiedene Lösungen versucht, aber es hat den Rest der CSS in der Speisekarte durcheinander gebracht.

Dies ist, was ich als "Bild" zeitlich verwenden möchte. Möchte lernen, was ich tun kann, um dieses Menü besser zu machen, um die Icons zu unterstützen.

display: block; 
background-color: red; 
width: 20px; 
height: 20px 

Sobald eine Lösung gefunden wurde, werde ich die

background-color: red; 

mit

background-image: url(image_directory.png); 
background-repeat: none; 

Versuch ersetzen links von dem Text (login to ein Bild Symbol hinzufügen VERLOREN VERGESSEN?)

/*jQuery time*/ 
 
$(document).ready(function() { 
 
    $("#sidebar_menu .dropbtn").click(function() { 
 
    //slide up all the link lists 
 
    $("#sidebar_menu .dropdown-content").slideUp(); 
 
    //slide down the link list below the h3 clicked - only if its closed 
 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } 
 
    }) 
 
})

#menu_container { 
 
    display: block; 
 
    position: fixed; 
 
    width: 250px; 
 
    background-color: red; 
 
    height: 100%; 
 
} 
 
#sidebar_menu { 
 
    margin-top: 15px; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
#sidebar_menu .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
#sidebar_menu #login_picture {} 
 
/* Style The Dropdown Button */ 
 

 
#sidebar_menu .dropbtn { 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 12px; 
 
    font-family: Helvetica; 
 
    font-size: 15px; 
 
    text-align: left; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 226px; 
 
    outline: none; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
#sidebar_menu .dropdown-content { 
 
    display: none; 
 
    position: static; 
 
    background-color: green; 
 
    min-width: 250px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
/* Links inside the dropdown */ 
 

 
#sidebar_menu .dropdown-content a { 
 
    color: black; 
 
    text-decoration: none; 
 
    padding: 12px; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
#sidebar_menu .dropdown-content a:hover { 
 
    background-color: yellow; 
 
} 
 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 

 
#sidebar_menu .dropdown:hover .dropbtn { 
 
    background-color: blue; 
 
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<div id="menu_container"> 
 
    <div id="sidebar_menu"> 
 
    <div class="dropdown"> 
 
     <div id="login_picture" class="dropbtn">LOGIN</div> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Website Login Box Display Here</a> 
 
     </div> 
 
     <div id="register_picture" class="dropbtn">REGISTER</div> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Register Here</a> 
 
     </div> 
 
     <div id="password_picture" class="dropbtn">LOST PASSWORD?</div> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Get Password Here</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ich benutze verschiedene Farben, um es zu verstehen, damit es hoffentlich hilft.

Answer 1

Sie können: vor, um es zu archivieren.

.dropbtn:before { 
    content: ""; 
    display: inline-block; 
    background-color: red; 
    width: 20px; 
    height: 20px; 
    margin-right: 5px; 
} 

Jsfiddle

Answer 2

ein Symbol als Hintergrund hinzufügen, die Sie verwenden können:

background: url('http://image.flaticon.com/icons/png/512/131/131974.png') no-repeat blue 90% center; 
    background-size: 20px; 

die URL der Bilddatei und Hintergrund-Größe ist gerade für diese exemple.