利发国际lifa222 » 网络应用 » 利用Font Awesome为网页添加图标字体

利用Font Awesome为网页添加图标字体

 
Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。 fontawesome_thumb
主要特色:
  1.  一种字体,369个图标,是网页操作的象形语言;
  2.  纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果;
  3.  无限缩放,矢量图标在任何尺寸下都一模一样;
  4.  免费使用,包括商业和非商业项目;
  5.  支持 Internet Explorer 7 浏览器;
  6.  能够在 Retina 屏幕完美呈现;
  7.  完全兼容 Twitter Boostrap 最新版本;
  8.  对设计师友好,设计师能够轻松使用;
  9.  和其它图标字体不同,兼容屏幕阅读器;
使用方法: 1、下载Font Awesome 2、解压下载的压缩文件,将解压后的文件夹font-awesome整个上传到网站FTP中(我这里用的wordpress,上传到了主题目录下)。 3、在header.php文件中引入图标字体的css,因为我是将上述文件放在wordpress主题目录下的,因此引入代码为:
1 <link rel="stylesheet" type="text/css" media="all" href="http://bearingbid.com/quot;<?ph" bloginfo('template_url'); ?>/font-awesome/css/font-awesome.min.css" />
4、然后在需要图标的地方添加对应图标字体的css类即可(比如在'利发国际lifa222'前面加):
1 <i class="fa fa-home"></i>利发国际lifa222
font-awesome各种图标具体css类见官网
QQ截图20150319220456
原文链接:利用Font Awesome为网页添加图标字体,转载请注明来源!
2