• 加载
    
  • 下箭头
    
  • 图层
    
  • 复制
    
  • 粘贴
    
  • 标记
    
  • 编辑
    
  • 右对齐
    
  • 左对齐
    
  • 组件
    
  • 居中对齐
    
  • 关闭
    
  • 两端对齐
    
  • 两端对齐
    
  • 无边框
    
  • 外边框
    
  • 下边框
    
  • 上边框
    
  • 左边框
    
  • 右边框
    
  • 设置圆角
    
  • 字体
    
  • 字体
    
  • 按键分割线
    
  • 换行
    
  • 框架_frame23
    
  • 线框
    
  • 框选
    
  • 下框线
    
  • 上框线
    
  • 左框线
    
  • 右框线
    
  • 外侧框线
    
  • 垂直间距
    
  • 水平间距
    
  • 不可视
    
  • 可视
    
  • colum-height
    
  • column-width
    
  • 垂直居中对齐
    
  • 水平居中对齐
    
  • 右对齐
    
  • 左对齐
    
  • 网页
    
  • 顶部对齐
    
  • 底部对齐
    
  • 水平等距分布
    
  • 垂直等距分布
    
  • 邮箱
    
  • 
  • 合同
    
  • 归档
    
  • 印章
    
  • kpi
    
  • 流程
    
  • 风险
    
  • 自动化运维
    
  • 联考模式
    
  • 配置
    
  • 流程
    
  • 信用支付
    
  • 收款
    
  • 特色服务icon
    
  • 承诺函
    
  • 正品行货
    
  • 9-劳联保险@三合一
    
  • 网页
    
  • 打折
    
  • 地址
    
  • 商户管理
    
  • 优惠券
    
  • 货币
    
  • 支付
    
  • 运费查询
    
  • 核销
    
  • 规格参数
    
  • h5
    
  • APP
    
  • APP
    
  • 微信
    
  • 积分
    
  • 满减优惠
    
  • 电脑
    
  • 
  • 已使用
    
  • 已过期
    
  • 无评论
    
  • 红包
    
  • 关注
    
  • 暂无优惠券
    
  • 红包
    
  • 已评价
    
  • 模块
    
  • 
  • 促销活动
    
  • 任务
    
  • FaceBook
    
  • 电话
    
  • QQ
    
  • 通知
    
  • VIP
    
  • 积分
    
  • 兑换
    
  • 支付倒计时
    
  • 秒杀
    
  • 待收货
    
  • 等待
    
  • 已取消
    
  • 待付款
    
  • 已取消
    
  • 无商品
    
  • 已领取
    
  • 已抢光-完整
    
  • 签到
    
  • 支付设置
    
  • 筛选
    
  • 文件
    
  • 文件夹
    
  • Excel
    
  • ppt
    
  • word
    
  • 图片
    
  • 日期
    
  • 扫一扫
    
  • 缺省页-暂无数据_复制
    
  • 上传
    
  • 短信验证码
    
  • 条形进度条
    
  • 文本框
    
  • 多行文本
    
  • 百货
    
  • 母婴
    
  • 美妆
    
  • 百货
    
  • 食品
    
  • 男装
    
  • 食品
    
  • 男装
    
  • 女装
    
  • 母婴
    
  • 鞋子
    
  • 倒计时
    
  • 食品
    
  • 鞋包-女包
    
  • 配置_底部工具栏
    
  • 合并单元格-01
    
  • 分类
    
  • 定时
    
  • 广告
    
  • 积分
    
  • 发货运费统计
    
  • 优惠卷
    
  • 待发货
    
  • 待收货
    
  • 退款
    
  • 收 藏-产品详情
    
  • 消息
    
  • 数据
    
  • 评论
    
  • 等待卖家确认运费-[转换]
    
  • 返 回
    
  • 表单
    
  • 自定义
    
  • 排序、排行
    
  • 排序-降序
    
  • 排序-升序
    
  • 关 闭
    
  • 初始化设置
    
  • 复制代码
    
  • 关注
    
  • 发送消息
    
  • 日志
    
  • 商城
    
  • 内容
    
  • 站群
    
  • 权限管理
    
  • 内容管理
    
  • 系统管理
    
  • 会员中心
    
  • 移交 转交
    
  • 自定义
    
  • 更多
    
  • 树形
    
  • 导入
    
  • 高德地图
    
  • 城市
    
  • 文本
    
  • 按钮
    
  • 上拉菜单
    
  • 步进器
    
  • 搜索框
    
  • 环形进度图
    
  • 搜索框A
    
  • 标签
    
  • 分割线
    
  • 16_GJW单元格填充色
    
  • 标签页
    
  • 进度条
    
  • 字段设置@2x
    
  • 轮播图
    
  • 九宫格
    
  • 保存
    
  • 1010布局_导航栏
    
  • 超链接
    
  • 长方形
    
  • 正方形
    
  • 链接
    
  • 动画
    
  • 页面
    
  • 新增
    
  • 背景
    
  • 暂无项目信息
    
  • gitee
    
  • 企业
    
  • 服务
    
  • 招聘就业
    
  • 活动
    
  • 大楼
    
  • 办公室
    
  • 字号+
    
  • 字号-
    
  • 地球,国际化,语言切换
    
  • pdf
    
  • 中国
    
  • 世界
    
  • 404
    
  • 500
    
  • QQ
    
  • 微信
    
  • 升级中
    
  • 中国
    
  • 全球
    
  • 退出
    
  • 闭眼
    
  • 筛选
    
  • 浏览记录
    
  • 分类
    
  • 首页
    
  • 我的
    
  • 筛选
    
  • 响应式
    
  • 小程序
    
  • 颜色
    
  • 工作转交
    
  • 眼睛
    
  • 点击
    
  • 新建
    
  • 暂无记录
    
  • 无网络
    
  • VIP
    
  • VIP @3x
    
  • github
    
  • spring
    
  • 闭眼
    
  • 待审核
    
  • 1印章(已结清)
    
  • 菜单
    
  • 列表
    
  • 
  • 微信支付
    
  • 支付宝
    
  • 推荐
    
  • 应用源码
    
  • 私有云
    
  • 选中
    
  • 
  • 项目
    
  • 年卡
    
  • 验证码
    
  • +喜欢
    
  • 足迹
    
  • 评价
    
  • 签到
    
  • 礼物
    
  • 优惠券
    
  • 红包
    
  • 分类
    
  • 栅格2
    
  • 评分
    
  • 图片
    
  • 编辑器
    
  • 音频
    
  • 符号-密码输入框
    
  • 日期选择
    
  • 计算器 (1)
    
  • 时间
    
  • 多选框
    
  • 文件
    
  • 多行文本
    
  • 单行文本
    
  • 开关-关
    
  • 滑块-01
    
  • -_级联下拉功能框
    
  • 视频
    
  • 单选框
    
  • 颜色
    
  • 自定义
    
  • 电话
    
  • 邮件
    
  • 感叹号
    
  • 选中
    
  • 模板
    
  • 收益
    
  • 用户
    
  • 项目
    
  • 项目
    
  • 代码
    
  • 手机
    
  • 列表向左
    
  • 列表向右
    
  • 文档
    
  • 拖动
    
  • 复制
    
  • 清空
    
  • Sql Server
    
  • 代码
    
  • 皮肤
    
  • 账号登录
    
  • 二维码登录
    
  • 百度
    
  • 百度
    
  • 小米
    
  • 华为
    
  • 小米
    
  • 华为
    
  • 滴滴出行
    
  • 淘宝
    
  • 淘宝
    
  • 电信
    
  • 联通
    
  • 电信
    
  • 联通
    
  • 中国移动
    
  • 中国移动
    
  • 中国移动
    
  • github
    
  • Github
    
  • 谷歌验证
    
  • 谷歌logo
    
  • QQ
    
  • QQ
    
  • qq
    
  • 微博
    
  • 微博
    
  • 支付宝
    
  • 微信
    
  • 微信
    
  • 支付宝
    
  • 银行卡
    
  • 目标
    
  • 女性
    
  • 男性
    
  • 星星
    
  • 设置
    
  • 加载
    
  • 刷新
    
  • 电源
    
  • 纸飞机
    
  • 回形针
    
  • 放大
    
  • 缩小
    
  • 放大镜
    
  • 开锁
    
  • 
  • 链接
    
  • 钥匙
    
  • 信息
    
  • 爱心
    
  • 旗帜
    
  • 
  • 邮件
    
  • 下载
    
  • 上传
    
  • 相机
    
  • 视频
    
  • 气泡
    
  • 禁止
    
  • 进度
    
  • 灯泡
    
  • 日历
    
  • 无声
    
  • 声音
    
  • 声音
    
  • 结束
    
  • 暂停
    
  • 倒退
    
  • 快进
    
  • 开始
    
  • 
  • 
  • 均衡器_画板 1
    
  • 客服
    
  • 耳机
    
  • 音乐
    
  • 音乐 (1)
    
  • 语音
    
  • 图表
    
  • 格子
    
  • 主页
    
  • 环形布局
    
  • 审核 笔记 记事本 写字
    
  • 
  • 饼图
    
  • 问题
    
  • 火箭
    
  • 分享
    
  • 分享
    
  • 分享
    
  • 随机
    
  • 全屏
    
  • 框架版本
    
  • 标签
    
  • 垃圾桶
    
  • 雨伞
    
  • 工具
    
  • 下一步
    
  • 返回
    
  • 袋,购物,购物,电子商务
    
  • 购物车
    
  • 
  • 公文包
    
  • 气泡
    
  • 计算器
    
  • 杯子
    
  • 钻石
    
  • 文档
    
  • 文档 (1)
    
  • 抽屉
    
  • 水滴
    
  • wifi
    
  • 电影
    
  • 文件夹
    
  • 文件夹
    
  • 全球
    
  • 地球仪
    
  • 包配
    
  • 照片
    
  • 大头针
    
  • 播放器_首页歌曲列表_32
    
  • 礼物
    
  • 打印机 打印 线性
    
  • 拼图
    
  • 演讲稿 演讲 分析 PPT 线性
    
  • 矢量地图
    
  • 钱包
    
  • 船锚
    
  • 徽章
    
  • 铃铛
    
  • 信件_1
    
  • 
  • 眼镜
    
  • 
  • 游戏 游戏厅 游戏机 游戏手柄 线性
    
  • 搞怪
    
  • 毕业
    
  • 沙漏
    
  • 魔法棒
    
  • 平板-2
    
  • 盾牌
    
  • 速度
    
  • 化学方程
    
  • 裁剪
    
  • 移动光标
    
  • 光标
    
  • 唱片
    
  • 闪电
    
  • 吸铁磁
    
  • 鼠标
    
  • 胡子
    
  • 记事本
    
  • 飞机
    
  • 桌面
    
  • 手机
    
  • 奖杯
    
  • 警告
    
  • 事件统计
    
  • 组织
    
  • 关闭
    
  • 
  • 
  • 时钟
    
  • 完成
    
  • 箭头2-下
    
  • 箭头2-右
    
  • 箭头2-上
    
  • 箭头2-左
    
  • 菜单
    
  • 
  • 下拉
    
  • compass-指南针
    
  • 定位
    
  • 楼层
    
  • 地图
    
  • 
  • 
  • 更多
    
  • 更多
    
  • 指示
    
  • 菜单/列表
    
  • 我的
    
  • 挂电话2
    
  • phone5-电话
    
  • phone4-电话
    
  • 
  • 笑脸
    
  • 回拨电话
    
  • 关注作者 已关注
    
  • 退出
    
  • 
  • 取消关注
    
  • 电话
    
  • 用户
    
  • 进入
    
  • 关注
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 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-jiazai1
  • 下箭头
    .icon-xiajiantou1
  • 图层
    .icon-tuceng
  • 复制
    .icon-fuzhi1
  • 粘贴
    .icon-niantie
  • 标记
    .icon-icon_huabanfuben
  • 编辑
    .icon-bianji1
  • 右对齐
    .icon-youduiqi1
  • 左对齐
    .icon-zuoduiqi1
  • 组件
    .icon-zujian
  • 居中对齐
    .icon-juzhongduiqi
  • 关闭
    .icon-guanbi2
  • 两端对齐
    .icon-liangduanduiqi1
  • 两端对齐
    .icon-liangduanduiqi
  • 无边框
    .icon-wubiankuang
  • 外边框
    .icon-waibiankuang
  • 下边框
    .icon-xiabiankuang
  • 上边框
    .icon-shangbiankuang
  • 左边框
    .icon-zuobiankuang
  • 右边框
    .icon-youbiankuang
  • 设置圆角
    .icon-yuanjiao
  • 字体
    .icon-zitifont8
  • 字体
    .icon-ziti
  • 按键分割线
    .icon-anjianfengexian
  • 换行
    .icon-huanhang
  • 框架_frame23
    .icon-kuangjiaframe23
  • 线框
    .icon-icon-xiankuang
  • 框选
    .icon-box-select
  • 下框线
    .icon-xiakuangxian
  • 上框线
    .icon-shangkuangxian
  • 左框线
    .icon-zuokuangxian
  • 右框线
    .icon-youkuangxian
  • 外侧框线
    .icon-waicekuangxian
  • 垂直间距
    .icon-chuizhijianju-
  • 水平间距
    .icon-shuipingjianju-
  • 不可视
    .icon-bukeshi
  • 可视
    .icon-keshi
  • colum-height
    .icon-colum-height
  • column-width
    .icon-column-width
  • 垂直居中对齐
    .icon-chuizhijuzhongduiqi
  • 水平居中对齐
    .icon-shuipingjuzhongduiqi
  • 右对齐
    .icon-youduiqi
  • 左对齐
    .icon-zuoduiqi
  • 网页
    .icon-wangye1
  • 顶部对齐
    .icon-dingbuduiqi
  • 底部对齐
    .icon-dibuduiqi
  • 水平等距分布
    .icon-shuipingdengjufenbu
  • 垂直等距分布
    .icon-chuizhidengjufenbu
  • 邮箱
    .icon-youxiang
  • .icon-dui
  • 合同
    .icon-hetong
  • 归档
    .icon-guidang
  • 印章
    .icon-yinzhang
  • kpi
    .icon-kpi
  • 流程
    .icon-liucheng
  • 风险
    .icon-risk
  • 自动化运维
    .icon-oper-auto
  • 联考模式
    .icon-liankaomoshi
  • 配置
    .icon-peizhi
  • 流程
    .icon-liucheng1
  • 信用支付
    .icon-xinyongzhifu
  • 收款
    .icon-shoukuan
  • 特色服务icon
    .icon-tesefuwuicon
  • 承诺函
    .icon-chengnuohan
  • 正品行货
    .icon-zhengpinhanghuo
  • 9-劳联保险@三合一
    .icon--laolianbaoxiansanheyi
  • 网页
    .icon-wangye
  • 打折
    .icon-dazhe
  • 地址
    .icon-dizhi
  • 商户管理
    .icon-shanghuguanli
  • 优惠券
    .icon-youhuiquan1
  • 货币
    .icon-huobi
  • 支付
    .icon-zhifu1
  • 运费查询
    .icon-yunfeichaxun
  • 核销
    .icon-hexiao
  • 规格参数
    .icon-guigecanshu
  • h5
    .icon-h5
  • APP
    .icon-APP
  • APP
    .icon-APP1
  • 微信
    .icon-weixin3
  • 积分
    .icon-icon_jifen
  • 满减优惠
    .icon-manjianyouhui
  • 电脑
    .icon-computer_icon
  • .icon-quan
  • 已使用
    .icon-yishiyong
  • 已过期
    .icon-yiguoqi
  • 无评论
    .icon-wupinglun
  • 红包
    .icon-hongbao2
  • 关注
    .icon-guanzhu2
  • 暂无优惠券
    .icon-zanwuyouhuiquan
  • 红包
    .icon-hongbao
  • 已评价
    .icon-yipingjia
  • 模块
    .icon-mokuai
  • .icon-shang
  • 促销活动
    .icon-cuxiaohuodong
  • 任务
    .icon-renwu
  • FaceBook
    .icon-tian7_facebook
  • 电话
    .icon-dianhua1
  • QQ
    .icon-QQ4
  • 通知
    .icon-tongzhi
  • VIP
    .icon-VIP1
  • 积分
    .icon-jifen1
  • 兑换
    .icon-duihuan
  • 支付倒计时
    .icon-zhifudaojishi
  • 秒杀
    .icon-miaosha
  • 待收货
    .icon-daishouhuo1
  • 等待
    .icon-dengdai
  • 已取消
    .icon-yiquxiao
  • 待付款
    .icon-daifukuan
  • 已取消
    .icon-yiquxiao1
  • 无商品
    .icon-wushangpin
  • 已领取
    .icon-yilingqu
  • 已抢光-完整
    .icon-yiqiangguang
  • 签到
    .icon-qiandao
  • 支付设置
    .icon-zhifushezhi
  • 筛选
    .icon-shaixuan1
  • 文件
    .icon-wenjian2
  • 文件夹
    .icon-wenjianjia2
  • Excel
    .icon-ziliao-Excel
  • ppt
    .icon-ziliao-ppt
  • word
    .icon-ziliao-word
  • 图片
    .icon-tupian1
  • 日期
    .icon-riqi
  • 扫一扫
    .icon-saoyisao
  • 缺省页-暂无数据_复制
    .icon-queshengyezanwushuju
  • 上传
    .icon-shangchuan1
  • 短信验证码
    .icon-duanxinyanzhengma
  • 条形进度条
    .icon-tiaoxingjindutiao
  • 文本框
    .icon-wenbenkuang
  • 多行文本
    .icon-duohangwenben1
  • 百货
    .icon-baihuo
  • 母婴
    .icon-muying
  • 美妆
    .icon-meizhuang
  • 百货
    .icon-baihuo1
  • 食品
    .icon-shipin2
  • 男装
    .icon-nanzhuang
  • 食品
    .icon-tianpin
  • 男装
    .icon-nanzhuang1
  • 女装
    .icon-nvzhuang
  • 母婴
    .icon-muyingchanpin
  • 鞋子
    .icon-xiezi
  • 倒计时
    .icon-daojishi
  • 食品
    .icon-shipin4
  • 鞋包-女包
    .icon-xiebao-nvbao
  • 配置_底部工具栏
    .icon-biaoqianlan
  • 合并单元格-01
    .icon-hebingdanyuange-
  • 分类
    .icon-icon_category
  • 定时
    .icon-dingshi
  • 广告
    .icon-guanggao
  • 积分
    .icon-jifen
  • 发货运费统计
    .icon-fahuoyunfeitongji
  • 优惠卷
    .icon-youhuijuan
  • 待发货
    .icon-daifahuo
  • 待收货
    .icon-daishouhuo
  • 退款
    .icon-tuikuan
  • 收 藏-产品详情
    .icon-shoucang
  • 消息
    .icon-xiaoxi
  • 数据
    .icon-shuju
  • 评论
    .icon-pinglun
  • 等待卖家确认运费-[转换]
    .icon-yunfei
  • 返 回
    .icon-fanhui1
  • 表单
    .icon-biaodan
  • 自定义
    .icon-zidingyimoxing
  • 排序、排行
    .icon-paixu
  • 排序-降序
    .icon-paixu-jiangxu
  • 排序-升序
    .icon-paixu-shengxu
  • 关 闭
    .icon-guanbi1
  • 初始化设置
    .icon-chushihuashezhi
  • 复制代码
    .icon-fuzhidaima
  • 关注
    .icon-guanzhu1
  • 发送消息
    .icon-fasong
  • 日志
    .icon-rizhi
  • 商城
    .icon-shangcheng
  • 内容
    .icon-neirong
  • 站群
    .icon-zhanqun
  • 权限管理
    .icon-quanxianguanli
  • 内容管理
    .icon-neirongguanli
  • 系统管理
    .icon-xitongguanli
  • 会员中心
    .icon-huiyuanzhongxin
  • 移交 转交
    .icon-yijiaozhuanjiao
  • 自定义
    .icon-zidingyiguanli
  • 更多
    .icon-Mstore
  • 树形
    .icon-shuxing
  • 导入
    .icon-daoru
  • 高德地图
    .icon-gaodeditu
  • 城市
    .icon-chengshi
  • 文本
    .icon-putongwenben
  • 按钮
    .icon-anniu
  • 上拉菜单
    .icon-shanglacaidan
  • 步进器
    .icon-bujinqi
  • 搜索框
    .icon-sousuokuang
  • 环形进度图
    .icon-huanxingjindutu
  • 搜索框A
    .icon-sousuokuangA
  • 标签
    .icon-label
  • 分割线
    .icon-fengexian
  • 16_GJW单元格填充色
    .icon-_GJWdanyuangetianchongse
  • 标签页
    .icon-biaoqianye
  • 进度条
    .icon-jindutiao
  • 字段设置@2x
    .icon-ziduanshezhix
  • 轮播图
    .icon-tubiaozhizuomoban
  • 九宫格
    .icon-jiugongge
  • 保存
    .icon-baocun
  • 1010布局_导航栏
    .icon-buju_daohanglan
  • 超链接
    .icon-chaolianjie
  • 长方形
    .icon-changfangxing1
  • 正方形
    .icon-zhengfangxing
  • 链接
    .icon-lianjie1
  • 动画
    .icon-xing
  • 页面
    .icon-yemian
  • 新增
    .icon-xinzeng
  • 背景
    .icon-beijing
  • 暂无项目信息
    .icon-zanwuxiangmuxinxi
  • gitee
    .icon-gitee
  • 企业
    .icon-qiye
  • 服务
    .icon-fuwu
  • 招聘就业
    .icon-jiuyeju
  • 活动
    .icon-huodong
  • 大楼
    .icon-fuhuaqi
  • 办公室
    .icon-bangongshi
  • 字号+
    .icon-zihao
  • 字号-
    .icon-zihao-
  • 地球,国际化,语言切换
    .icon-huaban-
  • pdf
    .icon-pdf
  • 中国
    .icon-icon-china
  • 世界
    .icon-icon-shijie
  • 404
    .icon-icon-test
  • 500
    .icon-icon-test1
  • QQ
    .icon-QQ3
  • 微信
    .icon-weixin2
  • 升级中
    .icon-shengjizhong
  • 中国
    .icon-zhongguo
  • 全球
    .icon-quanqiu1
  • 退出
    .icon-tuichu1
  • 闭眼
    .icon-biyan1
  • 筛选
    .icon-juxing
  • 浏览记录
    .icon-juxing1
  • 分类
    .icon-fenlei1
  • 首页
    .icon-shouye
  • 我的
    .icon-wode1
  • 筛选
    .icon-shaixuan
  • 响应式
    .icon-xiangyingshi
  • 小程序
    .icon-xiaochengxu
  • 颜色
    .icon-beijingse
  • 工作转交
    .icon-zhuanjiao
  • 眼睛
    .icon-dakaiyanjing
  • 点击
    .icon-dianji
  • 新建
    .icon-xinjian1
  • 暂无记录
    .icon-zanwushuju
  • 无网络
    .icon-wuwangluo
  • VIP
    .icon-VIP
  • VIP @3x
    .icon-VIPx
  • github
    .icon-github
  • spring
    .icon-spring
  • 闭眼
    .icon-biyan
  • 待审核
    .icon-daishenhe
  • 1印章(已结清)
    .icon-yinzhangyijieqing
  • 菜单
    .icon-menu
  • 列表
    .icon-liebiao1
  • .icon-biao
  • 微信支付
    .icon-weixinzhifu1
  • 支付宝
    .icon-WePayLogo
  • 推荐
    .icon-tuijian
  • 应用源码
    .icon-yingyongyuanma
  • 私有云
    .icon-siyouyun
  • 选中
    .icon-xuanzhong1
  • .icon-plus
  • 项目
    .icon-xiangmu1
  • 年卡
    .icon-nianqia
  • 验证码
    .icon-yanzhengma
  • +喜欢
    .icon-shangpinshoucang
  • 足迹
    .icon-liulanjilu
  • 评价
    .icon-pingjia
  • 签到
    .icon-qiandaolingjifen
  • 礼物
    .icon-jifenshangcheng
  • 优惠券
    .icon-youhuiquan
  • 红包
    .icon-hongbao1
  • 分类
    .icon-fenlei
  • 栅格2
    .icon-shange
  • 评分
    .icon-appxiugaiicon45
  • 图片
    .icon-tupian
  • 编辑器
    .icon-redact
  • 音频
    .icon-audio
  • 符号-密码输入框
    .icon-mimashurukuang
  • 日期选择
    .icon-riqixuanze
  • 计算器 (1)
    .icon-jisuanqi1
  • 时间
    .icon-shijian1
  • 多选框
    .icon-duoxuankuang
  • 文件
    .icon-wenjian1
  • 多行文本
    .icon-duohangwenben
  • 单行文本
    .icon-danhangwenben
  • 开关-关
    .icon-kaiguan
  • 滑块-01
    .icon-huakuai
  • -_级联下拉功能框
    .icon-jilianxuanzeqi
  • 视频
    .icon-shipin1
  • 单选框
    .icon-danxuankuang
  • 颜色
    .icon-yanse
  • 自定义
    .icon-zidingyi
  • 电话
    .icon-dianhua2
  • 邮件
    .icon-youjian2
  • 感叹号
    .icon-gantanhao
  • 选中
    .icon-xuanzhong
  • 模板
    .icon-moban
  • 收益
    .icon-shouyi
  • 用户
    .icon-admin
  • 项目
    .icon-xiangmu
  • 项目
    .icon-fenxiang2
  • 代码
    .icon-code
  • 手机
    .icon-yingyong
  • 列表向左
    .icon-shousuo
  • 列表向右
    .icon-liebiaoxiangyou
  • 文档
    .icon-wendang1
  • 拖动
    .icon-tuodong
  • 复制
    .icon-fuzhi
  • 清空
    .icon-qingkong
  • Sql Server
    .icon-SqlServer
  • 代码
    .icon-daima
  • 皮肤
    .icon-pifu
  • 账号登录
    .icon-zhanghaodenglu
  • 二维码登录
    .icon-erweimadenglu
  • 百度
    .icon-baidu
  • 百度
    .icon-baidu1
  • 小米
    .icon-xiaomi
  • 华为
    .icon-huawei
  • 小米
    .icon-xiaomi1
  • 华为
    .icon-huawei1
  • 滴滴出行
    .icon-didichuxing
  • 淘宝
    .icon-taobao
  • 淘宝
    .icon-taobao1
  • 电信
    .icon-dianxin
  • 联通
    .icon-liantong
  • 电信
    .icon-dianxin1
  • 联通
    .icon-liantong1
  • 中国移动
    .icon-zhongguoyidong
  • 中国移动
    .icon-zhongguoyidong1
  • 中国移动
    .icon-zhongguoyidong2
  • github
    .icon-Github2
  • Github
    .icon-Github1
  • 谷歌验证
    .icon-guge
  • 谷歌logo
    .icon-guge1
  • QQ
    .icon-QQ2
  • QQ
    .icon-QQ
  • qq
    .icon-QQ1
  • 微博
    .icon-weibo
  • 微博
    .icon-weibo1
  • 支付宝
    .icon-zhifubao1
  • 微信
    .icon-weixin
  • 微信
    .icon-weixin1
  • 支付宝
    .icon-zhifubao
  • 银行卡
    .icon-yinhangka
  • 目标
    .icon-mubiao
  • 女性
    .icon-nvxing
  • 男性
    .icon-nanxing
  • 星星
    .icon-xingxing
  • 设置
    .icon-shezhi
  • 加载
    .icon-jiazai
  • 刷新
    .icon-shuaxin
  • 电源
    .icon-dianyuan
  • 纸飞机
    .icon-zhifeiji
  • 回形针
    .icon-huixingzhen
  • 放大
    .icon-fangda
  • 缩小
    .icon-suoxiao
  • 放大镜
    .icon-fangdajing
  • 开锁
    .icon-kaisuo
  • .icon-suo
  • 链接
    .icon-lianjie
  • 钥匙
    .icon-yaoshi
  • 信息
    .icon-xinxi
  • 爱心
    .icon-aixin
  • 旗帜
    .icon-qizhi
  • .icon-yan
  • 邮件
    .icon-youjian
  • 下载
    .icon-xiazai
  • 上传
    .icon-shangchuan
  • 相机
    .icon-xiangji
  • 视频
    .icon-shipin
  • 气泡
    .icon-qipao1
  • 禁止
    .icon-jinzhi
  • 进度
    .icon-jindubiao
  • 灯泡
    .icon-dengpao
  • 日历
    .icon-rili
  • 无声
    .icon-wusheng
  • 声音
    .icon-shengyin
  • 声音
    .icon-shengyin1
  • 结束
    .icon-jieshu
  • 暂停
    .icon-zanting
  • 倒退
    .icon-daotui
  • 快进
    .icon-kuaijin
  • 开始
    .icon-kaishi
  • .icon-cai
  • .icon-zan
  • 均衡器_画板 1
    .icon-junhengqi
  • 客服
    .icon-kefu
  • 耳机
    .icon-erji
  • 音乐
    .icon-yinyue
  • 音乐 (1)
    .icon-yinfu
  • 语音
    .icon-yuyin
  • 图表
    .icon-tubiao
  • 格子
    .icon-gezi
  • 主页
    .icon-zhuye
  • 环形布局
    .icon-huanxingbuju
  • 审核 笔记 记事本 写字
    .icon-bianji
  • .icon-bi
  • 饼图
    .icon-bingtu
  • 问题
    .icon-wenti
  • 火箭
    .icon-huojian
  • 分享
    .icon-fenxiang1
  • 分享
    .icon-fenxiang-copy
  • 分享
    .icon-fenxiang
  • 随机
    .icon-suiji
  • 全屏
    .icon-quanping
  • 框架版本
    .icon-kuangjia
  • 标签
    .icon-biaoqian
  • 垃圾桶
    .icon-lajitong
  • 雨伞
    .icon-yusan
  • 工具
    .icon-gongju
  • 下一步
    .icon-xiayibu
  • 返回
    .icon-fanhui
  • 袋,购物,购物,电子商务
    .icon-gowudai
  • 购物车
    .icon-gouwuche
  • .icon-shu
  • 公文包
    .icon-gongwenbao
  • 气泡
    .icon-qipao
  • 计算器
    .icon-jisuanqi
  • 杯子
    .icon-beizi
  • 钻石
    .icon-zuanshi
  • 文档
    .icon-wenjian
  • 文档 (1)
    .icon-wendang
  • 抽屉
    .icon-chouti
  • 水滴
    .icon-shuidi
  • wifi
    .icon-wifi
  • 电影
    .icon-dianying
  • 文件夹
    .icon-wenjianjia
  • 文件夹
    .icon-wenjianjia1
  • 全球
    .icon-quanqiu
  • 地球仪
    .icon-diqiuyi
  • 包配
    .icon-baopei
  • 照片
    .icon-zhaopian
  • 大头针
    .icon-datouzhen
  • 播放器_首页歌曲列表_32
    .icon-yinyuefuhao
  • 礼物
    .icon-liwu
  • 打印机 打印 线性
    .icon-dayinji
  • 拼图
    .icon-pintu
  • 演讲稿 演讲 分析 PPT 线性
    .icon-yanjiang
  • 矢量地图
    .icon-shiliangditu
  • 钱包
    .icon-qianbao
  • 船锚
    .icon-chuanmao
  • 徽章
    .icon-huizhang
  • 铃铛
    .icon-lingdang
  • 信件_1
    .icon-xinjian
  • .icon-xin
  • 眼镜
    .icon-yanjing
  • .icon-huo
  • 游戏 游戏厅 游戏机 游戏手柄 线性
    .icon-youxiji
  • 搞怪
    .icon-gaoguai
  • 毕业
    .icon-biye
  • 沙漏
    .icon-shalou
  • 魔法棒
    .icon-mofabang
  • 平板-2
    .icon-pingban
  • 盾牌
    .icon-dunpai
  • 速度
    .icon-zhishipan
  • 化学方程
    .icon-huaxue
  • 裁剪
    .icon-caijian
  • 移动光标
    .icon-yidongguangbiao
  • 光标
    .icon-guangbiao
  • 唱片
    .icon-changpian
  • 闪电
    .icon-shandian
  • 吸铁磁
    .icon-xitieci
  • 鼠标
    .icon-shubiao
  • 胡子
    .icon-huzi
  • 记事本
    .icon-jishiben
  • 飞机
    .icon-feiji
  • 桌面
    .icon-zhuomian
  • 手机
    .icon-sohuji
  • 奖杯
    .icon-jiangbei
  • 警告
    .icon-jinggao
  • 事件统计
    .icon-shijiantongji
  • 组织
    .icon-zuzhi
  • 关闭
    .icon-guanbi
  • .icon-jian
  • .icon-jia
  • 时钟
    .icon-shijian
  • 完成
    .icon-wancheng
  • 箭头2-下
    .icon-jiantou-xia
  • 箭头2-右
    .icon-jiantou-you
  • 箭头2-上
    .icon-jiantou-shang
  • 箭头2-左
    .icon-jiantou-zuo
  • 菜单
    .icon-caidan
  • .icon-xiajiantou
  • 下拉
    .icon-shangjiantou
  • compass-指南针
    .icon-zhinanzhen
  • 定位
    .icon-dingwei
  • 楼层
    .icon-louceng
  • 地图
    .icon-ditu
  • .icon-zuojiantou
  • .icon-youjiantou
  • 更多
    .icon-gengduo3
  • 更多
    .icon-gengduo2
  • 指示
    .icon-zhishi
  • 菜单/列表
    .icon-liebiao
  • 我的
    .icon-wode
  • 挂电话2
    .icon-guadianhua
  • phone5-电话
    .icon-dadianhua
  • phone4-电话
    .icon-jiedianhua
  • .icon-nv
  • 笑脸
    .icon-xiaolian
  • 回拨电话
    .icon-huibodianhua
  • 关注作者 已关注
    .icon-yiguanzhu
  • 退出
    .icon-tuichu
  • .icon-nan
  • 取消关注
    .icon-quxiaoguanzhux
  • 电话
    .icon-dianhua
  • 用户
    .icon-yonghu
  • 进入
    .icon-jinru
  • 关注
    .icon-guanzhu

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • 加载
    #icon-jiazai1
  • 下箭头
    #icon-xiajiantou1
  • 图层
    #icon-tuceng
  • 复制
    #icon-fuzhi1
  • 粘贴
    #icon-niantie
  • 标记
    #icon-icon_huabanfuben
  • 编辑
    #icon-bianji1
  • 右对齐
    #icon-youduiqi1
  • 左对齐
    #icon-zuoduiqi1
  • 组件
    #icon-zujian
  • 居中对齐
    #icon-juzhongduiqi
  • 关闭
    #icon-guanbi2
  • 两端对齐
    #icon-liangduanduiqi1
  • 两端对齐
    #icon-liangduanduiqi
  • 无边框
    #icon-wubiankuang
  • 外边框
    #icon-waibiankuang
  • 下边框
    #icon-xiabiankuang
  • 上边框
    #icon-shangbiankuang
  • 左边框
    #icon-zuobiankuang
  • 右边框
    #icon-youbiankuang
  • 设置圆角
    #icon-yuanjiao
  • 字体
    #icon-zitifont8
  • 字体
    #icon-ziti
  • 按键分割线
    #icon-anjianfengexian
  • 换行
    #icon-huanhang
  • 框架_frame23
    #icon-kuangjiaframe23
  • 线框
    #icon-icon-xiankuang
  • 框选
    #icon-box-select
  • 下框线
    #icon-xiakuangxian
  • 上框线
    #icon-shangkuangxian
  • 左框线
    #icon-zuokuangxian
  • 右框线
    #icon-youkuangxian
  • 外侧框线
    #icon-waicekuangxian
  • 垂直间距
    #icon-chuizhijianju-
  • 水平间距
    #icon-shuipingjianju-
  • 不可视
    #icon-bukeshi
  • 可视
    #icon-keshi
  • colum-height
    #icon-colum-height
  • column-width
    #icon-column-width
  • 垂直居中对齐
    #icon-chuizhijuzhongduiqi
  • 水平居中对齐
    #icon-shuipingjuzhongduiqi
  • 右对齐
    #icon-youduiqi
  • 左对齐
    #icon-zuoduiqi
  • 网页
    #icon-wangye1
  • 顶部对齐
    #icon-dingbuduiqi
  • 底部对齐
    #icon-dibuduiqi
  • 水平等距分布
    #icon-shuipingdengjufenbu
  • 垂直等距分布
    #icon-chuizhidengjufenbu
  • 邮箱
    #icon-youxiang
  • #icon-dui
  • 合同
    #icon-hetong
  • 归档
    #icon-guidang
  • 印章
    #icon-yinzhang
  • kpi
    #icon-kpi
  • 流程
    #icon-liucheng
  • 风险
    #icon-risk
  • 自动化运维
    #icon-oper-auto
  • 联考模式
    #icon-liankaomoshi
  • 配置
    #icon-peizhi
  • 流程
    #icon-liucheng1
  • 信用支付
    #icon-xinyongzhifu
  • 收款
    #icon-shoukuan
  • 特色服务icon
    #icon-tesefuwuicon
  • 承诺函
    #icon-chengnuohan
  • 正品行货
    #icon-zhengpinhanghuo
  • 9-劳联保险@三合一
    #icon--laolianbaoxiansanheyi
  • 网页
    #icon-wangye
  • 打折
    #icon-dazhe
  • 地址
    #icon-dizhi
  • 商户管理
    #icon-shanghuguanli
  • 优惠券
    #icon-youhuiquan1
  • 货币
    #icon-huobi
  • 支付
    #icon-zhifu1
  • 运费查询
    #icon-yunfeichaxun
  • 核销
    #icon-hexiao
  • 规格参数
    #icon-guigecanshu
  • h5
    #icon-h5
  • APP
    #icon-APP
  • APP
    #icon-APP1
  • 微信
    #icon-weixin3
  • 积分
    #icon-icon_jifen
  • 满减优惠
    #icon-manjianyouhui
  • 电脑
    #icon-computer_icon
  • #icon-quan
  • 已使用
    #icon-yishiyong
  • 已过期
    #icon-yiguoqi
  • 无评论
    #icon-wupinglun
  • 红包
    #icon-hongbao2
  • 关注
    #icon-guanzhu2
  • 暂无优惠券
    #icon-zanwuyouhuiquan
  • 红包
    #icon-hongbao
  • 已评价
    #icon-yipingjia
  • 模块
    #icon-mokuai
  • #icon-shang
  • 促销活动
    #icon-cuxiaohuodong
  • 任务
    #icon-renwu
  • FaceBook
    #icon-tian7_facebook
  • 电话
    #icon-dianhua1
  • QQ
    #icon-QQ4
  • 通知
    #icon-tongzhi
  • VIP
    #icon-VIP1
  • 积分
    #icon-jifen1
  • 兑换
    #icon-duihuan
  • 支付倒计时
    #icon-zhifudaojishi
  • 秒杀
    #icon-miaosha
  • 待收货
    #icon-daishouhuo1
  • 等待
    #icon-dengdai
  • 已取消
    #icon-yiquxiao
  • 待付款
    #icon-daifukuan
  • 已取消
    #icon-yiquxiao1
  • 无商品
    #icon-wushangpin
  • 已领取
    #icon-yilingqu
  • 已抢光-完整
    #icon-yiqiangguang
  • 签到
    #icon-qiandao
  • 支付设置
    #icon-zhifushezhi
  • 筛选
    #icon-shaixuan1
  • 文件
    #icon-wenjian2
  • 文件夹
    #icon-wenjianjia2
  • Excel
    #icon-ziliao-Excel
  • ppt
    #icon-ziliao-ppt
  • word
    #icon-ziliao-word
  • 图片
    #icon-tupian1
  • 日期
    #icon-riqi
  • 扫一扫
    #icon-saoyisao
  • 缺省页-暂无数据_复制
    #icon-queshengyezanwushuju
  • 上传
    #icon-shangchuan1
  • 短信验证码
    #icon-duanxinyanzhengma
  • 条形进度条
    #icon-tiaoxingjindutiao
  • 文本框
    #icon-wenbenkuang
  • 多行文本
    #icon-duohangwenben1
  • 百货
    #icon-baihuo
  • 母婴
    #icon-muying
  • 美妆
    #icon-meizhuang
  • 百货
    #icon-baihuo1
  • 食品
    #icon-shipin2
  • 男装
    #icon-nanzhuang
  • 食品
    #icon-tianpin
  • 男装
    #icon-nanzhuang1
  • 女装
    #icon-nvzhuang
  • 母婴
    #icon-muyingchanpin
  • 鞋子
    #icon-xiezi
  • 倒计时
    #icon-daojishi
  • 食品
    #icon-shipin4
  • 鞋包-女包
    #icon-xiebao-nvbao
  • 配置_底部工具栏
    #icon-biaoqianlan
  • 合并单元格-01
    #icon-hebingdanyuange-
  • 分类
    #icon-icon_category
  • 定时
    #icon-dingshi
  • 广告
    #icon-guanggao
  • 积分
    #icon-jifen
  • 发货运费统计
    #icon-fahuoyunfeitongji
  • 优惠卷
    #icon-youhuijuan
  • 待发货
    #icon-daifahuo
  • 待收货
    #icon-daishouhuo
  • 退款
    #icon-tuikuan
  • 收 藏-产品详情
    #icon-shoucang
  • 消息
    #icon-xiaoxi
  • 数据
    #icon-shuju
  • 评论
    #icon-pinglun
  • 等待卖家确认运费-[转换]
    #icon-yunfei
  • 返 回
    #icon-fanhui1
  • 表单
    #icon-biaodan
  • 自定义
    #icon-zidingyimoxing
  • 排序、排行
    #icon-paixu
  • 排序-降序
    #icon-paixu-jiangxu
  • 排序-升序
    #icon-paixu-shengxu
  • 关 闭
    #icon-guanbi1
  • 初始化设置
    #icon-chushihuashezhi
  • 复制代码
    #icon-fuzhidaima
  • 关注
    #icon-guanzhu1
  • 发送消息
    #icon-fasong
  • 日志
    #icon-rizhi
  • 商城
    #icon-shangcheng
  • 内容
    #icon-neirong
  • 站群
    #icon-zhanqun
  • 权限管理
    #icon-quanxianguanli
  • 内容管理
    #icon-neirongguanli
  • 系统管理
    #icon-xitongguanli
  • 会员中心
    #icon-huiyuanzhongxin
  • 移交 转交
    #icon-yijiaozhuanjiao
  • 自定义
    #icon-zidingyiguanli
  • 更多
    #icon-Mstore
  • 树形
    #icon-shuxing
  • 导入
    #icon-daoru
  • 高德地图
    #icon-gaodeditu
  • 城市
    #icon-chengshi
  • 文本
    #icon-putongwenben
  • 按钮
    #icon-anniu
  • 上拉菜单
    #icon-shanglacaidan
  • 步进器
    #icon-bujinqi
  • 搜索框
    #icon-sousuokuang
  • 环形进度图
    #icon-huanxingjindutu
  • 搜索框A
    #icon-sousuokuangA
  • 标签
    #icon-label
  • 分割线
    #icon-fengexian
  • 16_GJW单元格填充色
    #icon-_GJWdanyuangetianchongse
  • 标签页
    #icon-biaoqianye
  • 进度条
    #icon-jindutiao
  • 字段设置@2x
    #icon-ziduanshezhix
  • 轮播图
    #icon-tubiaozhizuomoban
  • 九宫格
    #icon-jiugongge
  • 保存
    #icon-baocun
  • 1010布局_导航栏
    #icon-buju_daohanglan
  • 超链接
    #icon-chaolianjie
  • 长方形
    #icon-changfangxing1
  • 正方形
    #icon-zhengfangxing
  • 链接
    #icon-lianjie1
  • 动画
    #icon-xing
  • 页面
    #icon-yemian
  • 新增
    #icon-xinzeng
  • 背景
    #icon-beijing
  • 暂无项目信息
    #icon-zanwuxiangmuxinxi
  • gitee
    #icon-gitee
  • 企业
    #icon-qiye
  • 服务
    #icon-fuwu
  • 招聘就业
    #icon-jiuyeju
  • 活动
    #icon-huodong
  • 大楼
    #icon-fuhuaqi
  • 办公室
    #icon-bangongshi
  • 字号+
    #icon-zihao
  • 字号-
    #icon-zihao-
  • 地球,国际化,语言切换
    #icon-huaban-
  • pdf
    #icon-pdf
  • 中国
    #icon-icon-china
  • 世界
    #icon-icon-shijie
  • 404
    #icon-icon-test
  • 500
    #icon-icon-test1
  • QQ
    #icon-QQ3
  • 微信
    #icon-weixin2
  • 升级中
    #icon-shengjizhong
  • 中国
    #icon-zhongguo
  • 全球
    #icon-quanqiu1
  • 退出
    #icon-tuichu1
  • 闭眼
    #icon-biyan1
  • 筛选
    #icon-juxing
  • 浏览记录
    #icon-juxing1
  • 分类
    #icon-fenlei1
  • 首页
    #icon-shouye
  • 我的
    #icon-wode1
  • 筛选
    #icon-shaixuan
  • 响应式
    #icon-xiangyingshi
  • 小程序
    #icon-xiaochengxu
  • 颜色
    #icon-beijingse
  • 工作转交
    #icon-zhuanjiao
  • 眼睛
    #icon-dakaiyanjing
  • 点击
    #icon-dianji
  • 新建
    #icon-xinjian1
  • 暂无记录
    #icon-zanwushuju
  • 无网络
    #icon-wuwangluo
  • VIP
    #icon-VIP
  • VIP @3x
    #icon-VIPx
  • github
    #icon-github
  • spring
    #icon-spring
  • 闭眼
    #icon-biyan
  • 待审核
    #icon-daishenhe
  • 1印章(已结清)
    #icon-yinzhangyijieqing
  • 菜单
    #icon-menu
  • 列表
    #icon-liebiao1
  • #icon-biao
  • 微信支付
    #icon-weixinzhifu1
  • 支付宝
    #icon-WePayLogo
  • 推荐
    #icon-tuijian
  • 应用源码
    #icon-yingyongyuanma
  • 私有云
    #icon-siyouyun
  • 选中
    #icon-xuanzhong1
  • #icon-plus
  • 项目
    #icon-xiangmu1
  • 年卡
    #icon-nianqia
  • 验证码
    #icon-yanzhengma
  • +喜欢
    #icon-shangpinshoucang
  • 足迹
    #icon-liulanjilu
  • 评价
    #icon-pingjia
  • 签到
    #icon-qiandaolingjifen
  • 礼物
    #icon-jifenshangcheng
  • 优惠券
    #icon-youhuiquan
  • 红包
    #icon-hongbao1
  • 分类
    #icon-fenlei
  • 栅格2
    #icon-shange
  • 评分
    #icon-appxiugaiicon45
  • 图片
    #icon-tupian
  • 编辑器
    #icon-redact
  • 音频
    #icon-audio
  • 符号-密码输入框
    #icon-mimashurukuang
  • 日期选择
    #icon-riqixuanze
  • 计算器 (1)
    #icon-jisuanqi1
  • 时间
    #icon-shijian1
  • 多选框
    #icon-duoxuankuang
  • 文件
    #icon-wenjian1
  • 多行文本
    #icon-duohangwenben
  • 单行文本
    #icon-danhangwenben
  • 开关-关
    #icon-kaiguan
  • 滑块-01
    #icon-huakuai
  • -_级联下拉功能框
    #icon-jilianxuanzeqi
  • 视频
    #icon-shipin1
  • 单选框
    #icon-danxuankuang
  • 颜色
    #icon-yanse
  • 自定义
    #icon-zidingyi
  • 电话
    #icon-dianhua2
  • 邮件
    #icon-youjian2
  • 感叹号
    #icon-gantanhao
  • 选中
    #icon-xuanzhong
  • 模板
    #icon-moban
  • 收益
    #icon-shouyi
  • 用户
    #icon-admin
  • 项目
    #icon-xiangmu
  • 项目
    #icon-fenxiang2
  • 代码
    #icon-code
  • 手机
    #icon-yingyong
  • 列表向左
    #icon-shousuo
  • 列表向右
    #icon-liebiaoxiangyou
  • 文档
    #icon-wendang1
  • 拖动
    #icon-tuodong
  • 复制
    #icon-fuzhi
  • 清空
    #icon-qingkong
  • Sql Server
    #icon-SqlServer
  • 代码
    #icon-daima
  • 皮肤
    #icon-pifu
  • 账号登录
    #icon-zhanghaodenglu
  • 二维码登录
    #icon-erweimadenglu
  • 百度
    #icon-baidu
  • 百度
    #icon-baidu1
  • 小米
    #icon-xiaomi
  • 华为
    #icon-huawei
  • 小米
    #icon-xiaomi1
  • 华为
    #icon-huawei1
  • 滴滴出行
    #icon-didichuxing
  • 淘宝
    #icon-taobao
  • 淘宝
    #icon-taobao1
  • 电信
    #icon-dianxin
  • 联通
    #icon-liantong
  • 电信
    #icon-dianxin1
  • 联通
    #icon-liantong1
  • 中国移动
    #icon-zhongguoyidong
  • 中国移动
    #icon-zhongguoyidong1
  • 中国移动
    #icon-zhongguoyidong2
  • github
    #icon-Github2
  • Github
    #icon-Github1
  • 谷歌验证
    #icon-guge
  • 谷歌logo
    #icon-guge1
  • QQ
    #icon-QQ2
  • QQ
    #icon-QQ
  • qq
    #icon-QQ1
  • 微博
    #icon-weibo
  • 微博
    #icon-weibo1
  • 支付宝
    #icon-zhifubao1
  • 微信
    #icon-weixin
  • 微信
    #icon-weixin1
  • 支付宝
    #icon-zhifubao
  • 银行卡
    #icon-yinhangka
  • 目标
    #icon-mubiao
  • 女性
    #icon-nvxing
  • 男性
    #icon-nanxing
  • 星星
    #icon-xingxing
  • 设置
    #icon-shezhi
  • 加载
    #icon-jiazai
  • 刷新
    #icon-shuaxin
  • 电源
    #icon-dianyuan
  • 纸飞机
    #icon-zhifeiji
  • 回形针
    #icon-huixingzhen
  • 放大
    #icon-fangda
  • 缩小
    #icon-suoxiao
  • 放大镜
    #icon-fangdajing
  • 开锁
    #icon-kaisuo
  • #icon-suo
  • 链接
    #icon-lianjie
  • 钥匙
    #icon-yaoshi
  • 信息
    #icon-xinxi
  • 爱心
    #icon-aixin
  • 旗帜
    #icon-qizhi
  • #icon-yan
  • 邮件
    #icon-youjian
  • 下载
    #icon-xiazai
  • 上传
    #icon-shangchuan
  • 相机
    #icon-xiangji
  • 视频
    #icon-shipin
  • 气泡
    #icon-qipao1
  • 禁止
    #icon-jinzhi
  • 进度
    #icon-jindubiao
  • 灯泡
    #icon-dengpao
  • 日历
    #icon-rili
  • 无声
    #icon-wusheng
  • 声音
    #icon-shengyin
  • 声音
    #icon-shengyin1
  • 结束
    #icon-jieshu
  • 暂停
    #icon-zanting
  • 倒退
    #icon-daotui
  • 快进
    #icon-kuaijin
  • 开始
    #icon-kaishi
  • #icon-cai
  • #icon-zan
  • 均衡器_画板 1
    #icon-junhengqi
  • 客服
    #icon-kefu
  • 耳机
    #icon-erji
  • 音乐
    #icon-yinyue
  • 音乐 (1)
    #icon-yinfu
  • 语音
    #icon-yuyin
  • 图表
    #icon-tubiao
  • 格子
    #icon-gezi
  • 主页
    #icon-zhuye
  • 环形布局
    #icon-huanxingbuju
  • 审核 笔记 记事本 写字
    #icon-bianji
  • #icon-bi
  • 饼图
    #icon-bingtu
  • 问题
    #icon-wenti
  • 火箭
    #icon-huojian
  • 分享
    #icon-fenxiang1
  • 分享
    #icon-fenxiang-copy
  • 分享
    #icon-fenxiang
  • 随机
    #icon-suiji
  • 全屏
    #icon-quanping
  • 框架版本
    #icon-kuangjia
  • 标签
    #icon-biaoqian
  • 垃圾桶
    #icon-lajitong
  • 雨伞
    #icon-yusan
  • 工具
    #icon-gongju
  • 下一步
    #icon-xiayibu
  • 返回
    #icon-fanhui
  • 袋,购物,购物,电子商务
    #icon-gowudai
  • 购物车
    #icon-gouwuche
  • #icon-shu
  • 公文包
    #icon-gongwenbao
  • 气泡
    #icon-qipao
  • 计算器
    #icon-jisuanqi
  • 杯子
    #icon-beizi
  • 钻石
    #icon-zuanshi
  • 文档
    #icon-wenjian
  • 文档 (1)
    #icon-wendang
  • 抽屉
    #icon-chouti
  • 水滴
    #icon-shuidi
  • wifi
    #icon-wifi
  • 电影
    #icon-dianying
  • 文件夹
    #icon-wenjianjia
  • 文件夹
    #icon-wenjianjia1
  • 全球
    #icon-quanqiu
  • 地球仪
    #icon-diqiuyi
  • 包配
    #icon-baopei
  • 照片
    #icon-zhaopian
  • 大头针
    #icon-datouzhen
  • 播放器_首页歌曲列表_32
    #icon-yinyuefuhao
  • 礼物
    #icon-liwu
  • 打印机 打印 线性
    #icon-dayinji
  • 拼图
    #icon-pintu
  • 演讲稿 演讲 分析 PPT 线性
    #icon-yanjiang
  • 矢量地图
    #icon-shiliangditu
  • 钱包
    #icon-qianbao
  • 船锚
    #icon-chuanmao
  • 徽章
    #icon-huizhang
  • 铃铛
    #icon-lingdang
  • 信件_1
    #icon-xinjian
  • #icon-xin
  • 眼镜
    #icon-yanjing
  • #icon-huo
  • 游戏 游戏厅 游戏机 游戏手柄 线性
    #icon-youxiji
  • 搞怪
    #icon-gaoguai
  • 毕业
    #icon-biye
  • 沙漏
    #icon-shalou
  • 魔法棒
    #icon-mofabang
  • 平板-2
    #icon-pingban
  • 盾牌
    #icon-dunpai
  • 速度
    #icon-zhishipan
  • 化学方程
    #icon-huaxue
  • 裁剪
    #icon-caijian
  • 移动光标
    #icon-yidongguangbiao
  • 光标
    #icon-guangbiao
  • 唱片
    #icon-changpian
  • 闪电
    #icon-shandian
  • 吸铁磁
    #icon-xitieci
  • 鼠标
    #icon-shubiao
  • 胡子
    #icon-huzi
  • 记事本
    #icon-jishiben
  • 飞机
    #icon-feiji
  • 桌面
    #icon-zhuomian
  • 手机
    #icon-sohuji
  • 奖杯
    #icon-jiangbei
  • 警告
    #icon-jinggao
  • 事件统计
    #icon-shijiantongji
  • 组织
    #icon-zuzhi
  • 关闭
    #icon-guanbi
  • #icon-jian
  • #icon-jia
  • 时钟
    #icon-shijian
  • 完成
    #icon-wancheng
  • 箭头2-下
    #icon-jiantou-xia
  • 箭头2-右
    #icon-jiantou-you
  • 箭头2-上
    #icon-jiantou-shang
  • 箭头2-左
    #icon-jiantou-zuo
  • 菜单
    #icon-caidan
  • #icon-xiajiantou
  • 下拉
    #icon-shangjiantou
  • compass-指南针
    #icon-zhinanzhen
  • 定位
    #icon-dingwei
  • 楼层
    #icon-louceng
  • 地图
    #icon-ditu
  • #icon-zuojiantou
  • #icon-youjiantou
  • 更多
    #icon-gengduo3
  • 更多
    #icon-gengduo2
  • 指示
    #icon-zhishi
  • 菜单/列表
    #icon-liebiao
  • 我的
    #icon-wode
  • 挂电话2
    #icon-guadianhua
  • phone5-电话
    #icon-dadianhua
  • phone4-电话
    #icon-jiedianhua
  • #icon-nv
  • 笑脸
    #icon-xiaolian
  • 回拨电话
    #icon-huibodianhua
  • 关注作者 已关注
    #icon-yiguanzhu
  • 退出
    #icon-tuichu
  • #icon-nan
  • 取消关注
    #icon-quxiaoguanzhux
  • 电话
    #icon-dianhua
  • 用户
    #icon-yonghu
  • 进入
    #icon-jinru
  • 关注
    #icon-guanzhu

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>