Как добавить иконку в меню div

Question

Поскольку меню, которое я создал, отличается, я не могу найти подходящий тег/место для установки значка. Я попытался использовать различные решения, но он перепутал остальную часть css в меню.

Это то, что я хотел бы использовать в качестве «изображения» временно. Хотелось бы узнать, что я могу сделать, чтобы сделать это меню лучше для поддержки значков.

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

После того, как решение было найдено, я заменю

background-color: red; 

с

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

Попытка добавить иконку изображения слева от текста (ВХОД, ЗАРЕГИСТРИРУЙТЕСЬ, ПОТЕРЯННЫЙ ПАРОЛЬ?)

/*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>

Я использую разные цвета, чтобы было легче понять, так что, надеюсь, это поможет.

Answer 1

Вы можете использовать: перед тем, как его заархивировать.

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

Jsfiddle

Answer 2

добавить иконку в качестве фона можно использовать:

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

URL, ваш файл изображения и фон-размер как раз для этого Exemple.