-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Bootstrap Site Blueprints

You might note that the icons appear visually heavier than their adjacent text. The color is the same, but the icons carry greater visual weight. Let's adjust the icons to a lighter and less overpowering shade.
Open _navbar.less
in your editor.
Search to find the selector .navbar-default
. We have used this class in our navbar markup to apply default styles. You should find it under the commented section for // Alternate navbars
.
Within this nested set of rules, find the selector .navbar-nav
and the > li >
selector nested beneath it. This is where we want to adjust our icon colors.
Under the statement defining nav item link colors, we'll nest a rule to make our icons a lighter shade, using our variable @gray-light
, as follows:
.navbar-nav { > li > a { color: @navbar-default-link-color; .icon { // added rule set color: @gray-light; }
The generic class icon proves to be a handy way to select all of our icons.
I've begun adding...