如何在 CSS 的下拉列表中添加圖標？

Question

嗨，我正在使用 Html 和 CSS 開發導航欄。 在右側，我希望在下拉列表中有圖標，如下所示。

我正在嘗試如下完成它。

<div className="dropdown">
     <button className="dropbtn">John Doe</button>
     <div className="dropdown-content">
        <a href="#">Settings & Configurations</a>
        <a href="#">Logout</a>
     <div>
</div>

下面是我的 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);
}

我正在嘗試添加一個通知欄和帶有顯示用戶圖標的圖標的下拉菜單。 有人可以在這方面幫助我。 任何幫助，將不勝感激。 謝謝

Answer 1

如果你想在下拉列表中有一個圖標，你可以試試這個例子：

   <!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>

只需將圖標更改為您的喜好

Answer 2

您好先生如果您不想使用引導程序，您可以執行以下操作。 想象一下這是您的下拉列表：

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

和 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;
}

我從 W3 學校復制了這個例子，所以如果你有自己的下拉列表，你也可以使用它。 然后添加圖標更改下拉列表如下：

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

根據您想要圖標的位置，您可以將它們放在文本之前（就像下拉列表中的前 2 項一樣）將它們向左對齊並且您可以將它們放在文本之后（就像下拉列表中的最后 2 項一樣-list) 將它們向右對齊。 但是要使這一切成為可能，您需要將此鏈接放在 head 元素的 title 屬性下：

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

在那里你 go 現在你的下拉列表項目將有帶有文本的圖標。要獲取更多圖標 go 到以下鏈接：

https://www.w3schools.com/icons/icons_reference.asp

如何在 CSS 的下拉列表中添加圖標？

問題描述

2 個解決方案

解決方案1
3 已采納 2020-05-21 07:45:31

解決方案2
0 2020-05-21 08:24:24

如何在 CSS 的下拉列表中添加圖標？

問題描述

2 個解決方案

解決方案1 3 已采納 2020-05-21 07:45:31

解決方案2 0 2020-05-21 08:24:24

解決方案1
3 已采納 2020-05-21 07:45:31

解決方案2
0 2020-05-21 08:24:24