How to add icon inside drop-down list in CSS?

user_4898395 0
Viewed 19779

Hi I am developing Nav bar using Html and CSS. In right side I want to have icon in drop-down list as shown below.

enter image description here

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.

.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

css html
2 Answers

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

user_134688380

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

/* 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. 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. But to make all this possible you need to put this link under the title attribute in the head element:

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

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

user_134688380
Related