字体图标

小白补脑:

首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

优点:

  1. 加载文件体积小
  2. 统一展示风格,使用方法
  3. 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
  4. 可以添加一些视觉效果如:阴影、旋转、透明度
  5. 兼容IE6
  6. 后期维护成本很低

缺点:

  1. 制作门槛有点高,需要借助专业的工具生成字库文件
  2. 需要服务器做些相应的配置来解决识别问题和跨域问题

H-ui整合了两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Font Awesome

字体图标的使用方法:

第一步:下载(如果下载过H-ui框架的,请跳过第一步,无须重复下载)

阿里巴巴Iconfont下载 Font Awesome3.0下载

第二步:引入

为了方便资源调用,尽量将.css 和字库文件放在一个文件夹下,不要随意拆开部署,防止无法正常加载字体文件。

Iconfont

<link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css" />

Font Awesome

<link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
<![endif]-->

第三步:调用

有两种使用方法

方法1、挑选相应图标并获取字体编码(如果字库发生过更新,编码会发生相应的变化,需要重新获取对应编码),应用于页面。󰀠

<i class="iconfont">&#xf0020;</i>

方法2、通过对应的css类名调用

<i class="iconfont iconfont-yunshangchuan"></i>
阿里巴巴IconfontFont Awesome3.0

阿里巴巴Iconfont平台不广免费提供了1000多个常用的图标,为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台将会将图标存储在平台上,并转换成多种格式文件。具体制作方法在此不做过多阐述,感兴趣可直接去官网查看

  • 󰀅
    大小
    &#xf0005;
    .daxiao
  • 󰀠
    云上传
    &#xf0020;
    .yunshangchuan
  • 󰀢
    编辑
    &#xf0022;
    .bianji
  • 󰀣
    上传
    &#xf0023;
    .shangchuan
  • 󰀤
    上传
    &#xf0024;
    .shangchuan1
  • 󰀥
    列表
    &#xf0025;
    .liebiao
  • 󰀦
    发送
    &#xf0026;
    .fasong
  • 󰀩
    充值
    &#xf0029;
    .chongzhi
  • 󰀰
    消费者保障
    &#xf0030;
    .xiaofeizhebaozhang
  • 󰀱
    新手上路
    &#xf0031;
    .xinshoushanglu
  • 󰀲
    付款方式
    &#xf0032;
    .fukuanfangshi
  • 󰀴
    其他
    &#xf0034;
    .qita
  • 󰀵
    缴费
    &#xf0035;
    .jiaofei
  • 󰀶
    音乐
    &#xf0036;
    .yinle
  • 󰀷
    电子书
    &#xf0037;
    .dianzishu
  • 󰀸
    理财
    &#xf0038;
    .licai
  • 󰀿
    话费
    &#xf003f;
    .huafei
  • 󰁂
    文章
    &#xf0042;
    .wenzhang
  • 󰁄
    图片
    &#xf0044;
    .tupian
  • 󰁃
    店铺
    &#xf0043;
    .dianpu
  • 󰁅
    宝贝
    &#xf0045;
    .baobei
  • 󰁆
    品牌
    &#xf0046;
    .pinpai
  • 󰁈
    女人
    &#xf0048;
    .nvren
  • 󰁎
    杯子
    &#xf004e;
    .beizi
  • 󰁏
    间隔符号
    &#xf004f;
    .jiangefuhao
  • 󰁑
    扬声器
    &#xf0051;
    .yangshengqi
  • 󰁕
    硬盘
    &#xf0055;
    .yingpan
  • 󰁗
    电话机
    &#xf0057;
    .dianhuaji
  • 󰁞
    取款机
    &#xf005e;
    .qukuanji
  • 󰁟
    星光
    &#xf005f;
    .xingguang
  • 󰁠
    标签
    &#xf0060;
    .biaoqian
  • 󰁢
    气泡
    &#xf0062;
    .qipao
  • 󰁣
    日历
    &#xf0063;
    .rili
  • 󰁤
    音乐
    &#xf0064;
    .yinle1
  • 󰁦
    对话框
    &#xf0066;
    .duihuakuang
  • 󰁨
    节日
    &#xf0068;
    .jieri
  • 󰁩
    可爱
    &#xf0069;
    .keai
  • 󰁪
    计时器
    &#xf006a;
    .jishiqi
  • 󰁮
    钱袋
    &#xf006e;
    .qiandai
  • 󰁰
    平板电脑
    &#xf0070;
    .pingbandiannao
  • 󰂊
    剪刀
    &#xf008a;
    .jiandao
  • 󰂍
    礼物
    &#xf008d;
    .liwu
  • 󰂑
    显示器
    &#xf0091;
    .xianshiqi
  • 󰂒
    照相机
    &#xf0092;
    .zhaoxiangji
  • 󰂖
    单反相机
    &#xf0096;
    .danfanxiangji
  • 󰂙
    电视机
    &#xf0099;
    .dianshiji
  • 󰂡
    图书
    &#xf00a1;
    .tushu
  • 󰂢
    手机
    &#xf00a2;
    .shouji
  • 󰂧
    笔记本
    &#xf00a7;
    .bijiben
  • 󰂨
    打印机
    &#xf00a8;
    .dayinji
  • 󰂪
    游戏
    &#xf00aa;
    .youxi
  • 󰂮
    对话
    &#xf00ae;
    .duihua
  • 󰂯
    推荐
    &#xf00af;
    .tuijian
  • 󰂰
    认证用户
    &#xf00b0;
    .renzhengyonghu
  • 󰂱
    彩带
    &#xf00b1;
    .caidai
  • 󰂲
    正确
    &#xf00b2;
    .zhengque
  • 󰂳
    错误
    &#xf00b3;
    .cuowu
  • 󰂴
    禁止
    &#xf00b4;
    .jinzhi
  • 󰂵
    提醒
    &#xf00b5;
    .tixing
  • 󰂶
    提示
    &#xf00b6;
    .tishi
  • 󰂷
    警告
    &#xf00b7;
    .jinggao
  • 󰂸
    帮助
    &#xf00b8;
    .bangzhu
  • 󰂹
    网络
    &#xf00b9;
    .wangluo
  • 󰂺
    创意
    &#xf00ba;
    .chuangyi
  • 󰂻
    账户
    &#xf00bb;
    .zhanghu
  • 󰂼
    剪切
    &#xf00bc;
    .jianqie
  • 󰂽
    文件
    &#xf00bd;
    .wenjian
  • 󰂾
    编辑文件
    &#xf00be;
    .bianjiwenjian
  • 󰂿
    等待文件
    &#xf00bf;
    .dengdaiwenjian
  • 󰃀
    删除文件
    &#xf00c0;
    .shanchuwenjian
  • 󰃁
    剪切文件
    &#xf00c1;
    .jianqiewenjian
  • 󰃂
    复制文件
    &#xf00c2;
    .fuzhiwenjian
  • 󰃃
    搜索文件
    &#xf00c3;
    .sousuowenjian
  • 󰃄
    等待
    &#xf00c4;
    .dengdai
  • 󰃅
    文件夹
    &#xf00c5;
    .wenjianjia
  • 󰃆
    新增文件夹
    &#xf00c6;
    .xinzengwenjianjia
  • 󰃇
    删除文件夹
    &#xf00c7;
    .shanchuwenjianjia
  • 󰃈
    未打卡的文件夹
    &#xf00c8;
    .weidaqiadewenjianjia
  • 󰃉
    锁定
    &#xf00c9;
    .suoding
  • 󰃊
    资料库
    &#xf00ca;
    .ziliaoku
  • 󰃋
    字体
    &#xf00cb;
    .ziti
  • 󰃌
    网站主
    &#xf00cc;
    .wangzhanzhu
  • 󰃍
    饼图
    &#xf00cd;
    .bingtu
  • 󰃎
    竖状图
    &#xf00ce;
    .shuzhuangtu
  • 󰃏
    曲线图
    &#xf00cf;
    .quxiantu
  • 󰃐
    折线图
    &#xf00d0;
    .zhexiantu
  • 󰃑
    API接入
    &#xf00d1;
    .APIjieru
  • 󰃒
    定向
    &#xf00d2;
    .dingxiang
  • 󰃓
    精确定向
    &#xf00d3;
    .jingquedingxiang
  • 󰃔
    广告主
    &#xf00d4;
    .guanggaozhu
  • 󰃕
    设计师
    &#xf00d5;
    .shejishi
  • 󰃖
    男商家
    &#xf00d6;
    .nanshangjia
  • 󰃗
    女商家
    &#xf00d7;
    .nvshangjia
  • 󰃘
    添加商家
    &#xf00d8;
    .tianjiashangjia
  • 󰃙
    兴趣定向
    &#xf00d9;
    .xingqudingxiang
  • 󰃚
    竞价
    &#xf00da;
    .jingjia
  • 󰃛
    指针
    &#xf00db;
    .zhizhen
  • 󰃜
    激活
    &#xf00dc;
    .jihuo
  • 󰃝
    插件
    &#xf00dd;
    .chajian
  • 󰃞
    图标
    &#xf00de;
    .tubiao
  • 󰃟
    计划
    &#xf00df;
    .jihua
  • 󰃠
    添加计划
    &#xf00e0;
    .tianjiajihua
  • 󰃡
    目录
    &#xf00e1;
    .mulu
  • 󰃢
    广告位
    &#xf00e2;
    .guanggaowei
  • 󰃣
    添加广告位
    &#xf00e3;
    .tianjiaguanggaowei
  • 󰃥
    手机店招
    &#xf00e5;
    .shoujidianzhao
  • 󰃤
    商家群
    &#xf00e4;
    .shangjiaqun
  • 󰃦
    店招
    &#xf00e6;
    .dianzhao
  • 󰃧
    图文店招
    &#xf00e7;
    .tuwendianzhao
  • 󰃨
    调节
    &#xf00e8;
    .diaojie
  • 󰃩
    可见
    &#xf00e9;
    .kejian
  • 󰃪
    不可见
    &#xf00ea;
    .bukejian
  • 󰃫
    飙升榜
    &#xf00eb;
    .biaoshengbang
  • 󰃬
    管理员
    &#xf00ec;
    .guanliyuan
  • 󰃭
    金币
    &#xf00ed;
    .jinbi
  • 󰃮
    金币转出
    &#xf00ee;
    .jinbizhuanchu
  • 󰃯
    金币提现
    &#xf00ef;
    .jinbitixian
  • 󰃰
    金币转入
    &#xf00f0;
    .jinbizhuanru
  • 󰃱
    计费
    &#xf00f1;
    .jifei
  • 󰃲
    页面推广
    &#xf00f2;
    .yemiantuiguang
  • 󰃴
    广告主活动推广
    &#xf00f4;
    .guanggaozhuhuodongtuiguang
  • 󰃵
    用研
    &#xf00f5;
    .yongyan
  • 󰃶
    新手学堂
    &#xf00f6;
    .xinshouxuetang
  • 󰃷
    上传素材
    &#xf00f7;
    .shangchuansucai
  • 󰃸
    通投
    &#xf00f8;
    .tongtou
  • 󰃹
    渠道效果
    &#xf00f9;
    .qudaoxiaoguo
  • 󰃺
    渠道管理
    &#xf00fa;
    .qudaoguanli
  • 󰃼
    推广单元格
    &#xf00fc;
    .tuiguangdanyuange
  • 󰃽
    细分
    &#xf00fd;
    .xifen
  • 󰃾
    系统推送
    &#xf00fe;
    .xitongtuisong
  • 󰃻
    推广渠道
    &#xf00fb;
    .tuiguangqudao
  • 󰃿
    奖牌
    &#xf00ff;
    .jiangpai
  • 󰄂
    密匙
    &#xf0102;
    .michi
  • 󰄃
    支付宝
    &#xf0103;
    .zhifubao
  • 󰄄
    自助推广
    &#xf0104;
    .zizhutuiguang
  • 󰄅
    管理
    &#xf0105;
    .guanli
  • 󰄆
    计划报表
    &#xf0106;
    .jihuabaobiao
  • 󰄉
    竞价资源位
    &#xf0109;
    .jingjiaziyuanwei
  • 󰄊
    定价资源位
    &#xf010a;
    .dingjiaziyuanwei
  • 󰄋
    账户报表
    &#xf010b;
    .zhanghubaobiao
  • 󰄍
    网站设置
    &#xf010d;
    .wangzhanshezhi
  • 󰄎
    跟踪目标设置
    &#xf010e;
    .genzongmubiaoshezhi
  • 󰄏
    网站管理
    &#xf010f;
    .wangzhanguanli
  • 󰄐
    跟踪目标管理
    &#xf0110;
    .genzongmubiaoguanli
  • 󰄑
    排序
    &#xf0111;
    .paixu
  • 󰄒
    向左
    &#xf0112;
    .xiangzuo
  • 󰄔
    向右
    &#xf0114;
    .xiangyou
  • 󰄕
    节日
    &#xf0115;
    .jieri1
  • 󰄗
    标签
    &#xf0117;
    .biaoqian1
  • 󰄙
    多素材
    &#xf0119;
    .duosucai
  • 󰄚
    云下载
    &#xf011a;
    .yunxiazai
  • 󰄛
    微笑
    &#xf011b;
    .weixiao
  • 󰄜
    吃惊
    &#xf011c;
    .chijing
  • 󰄝
    &#xf011d;
    .dai
  • 󰄞
    耍酷
    &#xf011e;
    .shuaku
  • 󰄟
    魔鬼
    &#xf011f;
    .mogui
  • 󰄠
    尴尬
    &#xf0120;
    .ganga
  • 󰄡
    &#xf0121;
    .qin
  • 󰄣
    眨眼
    &#xf0123;
    .zhayan
  • 󰄥
    &#xf0125;
    .ma
  • 󰄦
    鄙视
    &#xf0126;
    .bishi
  • 󰄤
    生气
    &#xf0124;
    .shengqi
  • 󰄢
    &#xf0122;
    .nu
  • 󰄧
    卖萌
    &#xf0127;
    .maimeng
  • 󰄨
    惊呆
    &#xf0128;
    .jingdai
  • 󰄪
    facebook
    &#xf012a;
    .facebook
  • 󰄩
    &#xf0129;
    .yun
  • 󰄫
    首页
    &#xf012b;
    .shouye
  • 󰄬
    搜索
    &#xf012c;
    .sousuo
  • 󰄮
    黑名单
    &#xf012e;
    .heimingdan
  • 󰄯
    分享
    &#xf012f;
    .fenxiang
  • 󰄰
    文本
    &#xf0130;
    .wenben
  • 󰄲
    对话
    &#xf0132;
    .duihua1
  • 󰄱
    保存
    &#xf0131;
    .baocun
  • 󰄳
    表情
    &#xf0133;
    .biaoqing
  • 󰄴
    物流
    &#xf0134;
    .wuliu
  • 󰄵
    店铺
    &#xf0135;
    .dianpu1
  • 󰄶
    名片
    &#xf0136;
    .mingpian
  • 󰄁
    账户明细
    &#xf0101;
    .zhanghumingxi
  • 󰄀
    淘宝客推广
    &#xf0100;
    .taobaoketuiguang
  • 󰃳
    推广广告位
    &#xf00f3;
    .tuiguangguanggaowei
  • 󰄌
    全网竞价报表
    &#xf010c;
    .quanwangjingjiabaobiao
  • 󰄓
    向上
    &#xf0113;
    .xiangshang
  • 󰄖
    可爱的
    &#xf0116;
    .keaide
  • 󰄭
    用户
    &#xf012d;
    .yonghu
  • 󰄷
    图片
    &#xf0137;
    .tupian1
  • 󰄸
    邮件
    &#xf0138;
    .youjian
  • 󰄹
    销量
    &#xf0139;
    .xiaoliang
  • 󰄺
    撤销
    &#xf013a;
    .chexiao
  • 󰄻
    重做
    &#xf013b;
    .zhongzuo
  • 󰄼
    赞扬
    &#xf013c;
    .zanyang
  • 󰄽
    批评
    &#xf013d;
    .piping
  • 󰄾
    设置
    &#xf013e;
    .shezhi
  • 󰄿
    删除
    &#xf013f;
    .shanchu
  • 󰅀
    旺旺
    &#xf0140;
    .wangwang
  • 󰅁
    其它
    &#xf0141;
    .qita1
  • 󰅃
    帮助
    &#xf0143;
    .bangzhu1
  • 󰅄
    收藏
    &#xf0144;
    .shoucang
  • 󰅍
    添加用户
    &#xf014d;
    .tianjiayonghu
  • 󰅌
    查找用户
    &#xf014c;
    .chazhaoyonghu
  • 󰅋
    好友
    &#xf014b;
    .haoyou
  • 󰅊
    位置
    &#xf014a;
    .weizhi
  • 󰅉
    耳机
    &#xf0149;
    .erji
  • 󰅈
    购物车
    &#xf0148;
    .gouwuche
  • 󰅇
    语音
    &#xf0147;
    .yuyin
  • 󰅆
    小助手
    &#xf0146;
    .xiaozhushou
  • 󰅅
    喜爱
    &#xf0145;
    .xiai
  • 󰅎
    哭脸
    &#xf014e;
    .kulian
  • 󰅏
    编辑
    &#xf014f;
    .bianji1
  • 󰅐
    人民币
    &#xf0150;
    .renminbi
  • 󰅒
    标签
    &#xf0152;
    .biaoqian2
  • 󰅔
    &#xf0154;
    .jia
  • 󰅖
    正确
    &#xf0156;
    .zhengque1
  • 󰅕
    错误
    &#xf0155;
    .cuowu1
  • 󰅓
    &#xf0153;
    .jian
  • 󰅑
    照相机
    &#xf0151;
    .zhaoxiangji1
  • 󰅗
    女人
    &#xf0157;
    .nvren1
  • 󰅘
    文本输入
    &#xf0158;
    .wenbenshuru
  • 󰅙
    小缩略图
    &#xf0159;
    .xiaosuolvetu
  • 󰅚
    随机用户
    &#xf015a;
    .suijiyonghu
  • 󰅛
    附件
    &#xf015b;
    .fujian
  • 󰅜
    刷新
    &#xf015c;
    .shuaxin
  • 󰅝
    单图排列
    &#xf015d;
    .dantupailie
  • 󰅞
    大列表
    &#xf015e;
    .daliebiao
  • 󰅟
    大缩略图列表
    &#xf015f;
    .dasuolvetuliebiao
  • 󰅨
    编辑模板
    &#xf0168;
    .bianjimoban
  • 󰅧
    诊断
    &#xf0167;
    .zhenduan
  • 󰅦
    提醒设置
    &#xf0166;
    .tixingshezhi
  • 󰅤
    过滤
    &#xf0164;
    .guolv
  • 󰅣
    下载
    &#xf0163;
    .xiazai
  • 󰅢
    视频
    &#xf0162;
    .shipin
  • 󰅡
    列表
    &#xf0161;
    .liebiao1
  • 󰅠
    瀑布流
    &#xf0160;
    .pubuliu
  • 󰅩
    导入创意
    &#xf0169;
    .daoruchuangyi
  • 󰅪
    粘贴
    &#xf016a;
    .zhantie
  • 󰅫
    开始
    &#xf016b;
    .kaishi
  • 󰅬
    完成
    &#xf016c;
    .wancheng
  • 󰅭
    向右
    &#xf016d;
    .xiangyou1
  • 󰅮
    向左
    &#xf016e;
    .xiangzuo1
  • 󰅯
    向上
    &#xf016f;
    .xiangshang1
  • 󰅰
    向下
    &#xf0170;
    .xiangxia
  • 󰅱
    淘宝
    &#xf0171;
    .taobao
  • 󰅲
    聚划算
    &#xf0172;
    .juhuasuan
  • 󰅳
    天猫
    &#xf0173;
    .tianmao
  • 󰅴
    应用
    &#xf0174;
    .yingyong
  • 󰅵
    &#xf0175;
    .jia1
  • 󰅶
    &#xf0176;
    .jian1
  • 󰅷
    降价
    &#xf0177;
    .jiangjia
  • 󰅸
    购物车满
    &#xf0178;
    .gouwucheman
  • 󰅹
    购物车空
    &#xf0179;
    .gouwuchekong
  • 󰅺
    应用中心
    &#xf017a;
    .yingyongzhongxin
  • 󰆃
    竖排
    &#xf0183;
    .shupai
  • 󰆂
    横排
    &#xf0182;
    .hengpai
  • 󰆁
    居右
    &#xf0181;
    .juyou
  • 󰆀
    居中
    &#xf0180;
    .juzhong
  • 󰅾
    暂停
    &#xf017e;
    .zanting
  • 󰅻
    更新
    &#xf017b;
    .gengxin
  • 󰆅
    右缩进
    &#xf0185;
    .yousuojin
  • 󰆆
    垂直缩放
    &#xf0186;
    .chuizhisuofang
  • 󰅽
    皇冠
    &#xf017d;
    .huangguan
  • 󰅼
    退出
    &#xf017c;
    .tuichu
  • 󰅿
    居左
    &#xf017f;
    .juzuo
  • 󰆄
    左缩进
    &#xf0184;
    .zuosuojin
  • 󰆇
    水平缩放
    &#xf0187;
    .shuipingsuofang
  • 󰆈
    斜体
    &#xf0188;
    .xieti
  • 󰆊
    最下部
    &#xf018a;
    .zuixiabu
  • 󰆋
    锁定
    &#xf018b;
    .suoding1
  • 󰆉
    最上部
    &#xf0189;
    .zuishangbu
  • 󰆌
    禁止
    &#xf018c;
    .jinzhi1
  • 󰆕
    解锁
    &#xf0195;
    .jiesuo
  • 󰆔
    打开信息
    &#xf0194;
    .dakaixinxi
  • 󰆓
    &#xf0193;
    .tao
  • 󰆒
    高速
    &#xf0192;
    .gaosu
  • 󰆐
    半分
    &#xf0190;
    .banfen
  • 󰆏
    进入
    &#xf018f;
    .jinru
  • 󰆍
    设置
    &#xf018d;
    .shezhi1
  • 󰆖
    退格
    &#xf0196;
    .tuige
  • 󰆗
    应用中心
    &#xf0197;
    .yingyongzhongxin1
  • 󰆙
    文本输入
    &#xf0199;
    .wenbenshuru1
  • 󰆎
    录音
    &#xf018e;
    .luyin
  • 󰆘
    图文详情
    &#xf0198;
    .tuwenxiangqing
  • 󰆚
    微距
    &#xf019a;
    .weiju
  • 󰆑
    转弯
    &#xf0191;
    .zhuanwan
  • 󰆛
    远景
    &#xf019b;
    .yuanjing
  • 󰆜
    高清摄像
    &#xf019c;
    .gaoqingshexiang
  • 󰆞
    风景
    &#xf019e;
    .fengjing
  • 󰆝
    人像
    &#xf019d;
    .renxiang
  • 󰆟
    夜景
    &#xf019f;
    .yejing
  • 󰆠
    全景
    &#xf01a0;
    .quanjing
  • 󰆡
    自拍模式
    &#xf01a1;
    .zipaimoshi
  • 󰆢
    左上
    &#xf01a2;
    .zuoshang
  • 󰆣
    向上
    &#xf01a3;
    .xiangshang2
  • 󰆤
    右上
    &#xf01a4;
    .youshang
  • 󰆥
    左下
    &#xf01a5;
    .zuoxia
  • 󰆦
    向下
    &#xf01a6;
    .xiangxia1
  • 󰆧
    右下
    &#xf01a7;
    .youxia
  • 󰆨
    向左
    &#xf01a8;
    .xiangzuo2
  • 󰆩
    向右
    &#xf01a9;
    .xiangyou2
  • 󰆮
    链接
    &#xf01ae;
    .lianjie
  • 󰆯
    新浪微博
    &#xf01af;
    .xinlangweibo
  • 󰆰
    腾讯微博
    &#xf01b0;
    .tengxunweibo
  • 󰆱
    &#xf01b1;
    .huan
  • 󰆲
    合并单元
    &#xf01b2;
    .hebingdanyuan
  • 󰆴
    缩小
    &#xf01b4;
    .suoxiao
  • 󰆵
    放大
    &#xf01b5;
    .fangda
  • 󰆶
    移动
    &#xf01b6;
    .yidong
  • 󰆷
    全屏
    &#xf01b7;
    .quanping
  • 󰆸
    缩小
    &#xf01b8;
    .suoxiao1
  • 󰆹
    放大
    &#xf01b9;
    .fangda1
  • 󰆺
    新建窗口
    &#xf01ba;
    .xinjianchuangkou
  • 󰆻
    新窗口打开
    &#xf01bb;
    .xinchuangkoudakai
  • 󰆼
    订阅
    &#xf01bc;
    .dingyue
  • 󰆽
    信号
    &#xf01bd;
    .xinhao
  • 󰆾
    订单
    &#xf01be;
    .dingdan
  • 󰆿
    充电
    &#xf01bf;
    .chongdian
  • 󰇀
    提升
    &#xf01c0;
    .tisheng
  • 󰇂
    html
    &#xf01c2;
    .html
  • 󰇄
    通知
    &#xf01c4;
    .tongzhi
  • 󰇃
    css
    &#xf01c3;
    .css
  • 󰇅
    定位
    &#xf01c5;
    .dingwei
  • 󰇆
    代码文件
    &#xf01c6;
    .daimawenjian
  • 󰇇
    qq
    &#xf01c7;
    .qq
  • 󰇈
    豆瓣
    &#xf01c8;
    .douban
  • 󰇊
    github
    &#xf01ca;
    .github
  • 󰇉
    安卓
    &#xf01c9;
    .anzhuo
  • 󰇁
    下降
    &#xf01c1;
    .xiajiang
  • 󰇋
    播放
    &#xf01cb;
    .bofang
  • 󰇌
    播放
    &#xf01cc;
    .bofang1
  • 󰇍
    客厅
    &#xf01cd;
    .keting
  • 󰇎
    卧室
    &#xf01ce;
    .woshi
  • 󰇏
    屏风
    &#xf01cf;
    .pingfeng
  • 󰇑
    树苗
    &#xf01d1;
    .shumiao
  • 󰇓
    &#xf01d3;
    .shu
  • 󰇔
    婴儿
    &#xf01d4;
    .yinger
  • 󰇘
    苹果
    &#xf01d8;
    .pingguo
  • 󰋥
    日历开始
    &#xf02e5;
    .rilikaishi
  • 󰋤
    日历结束
    &#xf02e4;
    .rilijieshu
  • 󰋣
    日历
    &#xf02e3;
    .rili1
  • 󰋢
    新建成功
    &#xf02e2;
    .xinjian5
  • 󰋡
    创意
    &#xf02e1;
    .xinjian4
  • 󰋠
    资源位
    &#xf02e0;
    .xinjian3
  • 󰋟
    人群
    &#xf02df;
    .xinjian2
  • 󰋞
    新建
    &#xf02de;
    .xinjian1
  • 󰋝
    图片
    &#xf02dd;
    .tupian2
  • 󰋜
    素材
    &#xf02dc;
    .sucai2
  • 󰋛
    上传
    &#xf02db;
    .shangchuan2
  • 󰋚
    删除
    &#xf02da;
    .shanchu1
  • 󰋙
    流量
    &#xf02d9;
    .liuliang
  • 󰋘
    列表
    &#xf02d8;
    .liebiao2
  • 󰋗
    链接
    &#xf02d7;
    .lianjie1
  • 󰋖
    flash
    &#xf02d6;
    .flash
  • 󰋕
    大图
    &#xf02d5;
    .datu
  • 󰋔
    查看
    &#xf02d4;
    .chakan
  • 󰋓
    裁减
    &#xf02d3;
    .caijian
  • 󰋒
    编辑
    &#xf02d2;
    .bianji2
  • 󰋑
    优秀
    &#xf02d1;
    .youxiu
  • 󰋐
    历程
    &#xf02d0;
    .licheng
  • 󰋆
    展示
    &#xf02c6;
    .zhanshi
  • 󰋅
    佣金
    &#xf02c5;
    .yongjin
  • 󰊼
    警告
    &#xf02bc;
    .jinggao1
  • 󰊻
    宜2
    &#xf02bb;
    .yi2
  • 󰊺
    热2
    &#xf02ba;
    .re2
  • 󰊹
    优2
    &#xf02b9;
    .you2
  • 󰊸
    行2
    &#xf02b8;
    .xing2
  • 󰊷
    潜2
    &#xf02b7;
    .qian2
  • 󰊶
    新2
    &#xf02b6;
    .xin2
  • 󰊴
    添加
    &#xf02b4;
    .tianjia
  • 󰊵
    品2
    &#xf02b5;
    .pin2
  • 󰊲
    &#xf02b2;
    .re
  • 󰊯
    向右
    &#xf02af;
    .xiangyou3
  • 󰊬
    匹配方式
    &#xf02ac;
    .pipeifangshi
  • 󰊪
    向上
    &#xf02aa;
    .xiangshang3
  • 󰋇
    点击
    &#xf02c7;
    .dianji
  • 󰊩
    向下
    &#xf02a9;
    .xiangxia2
  • 󰊨
    未选中
    &#xf02a8;
    .weixuanzhong
  • 󰊧
    选中
    &#xf02a7;
    .xuanzhong
  • 󰊤
    社区
    &#xf02a4;
    .shequ
  • 󰊣
    出错
    &#xf02a3;
    .chucuo
  • 󰊠
    指示
    &#xf02a0;
    .zhishi
  • 󰊟
    发现
    &#xf029f;
    .faxian
  • 󰊞
    计划列表
    &#xf029e;
    .jihualiebiao
  • 󰊝
    首页
    &#xf029d;
    .shouye1
  • 󰊛
    修改出价
    &#xf029b;
    .xiugaichujia
  • 󰊘
    推广中
    &#xf0298;
    .tuiguangzhong
  • 󰊗
    排序
    &#xf0297;
    .paixu1
  • 󰊖
    日期
    &#xf0296;
    .riqi
  • 󰊔
    宝贝
    &#xf0294;
    .baobei1
  • 󰊓
    关键词
    &#xf0293;
    .guanjianci
  • 󰊑
    更多
    &#xf0291;
    .gengduo
  • 󰀭
    药品
    &#xf002d;
    .yaopin
  • 󰊌
    趋势下降
    &#xf028c;
    .qushixiajiang
  • 󰊙
    暂停
    &#xf0299;
    .zanting1
  • 󰊚
    删除
    &#xf029a;
    .shanchu2
  • 󰊜
    充值
    &#xf029c;
    .chongzhi1
  • 󰊐
    收藏
    &#xf0290;
    .shoucang1
  • 󰊎
    价格曲线
    &#xf028e;
    .jiagequxian
  • 󰊍
    曲线上升
    &#xf028d;
    .quxianshangsheng
  • 󰊕
    定向
    &#xf0295;
    .dingxiang1
  • 󰊒
    返回
    &#xf0292;
    .fanhui
  • 󰊋
    清除
    &#xf028b;
    .qingchu
  • 󰉿
    脚印
    &#xf027f;
    .jiaoyin
  • 󰉾
    电影票
    &#xf027e;
    .dianyingpiao
  • 󰉼
    新建模块
    &#xf027c;
    .xinjianmokuai
  • 󰊀
    金额
    &#xf0280;
    .jine
  • 󰉽
    红包
    &#xf027d;
    .hongbao
  • 󰈾
    @
    &#xf023e;
    .anonymous-iconfont
  • 󰉱
    沙尘
    &#xf0271;
    .shachen
  • 󰉲
    冻雨
    &#xf0272;
    .dongyu
  • 󰉳
    浮尘
    &#xf0273;
    .fuchen
  • 󰉴
    雨夹雪
    &#xf0274;
    .yujiaxue
  • 󰉵
    大雪
    &#xf0275;
    .daxue
  • 󰉶
    中雪
    &#xf0276;
    .zhongxue
  • 󰉷
    小雪
    &#xf0277;
    .xiaoxue
  • 󰉸
    大雨
    &#xf0278;
    .dayu
  • 󰉹
    优质
    &#xf0279;
    .youzhi
  • 󰉺
    行业
    &#xf027a;
    .xingye
  • 󰉻
    潜力
    &#xf027b;
    .qianli
  • 󰈢
    &#xf0222;
    .hui
  • 󰈓
    &#xf0213;
    .yi
  • 󰈐
    烈日
    &#xf0210;
    .lieri
  • 󰈏
    乌云
    &#xf020f;
    .wuyun
  • 󰈎
    晚上
    &#xf020e;
    .wanshang
  • 󰈍
    浓云
    &#xf020d;
    .nongyun
  • 󰈌
    &#xf020c;
    .feng
  • 󰈋
    雷电
    &#xf020b;
    .leidian
  • 󰈊
    小雨
    &#xf020a;
    .xiaoyu
  • 󰈉
    &#xf0209;
    .yu
  • 󰈈
    雾气
    &#xf0208;
    .wuqi
  • 󰈆
    多云
    &#xf0206;
    .duoyun
  • 󰈅
    &#xf0205;
    .qing
  • 󰈇
    &#xf0207;
    .yun1
  • 󰈄
    关机
    &#xf0204;
    .guanji
  • 󰈃
    大巴
    &#xf0203;
    .daba
  • 󰈂
    飞机
    &#xf0202;
    .feiji
  • 󰈁
    转推
    &#xf0201;
    .zhuantui
  • 󰈀
    苹果
    &#xf0200;
    .pingguo1
  • 󰇿
    微软
    &#xf01ff;
    .weiruan
  • 󰇾
    钻石
    &#xf01fe;
    .zuanshi
  • 󰇽
    直通车
    &#xf01fd;
    .zhitongche
  • 󰇼
    蝴蝶结
    &#xf01fc;
    .hudiejie
  • 󰇺
    下拉
    &#xf01fa;
    .xiala
  • 󰇹
    点击
    &#xf01f9;
    .dianji1
  • 󰇸
    金币
    &#xf01f8;
    .jinbi1
  • 󰇷
    店铺
    &#xf01f7;
    .dianpu2
  • 󰇯
    电话
    &#xf01ef;
    .dianhua
  • 󰇭
    裁剪
    &#xf01ed;
    .caijian1
  • 󰇵
    购物
    &#xf01f5;
    .gouwu
  • 󰇶
    &#xf01f6;
    .quan
  • 󰇴
    皇冠
    &#xf01f4;
    .huangguan1
  • 󰇳
    行人
    &#xf01f3;
    .xingren
  • 󰇲
    公交
    &#xf01f2;
    .gongjiao
  • 󰇰
    出租
    &#xf01f0;
    .chuzu
  • 󰇮
    html5
    &#xf01ee;
    .html5
  • 󰇬
    选择
    &#xf01ec;
    .xuanze
  • 󰇪
    地图
    &#xf01ea;
    .ditu
  • 󰇩
    地图
    &#xf01e9;
    .ditu1
  • 󰇫
    对话
    &#xf01eb;
    .duihua2
  • 󰇱
    铁路
    &#xf01f1;
    .tielu
  • 󰇤
    月亮
    &#xf01e4;
    .yueliang
  • 󰇦
    收纳
    &#xf01e6;
    .shouna
  • 󰇡
    椅子
    &#xf01e1;
    .yizi
  • 󰆳
    缩回
    &#xf01b3;
    .suohui
  • 󰅂
    信息
    &#xf0142;
    .xinxi
  • 󰄈
    起步价
    &#xf0108;
    .qibujia
  • 󰄇
    默认出价
    &#xf0107;
    .morenchujia
  • 󰂐
    人物
    &#xf0090;
    .renwu
  • 󰀽
    旅行
    &#xf003d;
    .lvxing
  • 󰀼
    保险
    &#xf003c;
    .baoxian
  • 󰀺
    电影票
    &#xf003a;
    .dianyingpiao1
  • 󰀹
    外卖
    &#xf0039;
    .waimai
  • 󰀻
    彩票
    &#xf003b;
    .caipiao
  • 󰀾
    网游
    &#xf003e;
    .wangyou
  • 󰀳
    淘宝特色
    &#xf0033;
    .taobaotese
  • 󰀡
    &#xf0021;
    .xin
  • 󰀄
    节点
    &#xf0004;
    .jiedian
  • 󰀃
    封闭
    &#xf0003;
    .fengbi
  • 󰀁
    填色
    &#xf0001;
    .tianse
  • 󰀂
    合并
    &#xf0002;
    .hebing

温馨提醒:还不知道是个什么玩意的小伙伴可以移步到这里 http://www.bootcss.com/p/font-awesome/,一窥究竟!再次H-ui不做陈述,官方描述更加权威!

适合 Web 应用的图标

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

文本编辑器图标

  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

指示方向的图标

  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank

视频播放器图标

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

SNS图标

  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank

医疗图标

  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md

HTML代码

<i class="icon-h-sign"></i>