Adding Icons to Bootstrap Drop Down Menu Items

Adding icons to a Bootstrap dropdown

Put the icons inside the anchor tags:

<ul>    <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>        <ul class="dropdown-menu">            <li><a href="#"><i class="icon-arrow-up"></i> Up</a></li>            <li><a href="#"><i class="icon-arrow-down"></i> Down</a></li>            <li><a href="#"><i class="icon-arrow-left"></i> Left</a></li>            <li><a href="#"><i class="icon-arrow-right"></i> Right</a></li>        </ul>    </li></ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script><link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

How can i add icon to bootstrap dropdown

For a button, the icon needs to go inside the button as the button's contents, so instead of <button type="button" class="glyphicon glyphicon-cog"></button>
it should be

<button type="button" class="btn">
    <span class="glyphicon glyphicon-cog"></span>
</button>

Edit: to add the caret in Bootstrap, you use <span class="caret"></span>

So the end result to get a button with a cog and dropdown caret is:

<button type="button" class="btn">
    <span class="glyphicon glyphicon-cog"></span><span class="caret"></span>
</button>

When I paste that code into Bootstrap's homepage, I get this:

Changing Dropdown Icon on Bootstrap 4

You have to hide the caret icon like this..

.dropdown-toggle::after {
    display: none;
}

Then add the fontawesome icon..

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
</button>

http://codeply.com/go/xd2b75iUbM

OR, just remove the dropdown-toggle class from the button as it's only purpose seems to be showing the caret icon.

Adding icons to bootstrap drop down menu items

This will work. Unfortunately it seems that you need to use !important on the background-image which is usually best to try to avoid. Note, nth-of-type is not supported in some older browsers.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

/* First Menu Item */
.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

/* Second Menu Item */
.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

JS Fiddle: http://jsfiddle.net/syVk8/

EDIT: Ok, after a little clarification it turns out you don't want the text shifting over at all. Here is a similar example with no padding on the left and a class called 'ok' that you can apply to different menu items to add the checkbox (or whatever your icon might be):

li.ok { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
}

JS Fiddle: http://jsfiddle.net/syVk8/2/

Adding a icon to React Bootstrap Dropdown

React Bootstrap allows you to customise Dropdown by passing in custom subcomponents. To customise the toggle button, you can use:

// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={e => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {/* Render custom icon here */}
    ▼
    {children}
  </a>
));

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

Docs

Bootstrap dropdown select with icons

Here's an example how to do it, you can use css skills to modify dropdown button to look like select, and dropdown menu you can fix max-height and allow overflow to scroll, and it will act as select for you.

I've added jquery & little css and fixed just a litle of your html.
I've used attributes to put image at option, and later rendered it through jquery in dropdown list menu item.

Also there are comments in code (i hope you will learn somethign from this).

Also there's numerous plugins that have possibility of doing what you need and even mroe then that.

function _smartSelectWithImage(select) {
  // check if select already initialized, if it was just exit
  if (select.hasClass('initialized')) return;
  
  // hide select (d-none) and add class that we know its initialized
  select.addClass('d-none initialized');
  
  // starting creating dropdown
  let d = '<div class="dropdown u008">';
    d += '<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Choose...</button>';
    d += '<ul class="dropdown-menu">';
    
    // looping through options of select and gather information we need
  select.find('>option').each(function(){
    let value = $(this).attr('value');
    let image = $(this).attr('data-image');
    let text = $(this).text();
    
    // if theres value in option, create menu item for dropdown
    if (typeof value!=='undefined')
        d += '<li><a class="dropdown-item" href="javascript:void(0);" data-value="'+value+'"><img src="'+image+'" /> '+text+'</a></li>';
  });
  d += '</ul></div>';
  let $html_d = $( d );
  
  // insert our newly create html just after our select
  $html_d.insertAfter(select);
  
  // on click our item, we change our select value
  // and we can simply ask our select for current selected value
  $html_d.on('click', '.dropdown-menu>li', function(){
    // update our select with current value
    select.val($(this).find('>a').attr('data-value'));
    
    console.log( "Selected", select.val() );
    
    // on select, show button currently selected item
    $html_d.find('>button').html( $(this).find('>a').html() );
  });
}

// At dom ready we search for all selects and trigger them through our newly created function
$(function(){
  $('body').find('select').each(function(){
    _smartSelectWithImage($(this));
  });
});

.u008.dropdown { width: 100%; position: relative; }
.u008 > button, 
.u008 > button:hover, 
.u008 > button:focus, 
.u008 > button:active {
  width: 100%; 
  background: transparent !important;
  color: #000 !important;
  text-align: left;
}
.u008 > .dropdown-menu {
  left: 0px !important;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

<!DOCTYPE html>
<html>
<html>

<head>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1" data-image="https://img.icons8.com/offices/30/null/form.png">One</option>
    <option value="2" data-image="https://img.icons8.com/offices/30/null/form.png">Two</option>
    <option value="3" data-image="https://img.icons8.com/offices/30/null/form.png">Three</option>
  </select>
</div>
</body>

</html>

How to replace Bootstrap dropdown-toggle icon with another default icon?

You might change the default values to the following:

.dropdown-toggle {  font: 400 1.5rem/1.25 sans-serif;  color: white;  background: purple;  padding: .5em 1em;}
.dropdown-toggle::after {  display: inline-block;  width: .3em;  height: .3em;  margin: -.3em 0 0 .4em;  vertical-align: middle;  content: "";  border: .3em solid;  border-width: 0 .15em .15em 0;  transform: rotateZ(45deg)}

<span class="dropdown-toggle">CUSTOMERS</span>

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

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

---

Related Topics