Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦。

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_矢量图

一,主要特点如下:

1,一个字体,369个图标
2,无需要使用JavaScript

​3,通过CSS自定义图标的大小,颜色,阴影​

4,用户界面友好

​5,支持 Internet Explorer 7 浏览器​

​6,能够在 Retina 屏幕完美呈现​

​7,和其它图标字体不同,兼容屏幕阅读器​

8,可扩展性强

​9,文档完善​

​10,免费​

二,图标类型下面简单罗列一下吧,这里只列出了部分,完整图标列表请查看这里:

1,Web应用程序常用图标:

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_自定义_02

2,表单控件图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_自定义_03

3,货币图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_css_04

4,文本编辑器的图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_矢量图_05

5,网页定向图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_矢量图_06

6,播放器图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_矢量图_07

7,品牌图标

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标_矢量图_08

三,使用方法

​方式一:​

此方法使用最为简单,BootstrapCDN 方式

在自己网页的head标签中引入如下代码即可,不需要下载和安装任何东西即可使用:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

​方式二:​

此方式需要下载 Font Awesome项目文件夹

将Font Awesome 目录 拷贝到你的项目中,然后在head标签中引入如下代码:

<link rel="stylesheet" href=" your project(你的项目路径)/font-awesome/css/font-awesome.min.css">

具体如何在网页中添加这些矢量图标请查看如下地址:

http://fortawesome.github.io/Font-Awesome/examples/

完整图标列表请查看这里