转 http://www.lovelucy.info/custom-icons-for-twitter-bootstrap.html
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 代码了。
|
保存上面的雪碧图 famfamfam-icons.png,以及 cus-icons.css
三、与 Bootstrap 整合使用
默认情况下,在 bootstrap 中我们以 icon-xxx 的形式来使用图标。现在,我们以 cus-xxx 来调用自定义的图标。只需要在 cus-icons.css 里加上下面几段:
|
大功告成!
想看实际效果?查看 Demo 页。
———————- 正文结束,下面是思考人生时间。割割更健康 ———————-
总结
Bootstrap 是一套前端开发利器,它可以帮助我们加速项目开发,让样式和交互拥有一致的设计和实现方法。于是开发者不需要在外观上花费过多时间,能将精力集中于更重要的功能。Sroan 曾经问我:“大家都用这套框架,那做出来网站岂不是都长得一样了?”
确实,如果完全采用 Bootstrap 的默认样式,就会有很多界面元素雷同。但我们终究是要写自己的 CSS 样式的,不然,不论用什么框架,总会有雷同的问题。Bootstrap 带来的只是一套前端规范和开发约束,它定义了我们的合作方式,让界面元素的命名有规律可循。更何况任何人都可以基于 Bootstrap 建立可扩展的前端工具包,或者在它的基础上启动属于自己的框架。自定义图标就是一个开始。