arrow 箭头
-
左
.icon-chevron-left
-
右
.icon-chevron-right
-
上
.icon-expand-less
-
下
.icon-expand-more
-
下降
.icon-decline
-
上升
.icon-rise
-
单选-未选中
.icon-radio
-
单选-选中态
.icon-radio-checked
-
复选-未选中
.icon-checkbox
-
复选-选中态
.icon-checkbox-checked
label 标签
-
label-租
.icon-label-zu
-
label-团
.icon-label-tuan
-
label-付
.icon-label-fu
-
label-促
.icon-label-cu
-
label-券
.icon-label-quan
-
label-售
.icon-label-shou
-
label-票
.icon-label-piao
-
label-订
.icon-label-ding
-
label-家
.icon-label-jia
-
label-银
.icon-label-yin
-
label-卡
.icon-label-ka
-
label-外
.icon-label-wai
-
label-点
.icon-label-dian
-
label-拼
.icon-label-pin
-
label-课
.icon-label-ke
-
label-排
.icon-label-pai
-
label-活
.icon-label-huo
action 动作
-
隐私
.icon-yinsi
-
闭眼
.icon-biyan
-
增加
.icon-add
-
减少
.icon-minus
-
勾选
.icon-success
-
叉
.icon-close
-
加
.icon-add-circle
-
关闭
.icon-close-circle
-
减
.icon-minus-circle
-
保存
.icon-slice
-
收藏
.icon-shoucang-fill
-
留言
.icon-liuyan
-
留言
.icon-liuyan-fill
-
点赞
.icon-dianzan
-
点赞
.icon-dianzan-fill
-
返回顶部
.icon-top
-
释放
.icon-release
-
上传
.icon-upload
-
删除
.icon-delete
-
搜索
.icon-search
-
转发
.icon-zhuanfa
-
分享
.icon-share
-
评论
.icon-pinglun
info 消息／提示相关
-
成功02
.icon-success-fill
-
成功01
.icon-success-circle
-
出错02
.icon-fail-fill
-
出错01
.icon-fail-circle
-
警告02
.icon-warning-fill
-
警告01
.icon-warning-circle
-
提示02
.icon-tip-fill
-
提示01
.icon-tip-circle
-
状态-等待中
.icon-waiting-fill
-
问号符号
.icon-question-circle
maps 地图
mark 特殊标记
-
订单中心
.icon-dingdanzhongxin-fill
-
口碑管理
.icon-koubeiguanli-fill
-
团购闪惠
.icon-tuangoushanhui-fill
-
图片管理
.icon-tupianguanli-fill
-
会员管理
.icon-huiyuanguanli-fill
-
推广通
.icon-tuiguangtong-fill
-
活动报名
.icon-huodongbaoming-fill
-
经营参谋
.icon-jingyingcanmou-fill
-
订单管理
.icon-dingdanguanli-fill
-
同行排名
.icon-tonghangpaiming-fill
-
人气榜
.icon-renqibang-fill
-
门店管理
.icon-mendianguanli-fill
-
财务管理
.icon-caiwuguanli-fill
-
预订管理
.icon-yudingguanli-fill
-
码上付
.icon-mashangfu-fill
-
同城活动
.icon-tongchenghuodong-fill
-
直播
.icon-zhibo-fill
-
借钱
.icon-jieqian-fill
-
优惠促销
.icon-youhuicuxiao-fill
-
美店宝
.icon-meidianbao-fill
-
商家钱包
.icon-shangjiaqianbao-fill
-
智能支付
.icon-zhinengzhifu-fill
-
扫码付
.icon-saomafu-fill
-
美业大学
.icon-meiyedaxue-fill
-
上单管理
.icon-shangdanguanli-fill
-
内容管理
.icon-neirongguanli-fill
-
教育
.icon-jiaoyu-fill
-
商户管理
.icon-shanghuguanli-fill
-
免费试用
.icon-mianfeishiyong-fill
-
顾客营销
.icon-gukeyingxiao-fill
-
消费统计
.icon-xiaofeitongji
-
账单
.icon-zhangdan
-
团单管理
.icon-tuandanguanli
-
门店评价
.icon-mendianpingjia
-
团单管理
.icon-tuandanpingjia
-
商家问答
.icon-shangjiawenda
-
分店排名
.icon-fendianpaiming
-
同行排名
.icon-tonghangpaiming
-
竞对关注
.icon-jingduiguanzhu
-
开店参考
.icon-kaidiancankao
-
我的排名
.icon-wodepaiming
-
验券
.icon-yanquan
What is gfs-icons
gfs-icons是一套常用的iconfont库，具体分类及类型可参照Classify。
提供了iconfont.css/iconfont.less文件以及.eot/.svg/.ttf/.woff格式的字体文件，使用时只要引入css或less文件即可。
Install
// 使用npm安装
npm install gfs-icons --save
Usage
// 直接全局引用css文件
<link rel="stylesheet" href="https://future-team.github.io/gfs-icons/iconfont.css" />
// ES6引入less文件
import "gfs-icons/iconfont.less"
// less中引入node_modules中的less文件，通过less-loader打包即可
@import "gfs-icons/iconfont.less"
// 在html中使用
<i class="gfs-icon icon-more"></i>
How iconfont works?
Step 1. 设置@font-face
@font-face {font-family: "iconfont";
src: url('iconfont/iconfont.eot'); /* IE9*/
src: url('iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont/iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
Step 2. 设置font-family对应@font-face的font-family
.gfs-icon {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
Step 3. 设置content为对应的ascii码
.icon-more:before {
content: "\e608";
}
Step 4. 使用
<i class="gfs-icon icon-search"></i>