利用Font Awesome为网页添加图标
Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。
主要特色:
- ✓ 一种字体,369个图标,是网页操作的象形语言;
- ✓ 纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果;
- ✓ 无限缩放,矢量图标在任何尺寸下都一模一样;
- ✓ 免费使用,包括商业和非商业项目;
- ✓ 支持 Internet Explorer 7 浏览器;
- ✓ 能够在 Retina 屏幕完美呈现;
- ✓ 完全兼容 Twitter Boostrap 最新版本;
- ✓ 对设计师友好,设计师能够轻松使用;
- ✓ 和其它图标字体不同,兼容屏幕阅读器;
使用方法:
解压下载的文件,放至一定目录,通过css引入使用。
例如:本博客的菜单列表前置图标就是通过该字体库达到的;
首先在header.php中引入,我是将上述文件放在主题目录下的,因此引入代码为:
/font-awesome/css/font-awesome.min.css?ver=4.0.1' type='text/css' media='all' />
然后在wordpress后台-菜单编辑中设置某个菜单比如首页的导航标签属性为:
首页
font-awesome各种图标具体css类见官网