• 创作
    
  • 排行榜
    
  • 时间
    
  • 图片
    
  • 设计_画图
    
  • 商品
    
  • 产品
    
  • USDT
    
  • MWD
    
  • BCH
    
  • ETH
    
  • LTC
    
  • BTC
    
  • 搜索
    
  • 首页-首页
    
  • 我的
    
  • 爱心
    
  • 用户2
    
  • 转换
    
  • 转换
    
  • 24gf-chartBarUpward
    
  • 图表
    
  • 三角符,插入符,下
    
  • 三角符,插入符,上
    
  • 复选框
    
  • 正方形
    
  • 乘号,错误,失败
    
  • 对号,勾,正确,完成
    
  • 
  • 下 拉
    
  • 发送
    
  • 添加
    
  • 持仓股票
    
  • 首页
    
  • 首页
    
  • 密码
    
  • 个人中心
    
  • 商城,购物袋
    
  • 密码
    
  • 分享
    
  • 购物车
    
  • 个人中心
    
  • 等级,勋章
    
  • 我的
    
  • 商城,购物袋
    
  • 编辑
    
  • 钱包
    
  • 地址
    
  • 时间
    
  • 特权,VIP
    
  • 搜索
    
  • 农药
    
  • 套餐推荐
    
  • 全部
    
  • 商户管理
    
  • 编辑
    
  • 成功
    
  • 错误
    
  • 图片
    
  • 待发货
    
  • 待付款
    
  • 待收货
    
  • 
  • 下载量
    
  • 已购数量
    
  • 上架
    
  • 基础设置
    
  • 定位
    
  • 手机号
    
  • 余额
    
  • 
  • 
  • 更多
    
  • 
  • 购物车满
    
  • 电话
    
  • 返回
    
  • 二维码
    
  • 齿轮,设置,设定
    
  • 
    退出,出
    
  • 心,心形,心脏,爱心,实心
    
  • 好评,好,赞同,点赞,拇指,喜欢
    
  • 消息,失败
    
  • 货车
    
  • 复选框
    
  • 购物车
    
  • 正方形
    
  • 充值
    
  • 积分
    
  • 积分商城
    
  • 累计收益
    
  • 提现
    
  • 总收益
    
  • 关闭
    
  • 微信支付
    
  • 支付宝
    
  • 切换
    
  • 切换
    
  • 警示
    
  • 提示
    
  • 进行中
    
  • 退出
    
  • 退出
    
  • 分销
    
  • 支付
    
  • 扫码
    
  • 二维码
    
  • 支付
    
  • 绑定
    
  • 绑定
    
  • 清除
    
  • 任务
    
  • 任务
    
  • 发送
    
  • 分 享
    
  • 发送
    
  • 分 享
    
  • 分 享
    
  • 更新
    
  • 更新
    
  • 更新
    
  • 聊天
    
  • 聊天
    
  • 聊天
    
  • 超市
    
  • 
  • 
  • 
  • 钱包
    
  • 打印机_o
    
  • 苹果
    
  • 安卓
    
  • 下 载
    
  • 打印机
    
  • 照相机
    
  • 拍照,相机,摄影
    
  • 相机,拍摄,拍照,摄影,相册,camera
    
  • 分享
    
  • 专家线上答疑
    
  • 消息
    
  • 经纪人
    
  • 队伍
    
  • 切换
    
  • 加号
    
  • 我的
    
  • 闪聘
    
  • 通知
    
  • 15政策
    
  • 眼睛
    
  • 账单
    
  • 政策
    
  • 政策解读
    
  • 我的
    
  • 眼睛-开
    
  • 眼睛-关
    
  • 语言
    
  • 说明
    
  • 删除
    
  • 客服
    
  • 银联
    
  • icon_更多
    
  • 右三角
    
  • 查看
    
  • 分享
    
  • 205设置
    
  • 309下一页、前进、查看更多-圆框
    
  • 我的-我的
    
  • 排序
    
  • 客服
    
  • 加减组件 加号
    
  • visa
    
  • 眼睛_隐藏
    
  • 眼睛_显示
    
  • 我的
    
  • 筛选
    
  • 更多
    
  • 返回
    
  • 筛选
    
  • 资金流水
    
  • 发送
    
  • 银联
    
  • 更多
    
  • 对号
    
  • 空心五角星
    
  • 实心五角星
    
  • 复制
    
  • 向右更多
    
  • 解绑
    
  • 语言切换
    
  • 客户档案
    
  • 聊天
    
  • 通知
    
  • 星,星星,星形,半星,实星
    
  • 消息,成功
    
  • 排序
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1644379855284') format('woff2'),
       url('iconfont.woff?t=1644379855284') format('woff'),
       url('iconfont.ttf?t=1644379855284') format('truetype');
}

第二步:定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 创作
    .icon-chuangzuo
  • 排行榜
    .icon-paihangbang
  • 时间
    .icon-shijian
  • 图片
    .icon-tupian1
  • 设计_画图
    .icon-sheji_huatu
  • 商品
    .icon-shangpin
  • 产品
    .icon-chanpin
  • USDT
    .icon-USDT
  • MWD
    .icon-MWD
  • BCH
    .icon-BCH
  • ETH
    .icon-ETH
  • LTC
    .icon-LTC
  • BTC
    .icon-BTC
  • 搜索
    .icon-sousuo1
  • 首页-首页
    .icon-shouye-shouye
  • 我的
    .icon-wode3
  • 爱心
    .icon-aixin
  • 用户2
    .icon-yonghu
  • 转换
    .icon-zhuanhuan1
  • 转换
    .icon-zhuanhuan
  • 24gf-chartBarUpward
    .icon-24gf-chartBarUpward
  • 图表
    .icon-tubiao
  • 三角符,插入符,下
    .icon-insert-bottom-full
  • 三角符,插入符,上
    .icon-insert-top-full
  • 复选框
    .icon-checkbox-ok-full
  • 正方形
    .icon-checkbox-full
  • 乘号,错误,失败
    .icon-multiply-full
  • 对号,勾,正确,完成
    .icon-ok-full
  • .icon-shang
  • 下 拉
    .icon-xiala
  • 发送
    .icon-fasong3
  • 添加
    .icon-tianjiadingdan1
  • 持仓股票
    .icon-chicanggupiao
  • 首页
    .icon-icon_home
  • 首页
    .icon-icon_home1
  • 密码
    .icon-icon_password
  • 个人中心
    .icon-icon_personal
  • 商城,购物袋
    .icon-icon_mall-
  • 密码
    .icon-icon_password1
  • 分享
    .icon-icon_share
  • 购物车
    .icon-icon_shoppingcart
  • 个人中心
    .icon-icon_personal1
  • 等级,勋章
    .icon-icon_level
  • 我的
    .icon-icon_mine
  • 商城,购物袋
    .icon-icon_mall
  • 编辑
    .icon-icon_edit
  • 钱包
    .icon-icon_wallet
  • 地址
    .icon-icon_address
  • 时间
    .icon-icon_time
  • 特权,VIP
    .icon-icon_privilege
  • 搜索
    .icon-sousuo
  • 农药
    .icon-nongyao
  • 套餐推荐
    .icon-taocantuijian
  • 全部
    .icon-quanbu
  • 商户管理
    .icon-shanghuguanli
  • 编辑
    .icon-edit
  • 成功
    .icon-chenggong
  • 错误
    .icon-cuowu
  • 图片
    .icon-tupian
  • 待发货
    .icon-daifahuo
  • 待付款
    .icon-daifukuan
  • 待收货
    .icon-daishouhuo
  • .icon-xie
  • 下载量
    .icon-xiazailiang
  • 已购数量
    .icon-yigoushuliang
  • 上架
    .icon-shangjia
  • 基础设置
    .icon-jichushezhi
  • 定位
    .icon-dingwei
  • 手机号
    .icon-shoujihao
  • 余额
    .icon-yue
  • .icon-jian
  • .icon-jia
  • 更多
    .icon-gengduo
  • .icon-jia1
  • 购物车满
    .icon-gouwucheman
  • 电话
    .icon-dianhua
  • 返回
    .icon-fanhui
  • 二维码
    .icon-qrcode
  • 齿轮,设置,设定
    .icon-set
  • 退出,出
    .icon-exit-full
  • 心,心形,心脏,爱心,实心
    .icon-hear-full
  • 好评,好,赞同,点赞,拇指,喜欢
    .icon-like
  • 消息,失败
    .icon-news-failure
  • 货车
    .icon-truck
  • 复选框
    .icon-checkbox-ok
  • 购物车
    .icon-icon_shoppingcart-copy
  • 正方形
    .icon-checkbox
  • 充值
    .icon-chongzhi
  • 积分
    .icon-jifen
  • 积分商城
    .icon-jifenshangcheng
  • 累计收益
    .icon-leijishouyi
  • 提现
    .icon-tixian
  • 总收益
    .icon-zongshouyi
  • 关闭
    .icon-webicon309
  • 微信支付
    .icon-weixinzhifu
  • 支付宝
    .icon-zhifubao
  • 切换
    .icon-qiehuan
  • 切换
    .icon-tianchongxing-
  • 警示
    .icon-jingshi
  • 提示
    .icon-tishi
  • 进行中
    .icon-jinhangzhong
  • 退出
    .icon-tuichu
  • 退出
    .icon-qiehuanzuhu
  • 分销
    .icon-fenxiao
  • 支付
    .icon-zhifu
  • 扫码
    .icon-saoma
  • 二维码
    .icon-erweima
  • 支付
    .icon-zhifu1
  • 绑定
    .icon-bangding
  • 绑定
    .icon-bangding1
  • 清除
    .icon-qingchu
  • 任务
    .icon-renwu
  • 任务
    .icon-task
  • 发送
    .icon-fasong
  • 分 享
    .icon-fenxiang
  • 发送
    .icon-fasong1
  • 分 享
    .icon-fenxiang1
  • 分 享
    .icon-fenxiang2
  • 更新
    .icon-update
  • 更新
    .icon-gengxin
  • 更新
    .icon-update1
  • 聊天
    .icon-liaotian
  • 聊天
    .icon-liaotian1
  • 聊天
    .icon-liaotian2
  • 超市
    .icon-shiliangzhinengduixiang
  • .icon-sub
  • .icon-jia2
  • .icon-jian1
  • 钱包
    .icon-qianbao1
  • 打印机_o
    .icon-dayinji_o
  • 苹果
    .icon-pingguo
  • 安卓
    .icon-anzhuo
  • 下 载
    .icon-xiazai1
  • 打印机
    .icon-dayinji
  • 照相机
    .icon-zhaoxiangji
  • 拍照,相机,摄影
    .icon-huaban-
  • 相机,拍摄,拍照,摄影,相册,camera
    .icon-camera
  • 分享
    .icon-fenxiang3
  • 专家线上答疑
    .icon-zhuanjiaxianshangdayi
  • 消息
    .icon-xiaoxi
  • 经纪人
    .icon-jingjiren
  • 队伍
    .icon-tubiaozhizuomoban
  • 切换
    .icon-qiehuan1
  • 加号
    .icon-jiahao
  • 我的
    .icon-wode
  • 闪聘
    .icon-lightning
  • 通知
    .icon-tongzhi1
  • 15政策
    .icon-zhengce
  • 眼睛
    .icon-yanjing
  • 账单
    .icon-zhangdan
  • 政策
    .icon-zhengce1
  • 政策解读
    .icon-zhengcejiedu
  • 我的
    .icon-wode2
  • 眼睛-开
    .icon-yanjing-kai
  • 眼睛-关
    .icon-yanjing-guan
  • 语言
    .icon-yuyan
  • 说明
    .icon-shuoming
  • 删除
    .icon-shanchu
  • 客服
    .icon-wodekefu
  • 银联
    .icon-yinlian
  • icon_更多
    .icon-icongengduo
  • 右三角
    .icon-yousanjiao
  • 查看
    .icon-chakan
  • 分享
    .icon-ziyuan
  • 205设置
    .icon-shezhi
  • 309下一页、前进、查看更多-圆框
    .icon-xiayiyeqianjinchakangengduo-yuankuang
  • 我的-我的
    .icon-wode-wode
  • 排序
    .icon-paixu
  • 客服
    .icon-kefu
  • 加减组件 加号
    .icon-jiajianzujianjiahao
  • visa
    .icon-visa
  • 眼睛_隐藏
    .icon-yanjing_yincang
  • 眼睛_显示
    .icon-yanjing_xianshi
  • 我的
    .icon-wode1
  • 筛选
    .icon-shaixuan1
  • 更多
    .icon-yanzhengma
  • 返回
    .icon-fanhui1
  • 筛选
    .icon-shaixuan
  • 资金流水
    .icon-zijinliushui
  • 发送
    .icon-fasong2
  • 银联
    .icon-yinlian1
  • 更多
    .icon-gengduo1
  • 对号
    .icon-duihao
  • 空心五角星
    .icon-kongxinwujiaoxing
  • 实心五角星
    .icon-shixinwujiaoxing
  • 复制
    .icon-fuzhi
  • 向右更多
    .icon-xiangyougengduo
  • 解绑
    .icon-jiebang
  • 语言切换
    .icon-icon_A
  • 客户档案
    .icon-kehudangan
  • 聊天
    .icon-liaotian3
  • 通知
    .icon-tongzhi
  • 星,星星,星形,半星,实星
    .icon-star-full
  • 消息,成功
    .icon-news-success-full
  • 排序
    .icon-sort-full

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

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

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 创作
    #icon-chuangzuo
  • 排行榜
    #icon-paihangbang
  • 时间
    #icon-shijian
  • 图片
    #icon-tupian1
  • 设计_画图
    #icon-sheji_huatu
  • 商品
    #icon-shangpin
  • 产品
    #icon-chanpin
  • USDT
    #icon-USDT
  • MWD
    #icon-MWD
  • BCH
    #icon-BCH
  • ETH
    #icon-ETH
  • LTC
    #icon-LTC
  • BTC
    #icon-BTC
  • 搜索
    #icon-sousuo1
  • 首页-首页
    #icon-shouye-shouye
  • 我的
    #icon-wode3
  • 爱心
    #icon-aixin
  • 用户2
    #icon-yonghu
  • 转换
    #icon-zhuanhuan1
  • 转换
    #icon-zhuanhuan
  • 24gf-chartBarUpward
    #icon-24gf-chartBarUpward
  • 图表
    #icon-tubiao
  • 三角符,插入符,下
    #icon-insert-bottom-full
  • 三角符,插入符,上
    #icon-insert-top-full
  • 复选框
    #icon-checkbox-ok-full
  • 正方形
    #icon-checkbox-full
  • 乘号,错误,失败
    #icon-multiply-full
  • 对号,勾,正确,完成
    #icon-ok-full
  • #icon-shang
  • 下 拉
    #icon-xiala
  • 发送
    #icon-fasong3
  • 添加
    #icon-tianjiadingdan1
  • 持仓股票
    #icon-chicanggupiao
  • 首页
    #icon-icon_home
  • 首页
    #icon-icon_home1
  • 密码
    #icon-icon_password
  • 个人中心
    #icon-icon_personal
  • 商城,购物袋
    #icon-icon_mall-
  • 密码
    #icon-icon_password1
  • 分享
    #icon-icon_share
  • 购物车
    #icon-icon_shoppingcart
  • 个人中心
    #icon-icon_personal1
  • 等级,勋章
    #icon-icon_level
  • 我的
    #icon-icon_mine
  • 商城,购物袋
    #icon-icon_mall
  • 编辑
    #icon-icon_edit
  • 钱包
    #icon-icon_wallet
  • 地址
    #icon-icon_address
  • 时间
    #icon-icon_time
  • 特权,VIP
    #icon-icon_privilege
  • 搜索
    #icon-sousuo
  • 农药
    #icon-nongyao
  • 套餐推荐
    #icon-taocantuijian
  • 全部
    #icon-quanbu
  • 商户管理
    #icon-shanghuguanli
  • 编辑
    #icon-edit
  • 成功
    #icon-chenggong
  • 错误
    #icon-cuowu
  • 图片
    #icon-tupian
  • 待发货
    #icon-daifahuo
  • 待付款
    #icon-daifukuan
  • 待收货
    #icon-daishouhuo
  • #icon-xie
  • 下载量
    #icon-xiazailiang
  • 已购数量
    #icon-yigoushuliang
  • 上架
    #icon-shangjia
  • 基础设置
    #icon-jichushezhi
  • 定位
    #icon-dingwei
  • 手机号
    #icon-shoujihao
  • 余额
    #icon-yue
  • #icon-jian
  • #icon-jia
  • 更多
    #icon-gengduo
  • #icon-jia1
  • 购物车满
    #icon-gouwucheman
  • 电话
    #icon-dianhua
  • 返回
    #icon-fanhui
  • 二维码
    #icon-qrcode
  • 齿轮,设置,设定
    #icon-set
  • 退出,出
    #icon-exit-full
  • 心,心形,心脏,爱心,实心
    #icon-hear-full
  • 好评,好,赞同,点赞,拇指,喜欢
    #icon-like
  • 消息,失败
    #icon-news-failure
  • 货车
    #icon-truck
  • 复选框
    #icon-checkbox-ok
  • 购物车
    #icon-icon_shoppingcart-copy
  • 正方形
    #icon-checkbox
  • 充值
    #icon-chongzhi
  • 积分
    #icon-jifen
  • 积分商城
    #icon-jifenshangcheng
  • 累计收益
    #icon-leijishouyi
  • 提现
    #icon-tixian
  • 总收益
    #icon-zongshouyi
  • 关闭
    #icon-webicon309
  • 微信支付
    #icon-weixinzhifu
  • 支付宝
    #icon-zhifubao
  • 切换
    #icon-qiehuan
  • 切换
    #icon-tianchongxing-
  • 警示
    #icon-jingshi
  • 提示
    #icon-tishi
  • 进行中
    #icon-jinhangzhong
  • 退出
    #icon-tuichu
  • 退出
    #icon-qiehuanzuhu
  • 分销
    #icon-fenxiao
  • 支付
    #icon-zhifu
  • 扫码
    #icon-saoma
  • 二维码
    #icon-erweima
  • 支付
    #icon-zhifu1
  • 绑定
    #icon-bangding
  • 绑定
    #icon-bangding1
  • 清除
    #icon-qingchu
  • 任务
    #icon-renwu
  • 任务
    #icon-task
  • 发送
    #icon-fasong
  • 分 享
    #icon-fenxiang
  • 发送
    #icon-fasong1
  • 分 享
    #icon-fenxiang1
  • 分 享
    #icon-fenxiang2
  • 更新
    #icon-update
  • 更新
    #icon-gengxin
  • 更新
    #icon-update1
  • 聊天
    #icon-liaotian
  • 聊天
    #icon-liaotian1
  • 聊天
    #icon-liaotian2
  • 超市
    #icon-shiliangzhinengduixiang
  • #icon-sub
  • #icon-jia2
  • #icon-jian1
  • 钱包
    #icon-qianbao1
  • 打印机_o
    #icon-dayinji_o
  • 苹果
    #icon-pingguo
  • 安卓
    #icon-anzhuo
  • 下 载
    #icon-xiazai1
  • 打印机
    #icon-dayinji
  • 照相机
    #icon-zhaoxiangji
  • 拍照,相机,摄影
    #icon-huaban-
  • 相机,拍摄,拍照,摄影,相册,camera
    #icon-camera
  • 分享
    #icon-fenxiang3
  • 专家线上答疑
    #icon-zhuanjiaxianshangdayi
  • 消息
    #icon-xiaoxi
  • 经纪人
    #icon-jingjiren
  • 队伍
    #icon-tubiaozhizuomoban
  • 切换
    #icon-qiehuan1
  • 加号
    #icon-jiahao
  • 我的
    #icon-wode
  • 闪聘
    #icon-lightning
  • 通知
    #icon-tongzhi1
  • 15政策
    #icon-zhengce
  • 眼睛
    #icon-yanjing
  • 账单
    #icon-zhangdan
  • 政策
    #icon-zhengce1
  • 政策解读
    #icon-zhengcejiedu
  • 我的
    #icon-wode2
  • 眼睛-开
    #icon-yanjing-kai
  • 眼睛-关
    #icon-yanjing-guan
  • 语言
    #icon-yuyan
  • 说明
    #icon-shuoming
  • 删除
    #icon-shanchu
  • 客服
    #icon-wodekefu
  • 银联
    #icon-yinlian
  • icon_更多
    #icon-icongengduo
  • 右三角
    #icon-yousanjiao
  • 查看
    #icon-chakan
  • 分享
    #icon-ziyuan
  • 205设置
    #icon-shezhi
  • 309下一页、前进、查看更多-圆框
    #icon-xiayiyeqianjinchakangengduo-yuankuang
  • 我的-我的
    #icon-wode-wode
  • 排序
    #icon-paixu
  • 客服
    #icon-kefu
  • 加减组件 加号
    #icon-jiajianzujianjiahao
  • visa
    #icon-visa
  • 眼睛_隐藏
    #icon-yanjing_yincang
  • 眼睛_显示
    #icon-yanjing_xianshi
  • 我的
    #icon-wode1
  • 筛选
    #icon-shaixuan1
  • 更多
    #icon-yanzhengma
  • 返回
    #icon-fanhui1
  • 筛选
    #icon-shaixuan
  • 资金流水
    #icon-zijinliushui
  • 发送
    #icon-fasong2
  • 银联
    #icon-yinlian1
  • 更多
    #icon-gengduo1
  • 对号
    #icon-duihao
  • 空心五角星
    #icon-kongxinwujiaoxing
  • 实心五角星
    #icon-shixinwujiaoxing
  • 复制
    #icon-fuzhi
  • 向右更多
    #icon-xiangyougengduo
  • 解绑
    #icon-jiebang
  • 语言切换
    #icon-icon_A
  • 客户档案
    #icon-kehudangan
  • 聊天
    #icon-liaotian3
  • 通知
    #icon-tongzhi
  • 星,星星,星形,半星,实星
    #icon-star-full
  • 消息,成功
    #icon-news-success-full
  • 排序
    #icon-sort-full

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>