要求

    • 必备知识

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

    • 运行环境

      普通浏览器,兼容IE7

    • 源码下载

      下载地址

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

一,主要特点如下:

1,一个字体,369个图标

2,无需要使用JavaScript

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

4,用户界面友好

5,支持 Internet Explorer 7 浏览器

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

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

8,可扩展性强

9,文档完善

10,免费

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

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

2,表单控件图标

3,货币图标

4,文本编辑器的图标

5,网页定向图标

6,播放器图标

7,品牌图标

三,使用方法

方式一:

此方法使用最为简单,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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标,新浪、人人 的矢量图标也到其中哟的更多相关文章

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

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

  2. php在5.5.0默认提供了Zend OPcache

    eaccelerator无法兼容php5.5.0,好在php在5.5.0默认提供了Zend OPcache,所以一直习惯eaccelerator的朋友如果要升级到php5.5.0的话,可能要暂时和ea ...

  3. Font Awesome 4.0.3 字体图标完美兼容IE7

    1.下载Font Awesome 4.0.3兼容包,http://www.thinkcmf.com/index.php?m=font 2.解压,并放到自己网站系统合适的位置(如果你的站已使用Font ...

  4. MiinCMP1.0 SAE 新浪云版公布, 开源企业站点系统

    MiinCMP是一款开源企业站点系统,除可执行于256M左右100元的国内IDC外,JUULUU聚龙软件团队最近开发了面向新浪云的版本号,该版本号可将站点免费布署到新浪云SAE上.MiinCMP採用j ...

  5. 各大巨头电商提供的IP库API接口-新浪、搜狐、阿里

    新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js     (不可用)新浪多地域测试方法:http://i ...

  6. CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具

    CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说border-radius.gradient.transfrom.animation.transition.rgba.text ...

  7. RabbitMQ调试与测试工具-v1.0.1 -提供下载测试与使用

    最近几天在看RabbitMQ,所以发了两天时间写了一个调试和测试工具.方便使用. 下载地址:RabbitMQTool-V1.0.1.zip

  8. 计算程序运行时间(.net1.1 于.net2.0的区别)在.net2.0中提供了Stopwatch类,简单例子

    1. [代码].NET 2.0      using System.Diagnostics; private Stopwatch stw = new Stopwatch(); private void ...

  9. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

随机推荐

  1. Redis模块开发示例

    实现一个Redis module,支持两个扩展命令: 1) 可同时对hash的多个field进行incr操作: 2) incrby同时设置一个key的过期时间 在没有module之前,需要借助eval ...

  2. How to transfer developer profile to one mac to another mac

    Export developer profile from old mac. In the Xcode Organizer, select your team in the Teams section ...

  3. 将电脑信息上传到中国移动ONENET平台

    用两个小时做的 可以用在服务器远程运维等环境非常方便 需要源码的可以联系NBDX123

  4. Leetcode-448. Find All Numbers Disappeared in an Array(solve without extra space easy)

    Given an array of integers where 1 ≤ a[i] ≤ n (n= size of array), some elements appear twice and oth ...

  5. hdu 4902 线段树+逆向模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=4902 出n个数,然后对这n个数进行两种操作: 如果是 1 l r x,则把 [l, r] 区间里面的每一个数都变 ...

  6. ORA-01653: 表 xxxx 无法通过 8192 (在表空间 USERS 中) 扩展

    Oracle中增加表空间大小的四种方法 1:给表空间增加数据文件 ALTER TABLESPACE app_data ADD DATAFILE ‘D:\ORACLE\PRODUCT\10.2.0\OR ...

  7. EBS中查看其他用户或所有用户的请求和输出文件

      R12: How To Configure Access To Request Output Of The Same Responsibility (Doc ID 804296.1) To Bot ...

  8. 使用PerfView监测.NET程序性能(一):Event Trace for Windows

    前言: 在日常项目开发中,我们时不时会遇到程序占用了很高CPU的情况,可能是程序里某些未经优化的代码或者Bug,或者是程序运行压力太大.无论是什么原因,我们总希望能看到到底是哪个方法占用了如此高的CP ...

  9. 清理MVC4 Internaet 项目模板清理

    新建项目时选择空的MVC项目 是没有Bundle 引用的非常痛苦,但是如果选择Internet模板 MVC4的模板会帮你添加一堆的JQuery 引用  打开NuGet Console 执行以下指令能帮 ...

  10. Regular Expression

    It's a very elegant summary of regular expression from The AWK Programming Language. 1. The regular ...