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.
You can use :before to archive it.
.dropbtn:before {
content: "";
display: inline-block;
background-color: red;
width: 20px;
height: 20px;
margin-right: 5px;
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.