字体图标
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。
优点:
- 加载文件体积小
- 统一展示风格,使用方法
- 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
- 可以添加一些视觉效果如:阴影、旋转、透明度
- 兼容IE6
- 后期维护成本很低
缺点:
- 制作门槛有点高,需要借助专业的工具生成字库文件
- 需要服务器做些相应的配置来解决识别问题和跨域问题
H-ui从阿里巴巴上千个Iconfont中精选出最常用的200多,打包成Hui-iconfont,
字体图标的使用方法:
第一步:下载(如果下载过H-ui框架和H-ui.admin的,请跳过第一步,无须重复下载)
第二步:引入
为了方便资源调用,尽量保持现有字库的目录结构,不要随意拆开部署,防止无法正常加载字体文件。
<link href="lib/hui-iconfont/1.0.9/iconfont.css" rel="stylesheet" type="text/css" />
第三步:调用
有两种使用方法
方法1、挑选相应图标并获取字体编码(如果字库发生过更新,编码会发生相应的变化,需要重新获取对应编码),应用于页面。
<i class="hui-iconfont"></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多个常用的图标,而且为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台会将图标存储在平台上,并转换成多种文件格式。具体制作方法在此不过多阐述,感兴趣可 直接去官网查看 。