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。


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

原文地址:https://www.cnblogs.com/huipinpuzi/p/4596017.html