来使用font-awesome吧,可以部分抛弃png了

字体图标

1.什么是字体图标

一般我们如果设置一个span或者是i的背景的时候都会用图片.但是今天我们学习一种更方便更好用的一个东西,就叫做:字体图片.
那么为什么要使用字体图标这个东西呢?这个才是我们最关心的东西.她有什么优点值的我们去学习?见下面的分析:
为什么我要使用font-awesome

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。
优点:
相对于传统的使用背景图片作为图标,字体图标主要是

  • 支持自适应
  • 可以使用字体的各种特性(比如变色、变大变小、字体阴影等)
  • 减少数据加载,可以提高页面的加载速度.
  • 样式更容易定义等

2.关于字体图标的特性认识

由于字体图标使用的是svg来做的,所以是矢量图.在任何分辨率下面都不会失真.即使是苹果的视网膜屏幕,效果依然完美,赞一个.
下面是字体图标的特性列表:

  • 一个字体文件,369 个图标,现在更多.
  • 不需要javascript要求:更快的载入速度.
  • 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒.SVG技术.
  • 自由免费:你可以将它应用到你的商业中。
  • CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
  • 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
  • 为BootStrap而生:完全的兼容BootStrap新版3.0
  • 桌面友好:你可以查看字体的样式列表- 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

3.如何应用

上面已经介绍了很多关于字体图标的知识了,那么如何在项目中进行应用呢?很简单,看下面的链接
Font-awesome
点击上面的链接即可访问font-awesome 官网,获取更多帮助!

1.只需要去官网下载包,然后放到你的项目中就可以了.点我下载,然后在你的html头部的head里面添加对相应的font-awesome的样式.

//导入对应的CSS文件
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2.按照这里的案例开始你的项目点我开始学习如何使用到你的项目中
3.如需兼容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]-->

结束语

关于字体图片今天我们就学到这里,这篇博文权当抛砖引玉.还需要多多练习…say you soon…

    原文作者:毛毛家的大熊
    原文地址: https://www.jianshu.com/p/4fb346c4c446
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞