天乐博客
扫描关注天乐博客

手机扫描二维码

Font Awesome字体图标的使用

天乐博客2017-01-21未分类 1532

20141204102325_95581[1].png

Font Awesome介绍

在项目的开发中,我们需要各种不同大小的图标,为解决设计师制作字体图标困难的问题,Font Awesome为我们提供了可缩放的矢量图标,可以被定制大小、颜色、阴影, 和任何可以用CSS的属性。

Font Awesome 特性

  1. 一个字体文件, 479个图标:一个字体文件包含了所有图标,Font Awesome 助你完整表达web页面上每个动作的含义。

  2. 不需要JavaScript要求:更少的兼容性问题,更快的载入速度。

  3. 无限的可扩展性:可定制任何矢量图形,包括大小、颜色、阴影等。

  4. 完全免费,个人、商业均可自由使用:Font Awesome可以使用到你的任何项目中。

  5. CSS控制:用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。

  6. 完美视网膜显示:使用Font Awesome,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。

  7. 为BootStrap而生:最初是为BootStrap设计,现在的Font Awesome可畏之强大。

  8. 桌面友好:可以完美使用到桌面上或一整套的其他传播媒介、你可以查看字体的样式列表。

  9. 兼容屏幕阅读器:Font Awesome 不会阻止屏幕阅读器,这和其他图标字体的行为方式完全不同。

Font Awesome的使用

  1. 下载整个font-awesome目录到您的项目。

  2. 在html的<head>区,引入Font Awesome的css。


    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">


  3. 根据这里的案例开始你的项目。

  4. 如需兼容IE7浏览器,可以使用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]-->

再推荐一款矢量图标库:http://www.iconfont.cn/