Twitter Bootstrap 真是前端开发的瑞士军刀，作为基于 HTML，CSS 和JavaScript 的简洁灵活的前端框架及交互模块集合，让我这样的半吊子 PHPer 都能很轻松地写出一张还算漂亮的页面来。干净整洁有木有！小清新有木有！Web 后端都逆袭了有木有！
Bootstrap 默认自带了由 Glyphicons 提供的 140 个灰/白图标，很好看，然而，很不够用啊！无法满足项目饥渴的需求啊！连个电话的图标都没有，哥曾经在推上@这套图标的作者，过了大概 5 个月这哥们 回复我 说那个 phone icon 做好了。。。
FamFamFam Silk Icon 是一套免费的图标，它包含了 1000 多个精美的彩色的 icons（全部图标一览）。如果能用 Bootstrap 的方式来调用这些图标，使用到我们的项目中，肯定能把需求全部满足了。
一、下载 FamFamFam 图标
下载：点击下载
二、合并雪碧图
并不是所有的 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{ background-position: 0 0; width: 16px; height: 16px; } cus-world_add{ background-position: 0 -21px; width: 16px; height: 16px; } cus-world_delete{ background-position: 0 -42px; width: 16px; height: 16px; } cus-world_edit{ background-position: 0 -63px; width: 16px; height: 16px; } cus-world_go{ background-position: 0 -84px; width: 16px; height: 16px; } cus-world_link{ background-position: 0 -105px; width: 16px; height: 16px; } cus-wrench{ background-position: 0 -126px; width: 16px; height: 16px; } cus-wrench_orange{ background-position: 0 -147px; width: 16px; height: 16px; } ...
|
保存上面的雪碧图 famfamfam-icons.png，以及 cus-icons.css
三、与 Bootstrap 整合使用
默认情况下，在 bootstrap 中我们以 icon-xxx 的形式来使用图标。现在，我们以 cus-xxx 来调用自定义的图标。只需要在 cus-icons.css 里加上下面几段：
/* icons */ [class^="cus-"], [class*=" cus-"] { display: inline-block; width: 17px; height: 16px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("icons/famfamfam-icons.png"); background-position: 14px 14px; background-repeat: no-repeat; } [class^="cus-"]:last-child, [class*=" cus-"]:last-child { *margin-left: 0; } /* icons code below */ .cus-accept{ background-position: 0 0; } .cus-add{ background-position: -21px 0; } .cus-anchor{ background-position: -42px 0; } .cus-application{ background-position: -63px 0; } ......
......
......
|
大功告成！
