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/

完整图标列表请查看这里

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标的更多相关文章

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

    要求 必备知识 本文要求基本了解html与css前端代码. 运行环境 普通浏览器,兼容IE7 源码下载 下载地址 Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小 ...

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

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

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

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

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

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

  5. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  6. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  7. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  8. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  9. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

随机推荐

  1. IOS 使用dispatch_once 创建单例

    + (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...

  2. Struts2(一)——总体介绍

    这篇博客开始将总结一下有关框架的知识,在开发中合适的利用框架会使我们的开发效率大大提高.当今比较流行的开源框架: 关注数据流程的MVC框架 (Struts1/2, WebWork, Spring MV ...

  3. Tomcat可以在eclipse里启动,可是不能訪问首页的问题

    今天在使用eclipse的时候发现一个问题.就是我在eclipse里面已经启动了tomcat.部署上去的项目也能够启动,可是就是没法訪问tomcat的首页.port等等都没有问题. 后来查到解决方式, ...

  4. 【设计模式:单例模式】使用单例模式载入properties文件

    先准备測试程序: package org.jediael.util; import static org.junit.Assert.*; import org.junit.Test; public c ...

  5. kaggle之电影评论文本情感分类

    电影文本情感分类 Github地址 Kaggle地址 这个任务主要是对电影评论文本进行情感分类,主要分为正面评论和负面评论,所以是一个二分类问题,二分类模型我们可以选取一些常见的模型比如贝叶斯.逻辑回 ...

  6. C# 静态类与非静态类、静态成员的区别分析

    静态类静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例化 ...

  7. ios9基础知识(UI)总结

    UIWindow.UILabel.UIColor.UIScreen.UIViewController.UIView.UIControl.UIButton.IBOutlet.IBAction.UISte ...

  8. MYSQL SET类型字段的SQL查询某个字段保函某个值的查询

    1.column set('hot','crazy','smart')  //column字段(set属性)三个值 2.select * from table where FIND_IN_SET('h ...

  9. HTML 5 学习 (1)

    一.HTML的发展 20世纪70年代~80年代之间HTML正式诞生,但是没有一个统一的标准,显示内容比较单一.在netscape上显示的网页可能在ie5中无法正常显示,反之亦然. 1998年,HTML ...

  10. hasClass方法 动画方法说明

    $(this).hasClass("selected");判断是否含有selected样式