要求

    • 必备知识

      本文要求基本了解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. jq+download+文件夹下载

    最近公司在做工程项目,实现文件夹下载. 网上找了很久,发现网上的代码都有相似的问题,不过最终还是让我找到了一个符合的项目. 工程: 进行项目文件夹下载功能分析,弄清楚文件夹下载的原理,提供的数据支持. ...

  2. 开源HIS之C/S选型

    客户端/服务的形式是我中爱的,我认可只有这样软件跑起来不会失控.因为你不知道每一个程序员是否足够清醒.但一开始我说过要从基本的应急的门诊收费开始,所以我并不打算一启动就写一个服务,并为之选型:TCP/ ...

  3. 笔记本真机安装centos7

    突然有一天,想要装linux系统,所以就是去装,网上百度说的都很多,而且说来说去都是那几篇,大同小异,所以想通过自己本次装真机的一些经验提供给各位朋友参考一下. 一安装系统: 1先制作启动盘,用个比较 ...

  4. CentOS 6.5 伪分布安装

    CentOS 6.5 伪分布安装 软件准备  jdk-6u24-linux-i586.bin .hadoop-1.2.1.tar.gz.hadoop-eclipse-plugin-1.2.1.jar ...

  5. Django 数据生命周期

  6. Python自动化开发 - Django【进阶篇】

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  7. 教你通过Node.js漏洞完成渗透测试

    本篇文章较为详细的讲述了通过node.js的已知漏洞来完成渗透测试的过程,介绍了node.js存在的漏洞可以在多种工具下的不同利用方式.因为我认为会对论坛部分web安全新手有所帮助,所以整理到论坛中. ...

  8. [vuejs] 深入响应式原理

    深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...

  9. 不同Mesh技术的比较-总结版

    引言 在过去的几年里,Mesh 网络逐渐变得流行,随之会有越来越多的无线产品面世.Mesh 网络技术作为一种无线自组网技术是物联网的核心技术.物联网的概念现在也逐渐贴近人们的生活, 据预测 2011 ...

  10. postgresql和redis

    redis 和postgresql区别以及其优缺点 一刹那者为一念,二十念为一瞬,二十瞬为一弹指,二十弹指为一罗预,二十罗预为一须臾,一日一夜有三十须臾. 那么,经过周密的计算,一瞬间为0.36 秒, ...