...">
Geek Answers Handbook

How can I add a dropdown menu icon

I have this code

<div class="btn-group" dropdown> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Split button!</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

which looks like

enter image description here

I want to add an icon like cog insteaqd from text like this

enter image description here

I tried this

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

but does not work

+7
html css3 twitter-bootstrap glyphicons
source share
3 answers

For a button, the icon should be inside the button as the contents of the button, 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 a <span class="caret"></span> to Bootstrap, you use <span class="caret"></span>

Thus, the final result, to get a button with a hexadecimal and drop-down menu, looks like this:

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

When I paste this code into the Bootstrap homepage, I get the following: cog button

+9
source share
 <div class="btn-group" dropdown> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-cog"></span></button> <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> <span class="caret"></span> <span class="sr-only">Split button!</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

You can use this code

+1
source share

Just add this span tag.

 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>

See DEMO

0
source share

More articles:


All Articles