Add Icon to Bootstrap Dropdown : We sometimes need to add icons to the bootstrap dropdowns. It is very simple to add icons to the dropdown. Here in this tutorial we are going to explain how you can add icons to the bootstrap dropdown. You can use our online editor to edit the code online.
How to Add Icon to Bootstrap Dropdown?
You can add the icons to the bootstrap dropdown simply using the icon’s class as below –
Add Icon to Bootstrap Dropdown Example:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
|
In the above example we have used the bootstrap’s inbuilt icon class to add the icons. We have added Home icon, Settings Icon and Logout icon.
If you run the above example it will produce output something like this –