Adding clickable help icons to navbar menu items in bootstrap navbar - html

Question

I'm trying to add clickable and hoverable little help icons, which floats to the right side of the corresponding navbar menu item. My problem is that bootstrap applies its styles in a way that it doesn't seem to be a quick easy task.
My icon would be something like this (using FontAwesome):
<span class="navmenu-help-icon"><i class="fa fa-question-circle"></i></span>
My current LESS code for the icon is (based on the styling of the a element):
.navbar-nav > li > .navmenu-help-icon {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
cursor: pointer;
color: white;
background-color: lighten(#navbar-inverse-bg, 20%);
}
I can't wrap the link and my button in a div because bootstrap exepcts the a element as a first level child of its li. If I place my icon after the a, I couldn't figure out how to align them horizontally, it always goes under the link. I guess because the a element's display: block style.
I'm targetting only modern browsers (full CSS3 support expected).
How could I do this?

Answer 1

I'm not sure if this is what you're looking for, but why not simply put the icon inside the a tag, like <li>Help <i class="fa fa-question-circle"></i></li>?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Help <i class="fa fa-question-circle"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Update based on comments (same row icon and text on mobile layout)
To show an icon with another link next to one of the navigation items both in desktop and mobile views, I've added the class nav-iconitem to the these li's. This changes the a tags from display: block to display: inline-block. The li should contain a separate a.nav-iconitem__text tag for the text and a a.nav-iconitem__icon for the icon. The classes nav-iconitem__text and .nav-iconitem__icon are used to change the distance between the text and the icon.
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
.nav > li.nav-iconitem > a {
display: inline-block;
}
.nav > li.nav-iconitem > a.nav-iconitem__text {
padding-right: 0;
}
.nav > li.nav-iconitem > a.nav-iconitem__icon {
padding-left: 0;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-iconitem">Help
<i class="fa fa-question-circle"></i></li>
<li>Regular
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Update based on comments (float icon to the right)
To make the icon float to the right, the easiest way might be to set position: relative to the .nav-iconitem and position: absolute, top: 0 and right: 0 to the .nav-iconitem__icon. As the icon might overlap the .nav-iconitem__text you unfortunately need to add a fixed sized padding-right to the .nav-iconitem.
It might be possible to achieve this with a display: table, but as tables have the tendency to grow you might need a fixed width somewhere anyway. I would prefer having a fixed width on an icon instead of a container containing text.
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
.nav > li.nav-iconitem {
display: relative;
padding-right: 30px;
}
.nav > li.nav-iconitem > a.nav-iconitem__text {
padding-right: 0;
}
.nav > li.nav-iconitem > a.nav-iconitem__icon {
position: absolute;
top: 0;
right: 0;
padding-left: 0;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-iconitem">Help
<i class="fa fa-question-circle"></i></li>
<li>Regular
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>

Answer 2

My final solution was to use the table-cell display mode inside the LI-s where an icon should be displayed. I've allowed myself to place the icon on the left to make things a bit easier.
Here is the LESS source which handles submenus and collapsed mode as well. Note that I use Jasny Bootstrap's Offcanvas navbar, so some part refers to that.
.navbar {
li.with-icon {
& > a {
display: table-cell;
padding-left: 0;
}
& > .navmenu-help-icon {
display: table-cell;
padding: #nav-link-padding;
padding-right: 8px;
line-height: 20px;
cursor: pointer;
color: white;
font-size: 1em;
//background-color: lighten(#navbar-inverse-bg, 20%);
}
}
.dropdown-menu {
li.with-icon {
& > .navmenu-help-icon {
display: table-cell;
padding: 3px 10px;
}
& > a {
width: 99%; // force spanning till right border
padding-left: 0;
}
}
}
.offcanvas.canvas-slid {
li.with-icon {
& > .navmenu-help-icon {
display: table-cell;
padding: #nav-link-padding;
}
& > a {
width: 99%; // force spanning till right border
padding-left: 0;
}
}
}
}
And the HTML markup looks like this:
<li class="with-icon">
<span class="help-icon navmenu-help-icon" title="Some description"><i class="fa fa-question-circle"></i></span>
The link
</li>