字体图标

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

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

优点：

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

缺点：

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

H-ui从阿里巴巴上千个Iconfont中精选出最常用的200多，打包成Hui-iconfont，

字体图标的使用方法：

第一步：下载（如果下载过H-ui框架和H-ui.admin的，请跳过第一步，无须重复下载）

 hui-iconfont下载

第二步：引入

为了方便资源调用，尽量保持现有字库的目录结构，不要随意拆开部署，防止无法正常加载字体文件。

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

第三步：调用

有两种使用方法

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

<i class="hui-iconfont">&#xe640;</i>

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

<i class="hui-iconfont hui-iconfont-lunzi"></i>

操作相关

返回顶部



.hui-iconfont-gotop
列表



.hui-iconfont-menu
剪切



.hui-iconfont-jiandao
搜索2



.hui-iconfont-search2
搜索1



.hui-iconfont-search1
保存



.save
撤销



.hui-iconfont-chexiao
重做



.hui-iconfont-zhongzuo
下载



.hui-iconfont-down
切换器右



.hui-iconfont-slider-right
切换器左



.hui-iconfont-slider-left
发布



.hui-iconfont-fabu
添加



.hui-iconfont-add2
换一批



.hui-iconfont-huanyipi
等待



.hui-iconfont-dengdai
导出



.hui-iconfont-daochu
导入



.hui-iconfont-daoru
删除



.hui-iconfont-del
删除



.hui-iconfont-del2
删除



.hui-iconfont-del3
输入



.hui-iconfont-shuru
添加



.hui-iconfont-add
减号



.hui-iconfont-jianhao
编辑



.hui-iconfont-edit2
编辑



.hui-iconfont-edit
管理



.hui-iconfont-manage
添加



.hui-iconfont-add3
添加



.hui-iconfont-add4
密码



.hui-iconfont-key
解锁



.hui-iconfont-jiesuo
锁定



.hui-iconfont-suoding
关闭



.hui-iconfont-close
关闭2



.hui-iconfont-close2
选择



.hui-iconfont-xuanze
未选



.hui-iconfont-weigouxuan2
选中



.hui-iconfont-xuanzhong1
选中



.hui-iconfont-xuanzhong
未选中



.hui-iconfont-weixuanzhong
启用



.hui-iconfont-gouxuan2
重启



.hui-iconfont-chongqi
勾选



.hui-iconfont-selected
上架



.hui-iconfont-shangjia
下架



.hui-iconfont-xiajia
上传



.hui-iconfont-upload
下载



.hui-iconfont-yundown
剪裁



.hui-iconfont-caiqie
旋转



.hui-iconfont-xuanzhuan
启用



.hui-iconfont-gouxuan
未勾选



.hui-iconfont-weigouxuan
录音



.hui-iconfont-luyin
预览



.hui-iconfont-yulan
审核不通过



.hui-iconfont-shenhe-weitongguo
审核不通过



.hui-iconfont-shenhe-butongguo2
审核通过



.hui-iconfont-shenhe-tongguo
停用



.hui-iconfont-shenhe-tingyong
播放



.hui-iconfont-bofang
上一首



.hui-iconfont-shangyishou
下一首



.hui-iconfont-xiayishou
暂停



.hui-iconfont-zanting
停止



.hui-iconfont-tingzhi
阅读



.hui-iconfont-yuedu
眼睛



.hui-iconfont-yanjing
电源



.hui-iconfont-power
图标2_橡皮擦



.hui-iconfont-xiangpicha
计时器



.hui-iconfont-jishiqi

菜单相关

home



.hui-iconfont-home
小箭头



.hui-iconfont-home2
cmstop新闻



.hui-iconfont-news
图片



.hui-iconfont-tuku
音乐



.hui-iconfont-music
标签



.hui-iconfont-tags
语音



.hui-iconfont-yuyin3
系统



.hui-iconfont-system
帮助



.hui-iconfont-help
出库



.hui-iconfont-chuku
图片



.hui-iconfont-picture
分类



.hui-iconfont-fenlei
合同管理



.hui-iconfont-hetong
全部订单



.hui-iconfont-quanbudingdan
任务管理



.hui-iconfont-renwu
问题反馈



.hui-iconfont-feedback
意见反馈



.hui-iconfont-feedback2
合同



.hui-iconfont-dangan
日志



.hui-iconfont-log
列表页面



.hui-iconfont-pages
文件



.hui-iconfont-file
管理



.hui-iconfont-manage2
订单



.hui-iconfont-order
语音



.hui-iconfont-yuyin2
语音



.hui-iconfont-yuyin
图片



.hui-iconfont-picture1
图文详情



.hui-iconfont-tuwenxiangqing
模版



.hui-iconfont-moban-2
节日



.hui-iconfont-jieri
后台-网站



.hui-iconfont-moban
闹钟



.hui-iconfont-clock

天气相关

多云



.hui-iconfont-tianqi-duoyun
霾



.hui-iconfont-tianqi-mai
晴



.hui-iconfont-tianqi-qing
雾



.hui-iconfont-tianqi-wu
雪



.hui-iconfont-tianqi-xue
阴



.hui-iconfont-tianqi-yin
雨



.hui-iconfont-tianqi-yu

用户相关

用户



.hui-iconfont-user
用户



.hui-iconfont-user2
用户头像



.hui-iconfont-hui-avatar
个人中心



.hui-iconfont-avatar2
添加用户



.hui-iconfont-user-add
用户ID



.hui-iconfont-userid
证照管理



.hui-iconfont-zhizhao
执业证



.hui-iconfont-practice
群组



.hui-iconfont-user-group
站长



.hui-iconfont-user-zhanzhang
管理员



.hui-iconfont-root
公司



.hui-iconfont-gongsi
会员卡



.hui-iconfont-vip-card2
会员



.hui-iconfont-vip
群组



.hui-iconfont-usergroup2
客服



.hui-iconfont-kefu
版主



.hui-iconfont-banzhu
皇冠



.hui-iconfont-huangguan

表情相关

表情



.hui-iconfont-face2
表情



.hui-iconfont-face
微笑



.hui-iconfont-face-weixiao
哭脸



.face-ku
吃惊



.hui-iconfont-face-chijing
呆



.hui-iconfont-face-dai
耍酷



.hui-iconfont-face-shuaku
魔鬼



.hui-iconfont-face-mogui
尴尬



.hui-iconfont-face-ganga
亲



.hui-iconfont-face-qin
怒



.hui-iconfont-face-nu
眨眼



.hui-iconfont-face-zhayan
生气



.hui-iconfont-face-shengqi
骂



.hui-iconfont-face-ma
鄙视



.hui-iconfont-face-bishi
卖萌



.hui-iconfont-face-maimeng
惊呆



.hui-iconfont-face-jingdai
晕



.hui-iconfont-face-yun

社区相关

分享



.hui-iconfont-share2
分享



.hui-iconfont-share
人人网



.hui-iconfont-share-renren
腾讯微博



.hui-iconfont-share-tweibo
豆瓣



.hui-iconfont-share-douban
朋友圈



.hui-iconfont-share-pengyouquan
微信



.hui-iconfont-share-weixin
微信2



.hui-iconfont-weixin
QQ



.hui-iconfont-share-qq
QQ2



.hui-iconfont-qq
QQ空间



.hui-iconfont-share-qzone
微博



.hui-iconfont-share-weibo
知乎



.hui-iconfont-share-zhihu
更多



.hui-iconfont-gengduo
更多



.hui-iconfont-gengduo2
更多



.hui-iconfont-gengduo3
更多



.hui-iconfont-gengduo4
喜欢



.hui-iconfont-like
喜欢



.hui-iconfont-like2
已关注



.hui-iconfont-yiguanzhu
评论



.hui-iconfont-comment
累计评价



.hui-iconfont-leijipingjia
消息



.hui-iconfont-xiaoxi
收藏



.hui-iconfont-cang
收藏-选中



.hui-iconfont-cang-selected
收藏



.hui-iconfont-cang2
收藏-选中



.hui-iconfont-cang2-selected
关注-更多操作



.hui-iconfont-more
点赞1



.hui-iconfont-zan
批评1



.hui-iconfont-cai
点赞2



.hui-iconfont-zan2
批评2



.hui-iconfont-piping
通知



.hui-iconfont-msg
消息管理



.hui-iconfont-email
已关注店铺



.hui-iconfont-yiguanzhu1
转发



.hui-iconfont-zhuanfa
待评价



.hui-iconfont-daipingjia
积分



.hui-iconfont-jifen
消息



.hui-iconfont-xiaoxi1
已读



.hui-iconfont-read
用户反馈



.hui-iconfont-feedback1
订阅



.hui-iconfont-dingyue
提示



.hui-iconfont-tishi
star-o



.hui-iconfont-star-o
star



.hui-iconfont-star
star-half



.hui-iconfont-star-half
star-half-empty



.hui-iconfont-star-halfempty
我的评价



.hui-iconfont-comment1

统计相关

数据统计



.hui-iconfont-tongji-bing
统计管理



.hui-iconfont-ad
数据统计



.hui-iconfont-shujutongji
统计



.hui-iconfont-tongji
柱状统计



.hui-iconfont-tongji-zhu
线状统计



.hui-iconfont-tongji-xian
排行榜



.hui-iconfont-paixingbang

箭头相关

向左



.hui-iconfont-arrow1-bottom
向下



.hui-iconfont-arrow1-bottom
向上



.hui-iconfont-arrow1-top
向右



.hui-iconfont-arrow1-right
向左



.hui-iconfont-arrow2-left
向上



.hui-iconfont-arrow2-top
向右



.hui-iconfont-arrow2-right
向下



.hui-iconfont-arrow2-bottom
向左



.hui-iconfont-arrow3-left
向上



.hui-iconfont-arrow3-top
向右



.hui-iconfont-arrow3-right
向下



.hui-iconfont-arrow3-bottom
向右



.hui-iconfont-sanjiao

电商相关

物流



.hui-iconfont-wuliu
店铺



.hui-iconfont-dianpu
购物车



.hui-iconfont-cart2-selected
购物车满



.hui-iconfont-cart2-man
购物车空



.hui-iconfont-card2-kong
购物车-选中



.hui-iconfont-cart-selected
购物车



.hui-iconfont-cart-kong
降价



.hui-iconfont-jiangjia
信用卡还款



.hui-iconfont-bank
礼物



.hui-iconfont-liwu
优惠券



.hui-iconfont-youhuiquan
红包



.hui-iconfont-hongbao
优惠券



.hui-iconfont-hongbao2
资金



.hui-iconfont-money
商品



.hui-iconfont-goods
钱包1



.hui-iconfont-qianbao-1
钱包2



.hui-iconfont-qianbao-2
钱包3



.hui-iconfont-qianbao-3
竞价



.hui-iconfont-jingjia

编辑器

code



.hui-iconfont-code
左对齐



.hui-iconfont-align-left
居中对齐



.hui-iconfont-align-center
右对齐



.hui-iconfont-align-right
两头对齐



.hui-iconfont-align-justify
字体



.hui-iconfont-font
加粗



.hui-iconfont-bold
倾斜



.hui-iconfont-italic
下划线



.hui-iconfont-underline
text-height



.hui-iconfont-text-height
text-width



.hui-iconfont-text-width
link



.hui-iconfont-link
有序列表



.hui-iconfont-ordered-list
无序列表



.hui-iconfont-unordered-list
剪切



.hui-iconfont-cut
复制



.hui-iconfont-copy
粘贴



.hui-iconfont-paste
新建



.hui-iconfont-new

银行、支付相关

支付宝支付1



.hui-iconfont-pay-alipay-1
支付宝支付3



.hui-iconfont-pay-alipay-3
支付宝支付4



.hui-iconfont-pay-alipay-4
微信支付



.hui-iconfont-pay-weixin
中国银行



.hui-iconfont-zhongguoyinxing
工商银行



.hui-iconfont-gongshangyinxing
建设银行



.hui-iconfont-jiansheyinxing
交通银行



.hui-iconfont-jiaotongyinxing
中国农业银行



.hui-iconfont-zhongguonongyeyinxing
邮政银行



.hui-iconfont-youzhengyinxing
浦发银行



.hui-iconfont-pufayinxing
华夏银行



.hui-iconfont-huaxiayinxing
招商银行



.hui-iconfont-zhaoshangyinxing
中信银行



.hui-iconfont-zhongxinyinxing
上海银行



.hui-iconfont-shanghaiyinxing
温州银行



.hui-iconfont-wenzhouyinxing
光大银行



.hui-iconfont-guangdayinxing
民生银行



.hui-iconfont-minshengyinxing
青岛银行



.hui-iconfont-qingdaoyinxing
北京银行



.hui-iconfont-beijingyinxing
广东发展银行



.hui-iconfont-guangdongfazhanyinxing
浙商银行



.hui-iconfont-zheshangyinxing
成都银行



.hui-iconfont-cdbank
杭州银行



.hui-iconfont-hangzhouyinxing

其他

电话



.hui-iconfont-tel
电话



.hui-iconfont-tel2
iphone手机



.hui-iconfont-phone
安卓手机



.hui-iconfont-phone-android
平板电脑



.hui-iconfont-pad
PC



.hui-iconfont-xianshiqi
照相机



.hui-iconfont-zhaoxiangji
单反相机



.hui-iconfont-danfanxiangji
打印机



.hui-iconfont-dayinji
轮胎



.hui-iconfont-lunzi
插件



.hui-iconfont-chajian
节日



.hui-iconfont-jieri
排序



.hui-iconfont-paixu
匿名



.hui-iconfont-niming
换肤



.hui-iconfont-pifu
二维码



.hui-iconfont-2code
扫一扫



.hui-iconfont-saoyisao
搜索



.hui-iconfont-search
中图模式



.hui-iconfont-zhongtumoshi
大图模式



.hui-iconfont-datumoshi
大图模式



.hui-iconfont-bigpic
中图模式



.hui-iconfont-middle
列表模式



.hui-iconfont-list
时间



.hui-iconfont-shijian
更多



.hui-iconfont-more2
SIM卡



.hui-iconfont-sim
火热



.hui-iconfont-hot
拍摄



.hui-iconfont-paishe
热销



.hui-iconfont-hot1
上新



.hui-iconfont-new
产品参数



.hui-iconfont-canshu
定位



.hui-iconfont-dingwei
定位



.hui-iconfont-weizhi
HTML



.hui-iconfont-html
CSS



.hui-iconfont-css
苹果



.hui-iconfont-apple
android



.hui-iconfont-android
github



.hui-iconfont-github
html5



.hui-iconfont-html5
皇冠



.hui-iconfont-huangguan

H-ui会定期更新字库文件，做到兼容升级，不影响前面已有的字库编码，让用户放心升级字库。

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