在 img 文件夹里找到 logo.png 文件。你会发现这个图片非常大，有900px 宽。在我们最终的设计中，这个Logo只有120px宽。因为多出来的像素将被压缩到较小的空间内，所以这也是让图片在所有设备（包括视网膜屏设备）中保持清晰的一种简便方法。与此同时，这个图片的尺寸也针对Web进行了优化，只有19 KB。
下面就把它放置到位并限制其宽度。
(1) 在html文档中找到导航条标记中的这一行代码：
复制代码 代码如下:
<a href="https://www.jb51.net/index.html">Bootstrappin'</a>
(2) 把其文本 Bootstrap' 替换成 img 标签，并添加 alt 和 width 属性。其修改后的代码为：
复制代码 代码如下:
<a href="https://www.jb51.net/index.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /></a>
(3) 保持后并刷新浏览器，可以看到Logo已经出现在了相应的位置上。
9.调整导航项内边距
现在，我们来调整一下导航项，以便文本与Logo位于同一基线之上。
(1) 在 less 文件夹下，新建文件_navbar.less，并把其Bootstrap的navbar.less 文件内容拷贝进去。
(2) 在 _navbar.less 中，找到选择符.navbar-nav，这是导航项的父元素 ul。在相应的规则里，可以看到嵌套的媒体查询。（关于媒体查询，可以参考LESS文档：）。
(3) 相关的行如下所示：
// Uncollapse the nav @media (min-width: @grid-float-breakpoint) { float: left; margin: 0; > li { float: left; > a { padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; } } }
这里的变量@grid-float-breakpoint 指定了一个临界宽度，大于这个宽度，导航条就会扩展到与屏幕同宽；小于这个宽度，导航条就会折叠起来变成移动应用风格的响应式导航。（这个变量是在_variables.less 中定义的）。
(4) 现在，padding-top 和 padding-bottom 值都是动态计算的，以确保导航中的文本垂直居中。而我们想增加上内边距，减少下内边距。与此同时，我们还要扩大导航项的间隔，再把字体增大一些。把原来的代码使用单行注释，把需要的规则写在下面：
> a { //padding-top:@navbar-padding-vertical; //padding-bottom: @navbar-padding-vertical; padding:30px 30px 14px; font-size:18px; }
(5) 保存、编译并刷新浏览器，可以看到显示效果如下：
10.添加图标
现在轮到为导航项添加图标了。我们直接使用 Bootstrap 自带的 Glyphicons，然后尝试下 Font Awesome 这个大型图标库。
PS:此组件的官方文档地址：（中文文档：）
我们先从 Home 导航项开始。
(1) 要给 Home 导航项添加 Glyphicons Home 图标，只要在文本之前添加一个 span 标签，再加上特定的类即可：
复制代码 代码如下:
<li> <a href="https://www.jb51.net/index.html"> <span></span> Home</a></li>
(2) 保存并刷新浏览器，可以看到图标。
(3) 如果没看到字体，请确保：
□ Glyphicon 字体位于 fonts 文件夹；
□ 变量文件 _variables.less 中的 @icon-font-path 值正确。本例的是@icon-font-path:"../fonts/"：
(4) 接着给剩下的导航项添加对应的图标。以下依此是 Portfolio、Team 和 Contact 的导航项代码：
<li><a href="#"><span></span> Portfolio</a></li> <li><a href="#"><span></span> Team</a></li> <li><a href="#"><span></span> Contact</a></li>
(5) 保存并刷新，可以看到效果：
(6) 对应的折叠后的响应式效果：
还不错。
不过，这里的图标与设计方案中的并不完全一致。设计方案中的是这样的：
Bootstrap 中免费使用的 Glyphicons 不包含计算器显示器和群组图标。此外，我们也没有从 Glyphicons 图标中找到适合页脚中社交媒体链接的图标。
好在，我们还有别的选择。
11.添加 Font Awesome 图标