"Horizontal Icon on Dropdown"
Bootstrap 3.0.0 Snippet by NaszvadiG

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <section class="nb-demo"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="dropdown iconic-dropdown"> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> Icons <i class="fa fa-caret-down"></i> </a> <ul role="menu" class="dropdown-menu list-inline"> <li> <a href="#"><i class="fa fa-comments"></i></a> </li> <li> <a href="#"><i class="fa fa-rss"></i></a> </li> <li> <a href="#"><i class="fa fa-code"></i></a> </li> <li> <a href="#"><i class="fa fa-calendar"></i></a> </li> <li> <a href="#"><i class="fa fa-link"></i></a> </li> <li> <a href="#"><i class="fa fa-file"></i></a> </li> </ul> </div> </div> </div> </div> </section> </body> </html>
.nb-demo{ padding: 40px 0px; } .iconic-dropdown .dropdown-toggle{ padding: 10px 12px; border: 1px solid #f0f0f0; background: #607D8B; color: #ddd; border-radius: 0; } .iconic-dropdown .btn-default.active, .iconic-dropdown .btn-default.focus, .iconic-dropdown .btn-default:active, .iconic-dropdown .btn-default:focus, .iconic-dropdown .btn-default:hover, .iconic-dropdown .open>.dropdown-toggle.btn-default{ background: #435F6D; color: #fff; border:1px solid #f0f0f0; } .iconic-dropdown .dropdown-menu{ min-width: 0; margin-top: 10px; box-shadow: 1px -1px 20px #eee; padding: 0; border-radius: 0; border: 1px solid #f0f0f0; } .iconic-dropdown .dropdown-menu:before{ content: ""; position: absolute; display: inline-block; top: -7px; left: 4px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #fff; } .iconic-dropdown .dropdown-menu:after{ content: ""; position: absolute; display: inline-block; top: -6px; left: 5px; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid #FFFFFF; } .iconic-dropdown .dropdown-menu li{ padding: 0; margin-left:-5px; } .iconic-dropdown .dropdown-menu>li>a{ padding: 7px 15px; border-left: 1px solid #f0f0f0; display: block; margin: 0; color: #607D8B; background: #fff; } .iconic-dropdown .dropdown-menu>li>a:hover{ background: #607D8B; color: #fff; } .iconic-dropdown .dropdown-menu li:first-child{ margin-left: 0; } .iconic-dropdown .dropdown-menu li:first-child a{ border-left: none; }

Related: See More

Paper Kit
Navbar with Social icon & Dropdown
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations

Questions / Comments: