字体图标
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...
网友评论