如何在 CSS 的下拉列表中添加图标？
[英]How to add icon inside drop-down list in CSS?
问题描述
Hi I am developing Nav bar using Html and CSS.
嗨，我正在使用 Html 和 CSS 开发导航栏。 In right side I want to have icon in drop-down list as shown below.在右侧，我希望在下拉列表中有图标，如下所示。
I am trying as below to get it done.我正在尝试如下完成它。
<div className="dropdown">
<button className="dropbtn">John Doe</button>
<div className="dropdown-content">
<a href="#">Settings & Configurations</a>
<a href="#">Logout</a>
<div>
</div>
Below are my css styles.下面是我的 css styles。
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
I am trying to add one notification bar and drop-down with icon which shows user icon.我正在尝试添加一个通知栏和带有显示用户图标的图标的下拉菜单。 Can someone help me in this regard.有人可以在这方面帮助我。 Any help would be appreciated.任何帮助，将不胜感激。 Thanks谢谢
2 个解决方案
解决方案1
3 已采纳 2020-05-21 07:45:31
If you want to have an icon in the dropdown list you could try this example:如果你想在下拉列表中有一个图标，你可以试试这个例子：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Links for Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown mt-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> <i class="fa fa-home"></i> Home </a>
<a class="dropdown-item" href="#"> <i class="fa fa-address-book"></i> Contact </a>
<a class="dropdown-item" href="#"> <i class="fa fa-bell"></i> Notifications </a>
<a class="dropdown-item" href="#"><i class="fa fa-cog"></i> Setting </a>
</div>
</div>
</div>
</body>
</html>
Just change the icon to your likings只需将图标更改为您的喜好
解决方案2
0 2020-05-21 08:24:24
Hello sir If you don't want to use bootstrap you could do the following.您好先生如果您不想使用引导程序，您可以执行以下操作。 Imagine this is your dropdown list:想象一下这是您的下拉列表：
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a class="dropdown-item" href="#"> Home </a>
<a class="dropdown-item" href="#">Contact </a>
<a class="dropdown-item" href="#"> Notifications </a>
<a class="dropdown-item" href="#"> Setting </a>
</div>
</div>
and the css和 css
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* This align the icon to the right */
#icon{
align-items: right;
}
I copied this example from W3 schools so if you have your own drop down list you can also use that.我从 W3 学校复制了这个例子，所以如果你有自己的下拉列表，你也可以使用它。 Then to add the icons change the dropdown list as follows:然后添加图标更改下拉列表如下：
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a class="dropdown-item" href="#"> <i class="fa fa-home"></i> Home </a>
<a class="dropdown-item" href="#"> <i class="fa fa-address-book"></i> Contact </a>
<a class="dropdown-item" href="#"> Notifications <i class="fa fa-bell"></i></a>
<a class="dropdown-item" href="#"> Setting <i class="fas fa-bars"></i></a>
</div>
depending on where you want your icons you could put them before the text (just as the first 2 items in the dropdown-list) aligning them to the left & you could place them after the text (just as the last 2 items in the dropdown-list) aligning them to the right.根据您想要图标的位置，您可以将它们放在文本之前（就像下拉列表中的前 2 项一样）将它们向左对齐并且您可以将它们放在文本之后（就像下拉列表中的最后 2 项一样-list) 将它们向右对齐。 But to make all this possible you need to put this link under the title attribute in the head element:但是要使这一切成为可能，您需要将此链接放在 head 元素的 title 属性下：
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
There you go now your dropdown-list items will have icons with the text.To get more icons go to the following link:在那里你 go 现在你的下拉列表项目将有带有文本的图标。要获取更多图标 go 到以下链接：
https://www.w3schools.com/icons/icons_reference.asp https://www.w3schools.com/icons/icons_reference.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.