Font Awesome 4.0.3 提供了369个网页经常使用的矢量字体图标,新浪、人人 的矢量图标也到其中哟

要求

    • 必备知识

      本文要求基本了解html与css前端代码。css

    • 运行环境

      普通浏览器,兼容IE7html

    • 源码下载

      下载地址前端

 

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

2014-03-29_022343

一,主要特色以下:

1,一个字体,369个图标github

2,无须要使用JavaScriptbootstrap

3,经过CSS自定义图标的大小,颜色,阴影浏览器

4,用户界面友好编辑器

5,支持 Internet Explorer 7 浏览器字体

6,可以在 Retina 屏幕完美呈现spa

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

8,可扩展性强

9,文档完善

10,免费

 

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

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

2014-03-29_023542

2,表单控件图标

2014-03-29_023653

3,货币图标

2014-03-29_023653

4,文本编辑器的图标

2014-03-29_023653

5,网页定向图标

2014-03-29_023653

6,播放器图标

2014-03-29_023653

7,品牌图标

2014-03-29_132250

三,使用方法

方式一:

此方法使用最为简单,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/

完整图标列表请查看这里

 

如以上文章或连接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也能够点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。

 

做者: Li-Cheng
本文版权归做者和博客园共有,欢迎转载,但未经做者赞成必须保留此段声明,且在文章页面明显位置给出原文链接,不然保留追究法律责任的权利。
相关文章
相关标签/搜索