Icon for web

Icon for web

Icon 前端 FontAwesome iconfont

　　最近的几个项目中，频频出现了一个icon的头疼问题，虽然以前遇见过，使用过，但是没有好好的整理、记录下来，造成在项目中浪费了不少时间。这太不符合我的做人宗旨了-一分钟能解决的问题决不能给他两分钟。不废话，直奔主题。纯属小记，不对之处还请拍砖指点。

 

Font Awesome

　　FontAwesome 提供丰富的矢量字体图标，还在不断更新中。通过CSS可以任意控制所有图标的大小 ，颜色，阴影。

特性：

  1. 无需javascript

  2. css可控性

  3. 最低兼容ie7（很可惜，官方提供的只是3.2.1版本）

  4. 可以在高分辨率显示器中完美显示

  5. 可以应用于各种UI

  6. 兼容屏幕阅读器

  7. 重点是，完全免费

　　个人认为，3.2.1 全套361个图标已经够用了，而且兼容ie7。但是ie7的用户量大家是知道的，基本上可以忽略，现在高速发展的互联网技术，硬件的更新换代，高级浏览器普及，完全可以让我们安心的去追求新技术而取舍一些东西。那么，我们就可以去使用FontAwesome最新版本，图标不断更新中。比起精灵技术，FontAwesome也是完美胜出，项目中，上头上个厕所冒出来一个想法，估计精灵得去趟韩国了。

使用

  1. Font Awesome官网下载最新压缩包然后解压到你的项目中。

  2. 在 标签 里, 引入 font-awesome.min.css.

  3. 参考案例开始项目

  4. 如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

 

<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->

　　

关于3.2.1

　　3.2.1下载地址
　　如何兼容ie7官方 点击查看
　　3.2.1 图码参照 点击查看

　　使用过程中要注意版本要对上号，查看对应代码，最新的图码参照，经常会有小伙伴用着3.2.1版本然后去找4.3的图标。 
作为字体，当然能安装到系统中去。安装 FontAwesome.otf 文件到你的系统中。 然后，拷贝并粘贴图标字体的代码到你的草图或设计中就能看到效果了！参考官网。当然，作为前端，可以不用去关心这个。 
当然作为电商业务的小伙伴可能就会特别关注iconfont。后续我会继续去关注和学习iconfont。

　　总结，还是那句话，好记性不如烂笔头，生活多记录，积累点滴，成长自然而然。感谢豪哥 @豪情的指点和帮助，前端路上我不会停步。

posted @ 2015-06-23 17:55  汇品铺子  阅读(191)  评论(0)  编辑  收藏  举报