如何在div菜单中添加图标

Question

Since the menu I've created is different, I can't seem to figure out an appropriate tag/place to set up an icon. I've attempted different solutions, but it messed up the rest of the css in the menu.

This is what I would like to use as an "image" temporally. Would like to learn what I can do to make this menu better to support the icons.

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

Once a solution has been found, I will replace the

background-color: red;

with

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

Trying to add an image icon to the left of the text (LOGIN, REGISTER, LOST PASSWORD?)

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

I use different colors to make it easier to understand, so hopefully it help.

Answer 1

You can use :before to archive it.

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

Jsfiddle

Answer 2

to add an icon as a background you can use :

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

the url is your image file and background-size is just for this exemple.