divメニューにアイコンを追加するには

Question

作成したメニューが違うので、アイコンを設定するための適切なタグ/場所を見つけられないようです。私はさまざまな解決策を試みましたが、それはメニューの残りの部分を混乱させました。

これは私が「画像」として時間的に使用したいものです。アイコンをサポートするためにこのメニューを改善するために私ができることを学びたいと思います。

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

解決策が発見されたら、私はテキスト（LOGIN、REGISTERの左にある画像アイコンを追加しようとし

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

と

background-color: red; 

に置き換えられます、パスワードを忘れましたか？）

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

：beforeを使用してアーカイブすることができます。

.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ためです。