如何在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

您可以使用：before存檔。

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

傑斯菲德爾

Answer 2

要添加圖標作為背景，可以使用：

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

url是您的圖片文件，background-size僅用於此示例。