字体图标

小白补脑：

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

优点：

加载文件体积小
统一展示风格，使用方法
通过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-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多个常用的图标，而且为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台，平台会将图标存储在平台上，并转换成多种文件格式。具体制作方法在此不过多阐述，感兴趣可直接去官网查看。