[英]How to add icon into div menu
由于我创建的菜单是不同的,因此我似乎无法找出合适的标签/位置来设置图标。 我尝试了不同的解决方案,但它弄乱了菜单中其余的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>
我使用不同的颜色使其更易于理解,希望对您有所帮助。
您可以使用:before存档。
.dropbtn:before {
content: "";
display: inline-block;
background-color: red;
width: 20px;
height: 20px;
margin-right: 5px;
}
要添加图标作为背景,可以使用:
background: url('http://image.flaticon.com/icons/png/512/131/131974.png') no-repeat blue 90% center;
background-size: 20px;
url是您的图片文件,background-size仅用于此示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.