私人订制
企业网站电商建设解决方案

Font Awesome:一套绝佳的图标字体库和CSS框架

Font Awesome是一种web font,它包含了几乎网站所有常用的图标,比如Twitter、facebook等等。用户可以自定义这些图标字体,包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。

fontawesome

fontawesome

优点:
1、像矢量图形一样,可以无限放大
2、只需一种字体,同时拥有多个图标,目前支持400多个图标
3、无需考虑兼容性问题,fontawesome不依赖于javascript
4、通过CSS可以任意控制所有图标的大小 ,颜色,阴影。
5、由于fontawesome是矢量字体,可以完全兼容视网膜屏
6、能和Bootstrap等常用UI框架一起使用,良好兼容性
7、可以用于桌面应用中
8、不像其它字体那样, 它可以兼容屏幕阅读器。

缺点:
1、对IE6等浏览器兼容性不是很好,不过最新版本的Font Awesome和IE7完美兼容
2、要想用fontawesome,需要引入相关的字体文件,增加了网页大小

安装方法:

1、从官网下载Font Awesome字体包,目前最新版是4.5.0。
2、复制安装包里面的fonts文件夹和css文件夹至自己网站文件夹根目录。
3、用编辑器打开自己的网站主页文件,一般为 index.html 或 index.php ,引用刚才复制的css文件夹中的 font-awesome.css 文件或 font-awesome.min.css 文件(后者为前者的压缩版,可以放在服务器上)。方法是在 <head> 与 </head> 之间输入如下代码:

<link href=”css/font-awesome.min.css” rel=”stylesheet” type=”text/css”>

css里面的内容
.fa-lemon-o:before {
content: “\f094″;
}
.fa-phone:before {
content: “\f095″;
}

一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!

  1. 将以下代码粘贴到网页HTML代码的 <head> 部分.
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    

4、然后就可以使用图标字体,使用时先参照官网的 图标和代码对照页面 ,然后输入相应的代码即可。举例:
我要使用Facebook的图标,只需要在相应的位置输入 <i class=”fa fa-facebook-square”></i> 即可。

下载Font Awesome (4.5.0)

详细官方网址:
http://fontawesome.io/examples/
http://fontawesome.dashgame.com/

分享到:更多 ()

评论 抢沙发

评论前必须登录!

老翁建站 更专业 更方便

关于我们联系我们