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

手机扫描二维码

天乐博客
PREV
NEXT

Font Awesome字体图标的使用

天乐博客•2017-01-21•未分类• 2743

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/