为bootstrap添加更多自定义图标

From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731

Twitter Bootstrap 真是前端开发的瑞士军刀，做为基于 HTML，CSS 和JavaScript 的简洁灵活的前端框架及交互模块集合，让我这样的半吊子 PHPer 都能很轻松地写出一张还算漂亮的页面来。干净整洁有木有！小清新有木有！Web 后端都逆袭了有木有！

Bootstrap 默认自带了由 Glyphicons 提供的 140 个灰/白图标，很好看，然而，很不够用啊！没法知足项目饥渴的需求啊！连个电话的图标都没有，哥曾经在推上@这套图标的做者，过了大概 5 个月这哥们 回复我 说那个 phone icon 作好了。。。

FamFamFam Silk Icon 是一套免费的图标，它包含了 1000 多个精美的彩色的 icons（所有图标一览）。若是能用 Bootstrap 的方式来调用这些图标，使用到咱们的项目中，确定能把需求所有知足了。

1、下载 FamFamFam 图标

下载：点击下载

2、合并雪碧图

并非全部的 1000 多枚图标咱们都用得上，为了减少图片大小，咱们从下载的图标中挑出咱们须要的，而后进行 Sprite 在线合并。

1. 打开这个网站：http://spritegen.website-performance.org/
2. 选择你要合并的图标准备上传
3. 修改如下配置

• Build Direction: Horizontal
• Horizontal Offset: 5px
• Vertical Offset: 5px
• CSS Prefix: cus-

4. 提交上传

大约 30 秒后，咱们就能获得合并后的雪碧图，以及相关 CSS 代码了。

...
cus-world<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_add<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-21px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_delete<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-42px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_edit<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-63px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_go<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-84px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_link<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-105px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-wrench<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-126px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-wrench_orange<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-147px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
...

　　

大功告成！

想看实际效果？查看 Demo 页。

总结

Bootstrap 是一套前端开发利器，它能够帮助咱们加速项目开发，让样式和交互拥有一致的设计和实现方法。因而开发者不须要在外观上花费过多时间，能将精力集中于更重要的功能。Sroan 曾经问我：“你们都用这套框架，那作出来网站岂不是都长得同样了？”

确实，若是彻底采用 Bootstrap 的默认样式，就会有不少界面元素雷同。但咱们终究是要写本身的 CSS 样式的，否则，不论用什么框架，总会有雷同的问题。Bootstrap 带来的只是一套前端规范和开发约束，它定义了咱们的合做方式，让界面元素的命名有规律可循。更况且任何人均可以基于 Bootstrap 创建可扩展的前端工具包，或者在它的基础上启动属于本身的框架。自定义图标就是一个开始。