• 跳转2
    
  • AI对话
    
  • AI智能体
    
  • 毛利润
    
  • 总成成交金额
    
  • 营销层
    
  • 整体版式总结
    
  • 爆款主图拆解
    
  • 产品层
    
  • 背景层
    
  • 删除
    
  • 销售数据
    
  • 提示
    
  • 搜索词数据
    
  • 流量渠道数据
    
  • 生成预览关键帧
    
  • 查看报告
    
  • 结构
    
  • 痛点
    
  • 使用场景
    
  • 卖点
    
  • 目标人群
    
  • 描述
    
  • 视频脚本生成
    
  • 财税风险诊断
    
  • kimi
    
  • 玺牛
    
  • 详细问题回顾
    
  • 快捷箭头
    
  • 财税
    
  • 警告
    
  • 视频脚本仿写
    
  • md
    
  • xlsx、csv
    
  • docx
    
  • ppt
    
  • txt
    
  • pdf
    
  • html、json
    
  • BI数据
    
  • 一键生成预览图
    
  • 视频脚本仿写-删除
    
  • 仿写的脚本结构
    
  • 产品信息
    
  • 生成专属脚本
    
  • 拼多多
    
  • 京东
    
  • 亚马逊
    
  • 1688
    
  • 淘宝
    
  • 小红书
    
  • 私域
    
  • 关键词需求分析
    
  • 抖音
    
  • 声音效果
    
  • 文案
    
  • 视频摘要
    
  • 视频画面
    
  • 镜头语言
    
  • 视频脚本拆解
    
  • 授权账号
    
  • 步骤三:店铺授权
    
  • 教程说明
    
  • 步骤二:录入店铺
    
  • 步骤一:填写AK、SK
    
  • 下一步
    
  • 跳转
    
  • 企业数据
    
  • 兑换码
    
  • 下载
    
  • 全屏
    
  • 关闭
    
  • 退出全屏
    
  • 复制链接
    
  • 人群诊断
    
  • 优质表现人群
    
  • 人群数
    
  • 地域诊断
    
  • 警告
    
  • 建议关闭地域
    
  • 总花费
    
  • 列表筛选
    
  • 优质表现地域
    
  • 地域数
    
  • 诊断基准
    
  • 使用文档
    
  • 下跌
    
  • 优化建议
    
  • 推广渠道
    
  • 指标评分
    
  • 商品解读
    
  • 毛利率调节
    
  • 流量
    
  • 朝左箭头
    
  • 升级企业版本
    
  • 删除
    
  • 失败
    
  • 添加子账号
    
  • 成功
    
  • 返回箭头
    
  • 账单与用量
    
  • 消息弹窗
    
  • 升级企业版本
    
  • 邀请
    
  • 退出登录
    
  • 消息弹窗-有消息
    
  • AI创作
    
  • 企业管理
    
  • 推广大使
    
  • 我的订阅
    
  • 编辑资料
    
  • 前进箭头
    
  • 删除
    
  • 添加子账号
    
  • 邀请
    
  • 商品诊断
    
  • 无限画布
    
  • 组织管理
    
  • 我的收藏
    
  • 展开
    
  • AI对话
    
  • 收缩
    
  • 全部应用
    
  • 品牌级详情页策划
    
  • 色调
    
  • 勾选
    
  • 差异话价值
    
  • 品牌定位
    
  • 产品价值洞察
    
  • 光影色彩
    
  • 目标人群
    
  • 字体设计
    
  • 光影要求
    
  • 推理过程
    
  • 人群
    
  • 核心价值主张
    
  • 卖点策略
    
  • 色彩情感
    
  • 敬请期待
    
  • 主图
    
  • 详情页
    
  • 竞品差异
    
  • 主图脚本
    
  • 万相台推广
    
  • 标题
    
  • 流量渠道
    
  • 评价
    
  • 关键词需求分析
    
  • 竞品诊断
    
  • 智能选款
    
  • 详情页脚本
    
  • 买家秀
    
  • 关键词选款
    
  • 找蓝海
    
  • 问大家
    
  • 删除
    
  • 预估搜索量
    
  • 关闭智能体
    
  • 正确
    
  • 失败
    
  • 竞品诊断
    
  • 加载中
    
  • 批量下载
    
  • 收起
    
  • 展开
    
  • 查看大图
    
  • 下载
    
  • 相机
    
  • 加
    
  • 下载
    
  • 切换-上一张
    
  • 切换-下一张-1
    
  • 减
    
  • 退出登录
    
  • 编辑资料
    
  • 切换账号
    
  • 积分
    
  • AIGC积分
    
  • AI试衣
    
  • 试穿模板
    
  • 选择场景
    
  • 替换模特
    
  • AI场景
    
  • 收起
    
  • 展开
    
  • 新建对话
    
  • 全局提示-正确
    
  • 张数
    
  • 比例_21_9
    
  • 文生图
    
  • AI生图
    
  • 条形图
    
  • 环形图
    
  • 链接
    
  • 必填
    
  • 上传
    
  • 提示
    
  • 关闭智能体
    
  • 智能体
    
  • exl文件
    
  • 重新上传
    
  • 开始播放
    
  • 成功提示
    
  • 收藏-选中
    
  • 下载
    
  • 删除
    
  • 比例_4_3
    
  • 复制
    
  • 比例_3_4
    
  • 比例_9_16
    
  • 比例_2_3
    
  • 比例_16_9
    
  • 比例_3_2
    
  • 比例_1_1
    
  • 收藏-未选中
    
  • 分享
    
  • 提交
    
  • 新建对话
    
  • 深度思考-copy-copy
    
  • AI-发起新对话
    
  • AI对话-展开
    
  • AI对话-收起
    
  • 发送
    
  • 收藏管理
    
  • 全部应用
    
  • 组织管理
    
  • 折叠
    
  • 展开
    
  • 未全选
    
  • 刷新
    
  • 宫格视图
    
  • 图生视频
    
  • 16_9
    
  • 数据看板
    
  • 推广分析
    
  • 刷新
    
  • 勾选
    
  • 模型
    
  • 退出批量操作
    
  • 全屏
    
  • 9_16
    
  • 未全选
    
  • 分辨率
    
  • 批量选择
    
  • 待勾选
    
  • 收藏
    
  • 风格
    
  • 首页
    
  • 1_1
    
  • 宫格视图
    
  • AI创作
    
  • 播放
    
  • 更多
    
  • AI对话
    
  • 再次生成
    
  • 文生视频
    
  • 运动幅度
    
  • 我的作品
    
  • 做同款
    
  • 切换-上一张
    
  • 切换
    
  • 画面比例
    
  • 时间视图
    
  • 生成时长
    
  • 复制
    
  • 警告
    
  • 文件夹
    
  • 切换-下一张
    
  • 新建文件夹
    
  • 16_9
    
  • 市场洞察
    
  • 上传
    
  • 折叠
    
  • AI视频
    
  • 展开
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1779935305779') format('woff2'),
       url('iconfont.woff?t=1779935305779') format('woff'),
       url('iconfont.ttf?t=1779935305779') format('truetype'),
       url('iconfont.svg?t=1779935305779#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"。

  • 跳转2
    .icon-tiaozhuan2
  • AI对话
    .icon-AIduihua1
  • AI智能体
    .icon-AIzhinengti1
  • 毛利润
    .icon-maolirun
  • 总成成交金额
    .icon-zongchengchengjiaojine
  • 营销层
    .icon-yingxiaoceng
  • 整体版式总结
    .icon-zhengtibanshizongjie
  • 爆款主图拆解
    .icon-baokuanzhutuchaijie
  • 产品层
    .icon-chanpinceng
  • 背景层
    .icon-beijingceng
  • 删除
    .icon-shanchu4
  • 销售数据
    .icon-xiaoshoushuju
  • 提示
    .icon-tishi1
  • 搜索词数据
    .icon-sousuocishuju
  • 流量渠道数据
    .icon-liuliangqudaoshuju
  • 生成预览关键帧
    .icon-shengchengyulanguanjianzhen
  • 查看报告
    .icon-chakanbaogao
  • 结构
    .icon-jiegou
  • 痛点
    .icon-tongdian
  • 使用场景
    .icon-shiyongchangjing
  • 卖点
    .icon-maidian
  • 目标人群
    .icon-mubiaorenqun1
  • 描述
    .icon-miaoshu
  • 视频脚本生成
    .icon-shipinjiaobenshengcheng
  • 财税风险诊断
    .icon-caishuifengxianzhenduan
  • kimi
    .icon-logok
  • 玺牛
    .icon-xiniu
  • 详细问题回顾
    .icon-xiangxiwentihuigu
  • 快捷箭头
    .icon-kuaijiejiantou
  • 财税
    .icon-caishui
  • 警告
    .icon-jinggao2
  • 视频脚本仿写
    .icon-shipinjiaobenfangxie
  • md
    .icon-md
  • xlsx、csv
    .icon-a-xlsxcsv
  • docx
    .icon-docx
  • ppt
    .icon-ppt
  • txt
    .icon-txt
  • pdf
    .icon-pdf
  • html、json
    .icon-a-htmljson
  • BI数据
    .icon-BIshuju
  • 一键生成预览图
    .icon-yijianshengchengyulantu
  • 视频脚本仿写-删除
    .icon-shipinjiaobenfangxie-shanchu
  • 仿写的脚本结构
    .icon-fangxiedejiaobenjiegou
  • 产品信息
    .icon-chanpinxinxi
  • 生成专属脚本
    .icon-shengchengzhuanshujiaoben
  • 拼多多
    .icon-pinduoduo
  • 京东
    .icon-jingdong
  • 亚马逊
    .icon-yamaxun
  • 1688
    .icon-a-1688
  • 淘宝
    .icon-taobao
  • 小红书
    .icon-xiaohongshu
  • 私域
    .icon-siyu
  • 关键词需求分析
    .icon-guanjiancixuqiufenxi1
  • 抖音
    .icon-douyin
  • 声音效果
    .icon-shengyinxiaoguo
  • 文案
    .icon-wenan
  • 视频摘要
    .icon-shipinzhaiyao
  • 视频画面
    .icon-shipinhuamian
  • 镜头语言
    .icon-jingtouyuyan
  • 视频脚本拆解
    .icon-shipinjiaobenchaijie
  • 授权账号
    .icon-shouquanzhanghao
  • 步骤三:店铺授权
    .icon-a-buzhousandianpushouquan
  • 教程说明
    .icon-jiaochengshuoming
  • 步骤二:录入店铺
    .icon-a-buzhouerlurudianpu
  • 步骤一:填写AK、SK
    .icon-a-buzhouyitianxieAKSK
  • 下一步
    .icon-xiayibu
  • 跳转
    .icon-tiaozhuan
  • 企业数据
    .icon-qiyeshuju
  • 兑换码
    .icon-duihuanma
  • 下载
    .icon-xiazai3
  • 全屏
    .icon-quanping1
  • 关闭
    .icon-guanbi
  • 退出全屏
    .icon-tuichuquanping
  • 复制链接
    .icon-fuzhilianjie
  • 人群诊断
    .icon-renqunzhenduan
  • 优质表现人群
    .icon-youzhibiaoxianrenqun
  • 人群数
    .icon-renqunshu
  • 地域诊断
    .icon-diyuzhenduan
  • 警告
    .icon-jinggao1
  • 建议关闭地域
    .icon-jianyiguanbidiyu
  • 总花费
    .icon-zonghuafei
  • 列表筛选
    .icon-liebiaoshaixuan
  • 优质表现地域
    .icon-youzhibiaoxiandiyu
  • 地域数
    .icon-diyushu
  • 诊断基准
    .icon-zhenduanjizhun
  • 使用文档
    .icon-shiyongwendang
  • 下跌
    .icon-xiadie
  • 优化建议
    .icon-youhuajianyi
  • 推广渠道
    .icon-tuiguangqudao
  • 指标评分
    .icon-zhibiaopingfen
  • 商品解读
    .icon-shangpinjiedu
  • 毛利率调节
    .icon-maolishuaitiaojie
  • 流量
    .icon-liuliang
  • 朝左箭头
    .icon-zhaozuojiantou
  • 升级企业版本
    .icon-shengjiqiyebanben1
  • 删除
    .icon-shanchu3
  • 失败
    .icon-shibai1
  • 添加子账号
    .icon-tianjiazizhanghao1
  • 成功
    .icon-chenggong
  • 返回箭头
    .icon-fanhuijiantou
  • 账单与用量
    .icon-zhangdanyuyongliang
  • 消息弹窗
    .icon-xiaoxidanchuang
  • 升级企业版本
    .icon-shengjiqiyebanben
  • 邀请
    .icon-yaoqing1
  • 退出登录
    .icon-tuichudenglu1
  • 消息弹窗-有消息
    .icon-xiaoxidanchuang-youxiaoxi
  • AI创作
    .icon-AIchuangzuo2
  • 企业管理
    .icon-gongsi
  • 推广大使
    .icon-tuiguangdashi
  • 我的订阅
    .icon-wodedingyue
  • 编辑资料
    .icon-bianjiziliao1
  • 前进箭头
    .icon-qianjinjiantou
  • 删除
    .icon-shanchu2
  • 添加子账号
    .icon-tianjiazizhanghao
  • 邀请
    .icon-yaoqing
  • 商品诊断
    .icon-shangpinzhenduan
  • 无限画布
    .icon-wuxianhuabu2
  • 组织管理
    .icon-zuzhiguanli2
  • 我的收藏
    .icon-wodeshoucang1
  • 展开
    .icon-zhankai3
  • AI对话
    .icon-AIduihua2
  • 收缩
    .icon-shousuo
  • 全部应用
    .icon-quanbuyingyong2
  • 品牌级详情页策划
    .icon-pinpaijixiangqingyecehua
  • 色调
    .icon-setiao
  • 勾选
    .icon-gouxuan1
  • 差异话价值
    .icon-chayihuajiazhi
  • 品牌定位
    .icon-pinpaidingwei
  • 产品价值洞察
    .icon-chanpinjiazhidongcha
  • 光影色彩
    .icon-guangyingsecai
  • 目标人群
    .icon-mubiaorenqun
  • 字体设计
    .icon-zitisheji
  • 光影要求
    .icon-guangyingyaoqiu
  • 推理过程
    .icon-tuiliguocheng
  • 人群
    .icon-renqun
  • 核心价值主张
    .icon-hexinjiazhizhuzhang
  • 卖点策略
    .icon-maidiancelve
  • 色彩情感
    .icon-secaiqinggan
  • 敬请期待
    .icon-jingqingqidai
  • 主图
    .icon-zhutu
  • 详情页
    .icon-xiangqingye
  • 竞品差异
    .icon-jingpinchayi
  • 主图脚本
    .icon-zhutujiaoben
  • 万相台推广
    .icon-wanxiangtaituiguang
  • 标题
    .icon-biaoti
  • 流量渠道
    .icon-liuliangqudao
  • 评价
    .icon-pingjia
  • 关键词需求分析
    .icon-guanjiancixuqiufenxi
  • 竞品诊断
    .icon-jingpinzhenduan
  • 智能选款
    .icon-zhinengxuankuan
  • 详情页脚本
    .icon-xiangqingyejiaoben
  • 买家秀
    .icon-maijiaxiu
  • 关键词选款
    .icon-guanjiancixuankuan
  • 找蓝海
    .icon-zhaolanhai
  • 问大家
    .icon-wendajia
  • 删除
    .icon-shanchu1
  • 预估搜索量
    .icon-yugusousuoliang
  • 关闭智能体
    .icon-guanbizhinengti1
  • 正确
    .icon-zhengque
  • 失败
    .icon-shibai
  • 竞品诊断
    .icon-jingpinzhenduan1
  • 加载中
    .icon-jiazaizhong
  • 批量下载
    .icon-piliangxiazai
  • 收起
    .icon-shouqi1
  • 展开
    .icon-zhankai2
  • 查看大图
    .icon-chakandatu
  • 下载
    .icon-xiazai2
  • 相机
    .icon-xiangji
  • 加
    .icon-jia
  • 下载
    .icon-xiazai1
  • 切换-上一张
    .icon-qiehuan-shangyizhang1
  • 切换-下一张-1
    .icon-qiehuan-shangyizhang-1
  • 减
    .icon-jian
  • 退出登录
    .icon-tuichudenglu
  • 编辑资料
    .icon-bianjiziliao
  • 切换账号
    .icon-qiehuanzhanghao
  • 积分
    .icon-jifen
  • AIGC积分
    .icon-AIGCjifen
  • AI试衣
    .icon-AIshiyi
  • 试穿模板
    .icon-shichuanmoban
  • 选择场景
    .icon-xuanzechangjing
  • 替换模特
    .icon-tihuanmote
  • AI场景
    .icon-AIchangjing
  • 收起
    .icon-shouqi
  • 展开
    .icon-zhankai
  • 新建对话
    .icon-xinjianduihua2
  • 全局提示-正确
    .icon-quanjutishi-zhengque
  • 张数
    .icon-zhangshu
  • 比例_21_9
    .icon-bili_21_9
  • 文生图
    .icon-wenshengtu
  • AI生图
    .icon-AIshengtu
  • 条形图
    .icon-tiaoxingtu
  • 环形图
    .icon-huanxingtu
  • 链接
    .icon-lianjie
  • 必填
    .icon-bitian
  • 上传
    .icon-shangchuan1
  • 提示
    .icon-tishi
  • 关闭智能体
    .icon-guanbizhinengti
  • 智能体
    .icon-zhinengti
  • exl文件
    .icon-exlwenjian
  • 重新上传
    .icon-zhongxinshangchuan
  • 开始播放
    .icon-kaishibofang
  • 成功提示
    .icon-chenggongtishi
  • 收藏-选中
    .icon-shoucang-xuanzhong
  • 下载
    .icon-xiazai
  • 删除
    .icon-shanchu
  • 比例_4_3
    .icon-bili_4_3
  • 复制
    .icon-fuzhi1
  • 比例_3_4
    .icon-bili_3_4
  • 比例_9_16
    .icon-bili_9_16
  • 比例_2_3
    .icon-bili_2_3
  • 比例_16_9
    .icon-bili_16_9
  • 比例_3_2
    .icon-bili_3_2
  • 比例_1_1
    .icon-bili_1_1
  • 收藏-未选中
    .icon-shoucang-weixuanzhong
  • 分享
    .icon-fenxiang
  • 提交
    .icon-Vector
  • 新建对话
    .icon-xinjianduihua
  • 深度思考-copy-copy
    .icon-shendusikao1
  • AI-发起新对话
    .icon-AI-faqixinduihua
  • AI对话-展开
    .icon-AIduihua-zhankai
  • AI对话-收起
    .icon-AIduihua-shouqi
  • 发送
    .icon-fasong
  • 收藏管理
    .icon-shoucangguanli
  • 全部应用
    .icon-quanbuyingyong
  • 组织管理
    .icon-zuzhiguanli
  • 折叠
    .icon-zhankai1-copy
  • 展开
    .icon-zhankai1
  • 未全选
    .icon-weiquanxuan1
  • 刷新
    .icon-shuaxin1
  • 宫格视图
    .icon-gonggeshitu1
  • 图生视频
    .icon-tushengshipin1
  • 16_9
    .icon-a-16_91
  • 数据看板
    .icon-shujukanban
  • 推广分析
    .icon-tuiguangfenxi
  • 刷新
    .icon-shuaxin
  • 勾选
    .icon-gouxuan
  • 模型
    .icon-moxing
  • 退出批量操作
    .icon-tuichupiliangcaozuo
  • 全屏
    .icon-quanping
  • 9_16
    .icon-a-9_16
  • 未全选
    .icon-weiquanxuan
  • 分辨率
    .icon-fenbianshuai
  • 批量选择
    .icon-piliangxuanze
  • 待勾选
    .icon-daigouxuan
  • 收藏
    .icon-shoucang
  • 风格
    .icon-fengge
  • 首页
    .icon-shouye
  • 1_1
    .icon-a-1_1
  • 宫格视图
    .icon-gonggeshitu
  • AI创作
    .icon-AIchuangzuo
  • 播放
    .icon-bofang
  • 更多
    .icon-gengduo
  • AI对话
    .icon-AIduihua
  • 再次生成
    .icon-zaicishengcheng
  • 文生视频
    .icon-wenshengshipin
  • 运动幅度
    .icon-yundongfudu
  • 我的作品
    .icon-wodezuopin
  • 做同款
    .icon-zuotongkuan
  • 切换-上一张
    .icon-qiehuan-shangyizhang
  • 切换
    .icon-qiehuan
  • 画面比例
    .icon-huamianbili
  • 时间视图
    .icon-shijianshitu
  • 生成时长
    .icon-shengchengshichang
  • 复制
    .icon-fuzhi
  • 警告
    .icon-jinggao
  • 文件夹
    .icon-wenjianjia
  • 切换-下一张
    .icon-qiehuan-xiayizhang
  • 新建文件夹
    .icon-xinjianwenjianjia
  • 16_9
    .icon-a-16_9
  • 市场洞察
    .icon-shichangdongcha
  • 上传
    .icon-shangchuan
  • 折叠
    .icon-zhedie
  • AI视频
    .icon-AIshipin
  • 展开
    .icon-zhedie-copy

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"。

  • 跳转2
    #icon-tiaozhuan2
  • AI对话
    #icon-AIduihua1
  • AI智能体
    #icon-AIzhinengti1
  • 毛利润
    #icon-maolirun
  • 总成成交金额
    #icon-zongchengchengjiaojine
  • 营销层
    #icon-yingxiaoceng
  • 整体版式总结
    #icon-zhengtibanshizongjie
  • 爆款主图拆解
    #icon-baokuanzhutuchaijie
  • 产品层
    #icon-chanpinceng
  • 背景层
    #icon-beijingceng
  • 删除
    #icon-shanchu4
  • 销售数据
    #icon-xiaoshoushuju
  • 提示
    #icon-tishi1
  • 搜索词数据
    #icon-sousuocishuju
  • 流量渠道数据
    #icon-liuliangqudaoshuju
  • 生成预览关键帧
    #icon-shengchengyulanguanjianzhen
  • 查看报告
    #icon-chakanbaogao
  • 结构
    #icon-jiegou
  • 痛点
    #icon-tongdian
  • 使用场景
    #icon-shiyongchangjing
  • 卖点
    #icon-maidian
  • 目标人群
    #icon-mubiaorenqun1
  • 描述
    #icon-miaoshu
  • 视频脚本生成
    #icon-shipinjiaobenshengcheng
  • 财税风险诊断
    #icon-caishuifengxianzhenduan
  • kimi
    #icon-logok
  • 玺牛
    #icon-xiniu
  • 详细问题回顾
    #icon-xiangxiwentihuigu
  • 快捷箭头
    #icon-kuaijiejiantou
  • 财税
    #icon-caishui
  • 警告
    #icon-jinggao2
  • 视频脚本仿写
    #icon-shipinjiaobenfangxie
  • md
    #icon-md
  • xlsx、csv
    #icon-a-xlsxcsv
  • docx
    #icon-docx
  • ppt
    #icon-ppt
  • txt
    #icon-txt
  • pdf
    #icon-pdf
  • html、json
    #icon-a-htmljson
  • BI数据
    #icon-BIshuju
  • 一键生成预览图
    #icon-yijianshengchengyulantu
  • 视频脚本仿写-删除
    #icon-shipinjiaobenfangxie-shanchu
  • 仿写的脚本结构
    #icon-fangxiedejiaobenjiegou
  • 产品信息
    #icon-chanpinxinxi
  • 生成专属脚本
    #icon-shengchengzhuanshujiaoben
  • 拼多多
    #icon-pinduoduo
  • 京东
    #icon-jingdong
  • 亚马逊
    #icon-yamaxun
  • 1688
    #icon-a-1688
  • 淘宝
    #icon-taobao
  • 小红书
    #icon-xiaohongshu
  • 私域
    #icon-siyu
  • 关键词需求分析
    #icon-guanjiancixuqiufenxi1
  • 抖音
    #icon-douyin
  • 声音效果
    #icon-shengyinxiaoguo
  • 文案
    #icon-wenan
  • 视频摘要
    #icon-shipinzhaiyao
  • 视频画面
    #icon-shipinhuamian
  • 镜头语言
    #icon-jingtouyuyan
  • 视频脚本拆解
    #icon-shipinjiaobenchaijie
  • 授权账号
    #icon-shouquanzhanghao
  • 步骤三:店铺授权
    #icon-a-buzhousandianpushouquan
  • 教程说明
    #icon-jiaochengshuoming
  • 步骤二:录入店铺
    #icon-a-buzhouerlurudianpu
  • 步骤一:填写AK、SK
    #icon-a-buzhouyitianxieAKSK
  • 下一步
    #icon-xiayibu
  • 跳转
    #icon-tiaozhuan
  • 企业数据
    #icon-qiyeshuju
  • 兑换码
    #icon-duihuanma
  • 下载
    #icon-xiazai3
  • 全屏
    #icon-quanping1
  • 关闭
    #icon-guanbi
  • 退出全屏
    #icon-tuichuquanping
  • 复制链接
    #icon-fuzhilianjie
  • 人群诊断
    #icon-renqunzhenduan
  • 优质表现人群
    #icon-youzhibiaoxianrenqun
  • 人群数
    #icon-renqunshu
  • 地域诊断
    #icon-diyuzhenduan
  • 警告
    #icon-jinggao1
  • 建议关闭地域
    #icon-jianyiguanbidiyu
  • 总花费
    #icon-zonghuafei
  • 列表筛选
    #icon-liebiaoshaixuan
  • 优质表现地域
    #icon-youzhibiaoxiandiyu
  • 地域数
    #icon-diyushu
  • 诊断基准
    #icon-zhenduanjizhun
  • 使用文档
    #icon-shiyongwendang
  • 下跌
    #icon-xiadie
  • 优化建议
    #icon-youhuajianyi
  • 推广渠道
    #icon-tuiguangqudao
  • 指标评分
    #icon-zhibiaopingfen
  • 商品解读
    #icon-shangpinjiedu
  • 毛利率调节
    #icon-maolishuaitiaojie
  • 流量
    #icon-liuliang
  • 朝左箭头
    #icon-zhaozuojiantou
  • 升级企业版本
    #icon-shengjiqiyebanben1
  • 删除
    #icon-shanchu3
  • 失败
    #icon-shibai1
  • 添加子账号
    #icon-tianjiazizhanghao1
  • 成功
    #icon-chenggong
  • 返回箭头
    #icon-fanhuijiantou
  • 账单与用量
    #icon-zhangdanyuyongliang
  • 消息弹窗
    #icon-xiaoxidanchuang
  • 升级企业版本
    #icon-shengjiqiyebanben
  • 邀请
    #icon-yaoqing1
  • 退出登录
    #icon-tuichudenglu1
  • 消息弹窗-有消息
    #icon-xiaoxidanchuang-youxiaoxi
  • AI创作
    #icon-AIchuangzuo2
  • 企业管理
    #icon-gongsi
  • 推广大使
    #icon-tuiguangdashi
  • 我的订阅
    #icon-wodedingyue
  • 编辑资料
    #icon-bianjiziliao1
  • 前进箭头
    #icon-qianjinjiantou
  • 删除
    #icon-shanchu2
  • 添加子账号
    #icon-tianjiazizhanghao
  • 邀请
    #icon-yaoqing
  • 商品诊断
    #icon-shangpinzhenduan
  • 无限画布
    #icon-wuxianhuabu2
  • 组织管理
    #icon-zuzhiguanli2
  • 我的收藏
    #icon-wodeshoucang1
  • 展开
    #icon-zhankai3
  • AI对话
    #icon-AIduihua2
  • 收缩
    #icon-shousuo
  • 全部应用
    #icon-quanbuyingyong2
  • 品牌级详情页策划
    #icon-pinpaijixiangqingyecehua
  • 色调
    #icon-setiao
  • 勾选
    #icon-gouxuan1
  • 差异话价值
    #icon-chayihuajiazhi
  • 品牌定位
    #icon-pinpaidingwei
  • 产品价值洞察
    #icon-chanpinjiazhidongcha
  • 光影色彩
    #icon-guangyingsecai
  • 目标人群
    #icon-mubiaorenqun
  • 字体设计
    #icon-zitisheji
  • 光影要求
    #icon-guangyingyaoqiu
  • 推理过程
    #icon-tuiliguocheng
  • 人群
    #icon-renqun
  • 核心价值主张
    #icon-hexinjiazhizhuzhang
  • 卖点策略
    #icon-maidiancelve
  • 色彩情感
    #icon-secaiqinggan
  • 敬请期待
    #icon-jingqingqidai
  • 主图
    #icon-zhutu
  • 详情页
    #icon-xiangqingye
  • 竞品差异
    #icon-jingpinchayi
  • 主图脚本
    #icon-zhutujiaoben
  • 万相台推广
    #icon-wanxiangtaituiguang
  • 标题
    #icon-biaoti
  • 流量渠道
    #icon-liuliangqudao
  • 评价
    #icon-pingjia
  • 关键词需求分析
    #icon-guanjiancixuqiufenxi
  • 竞品诊断
    #icon-jingpinzhenduan
  • 智能选款
    #icon-zhinengxuankuan
  • 详情页脚本
    #icon-xiangqingyejiaoben
  • 买家秀
    #icon-maijiaxiu
  • 关键词选款
    #icon-guanjiancixuankuan
  • 找蓝海
    #icon-zhaolanhai
  • 问大家
    #icon-wendajia
  • 删除
    #icon-shanchu1
  • 预估搜索量
    #icon-yugusousuoliang
  • 关闭智能体
    #icon-guanbizhinengti1
  • 正确
    #icon-zhengque
  • 失败
    #icon-shibai
  • 竞品诊断
    #icon-jingpinzhenduan1
  • 加载中
    #icon-jiazaizhong
  • 批量下载
    #icon-piliangxiazai
  • 收起
    #icon-shouqi1
  • 展开
    #icon-zhankai2
  • 查看大图
    #icon-chakandatu
  • 下载
    #icon-xiazai2
  • 相机
    #icon-xiangji
  • 加
    #icon-jia
  • 下载
    #icon-xiazai1
  • 切换-上一张
    #icon-qiehuan-shangyizhang1
  • 切换-下一张-1
    #icon-qiehuan-shangyizhang-1
  • 减
    #icon-jian
  • 退出登录
    #icon-tuichudenglu
  • 编辑资料
    #icon-bianjiziliao
  • 切换账号
    #icon-qiehuanzhanghao
  • 积分
    #icon-jifen
  • AIGC积分
    #icon-AIGCjifen
  • AI试衣
    #icon-AIshiyi
  • 试穿模板
    #icon-shichuanmoban
  • 选择场景
    #icon-xuanzechangjing
  • 替换模特
    #icon-tihuanmote
  • AI场景
    #icon-AIchangjing
  • 收起
    #icon-shouqi
  • 展开
    #icon-zhankai
  • 新建对话
    #icon-xinjianduihua2
  • 全局提示-正确
    #icon-quanjutishi-zhengque
  • 张数
    #icon-zhangshu
  • 比例_21_9
    #icon-bili_21_9
  • 文生图
    #icon-wenshengtu
  • AI生图
    #icon-AIshengtu
  • 条形图
    #icon-tiaoxingtu
  • 环形图
    #icon-huanxingtu
  • 链接
    #icon-lianjie
  • 必填
    #icon-bitian
  • 上传
    #icon-shangchuan1
  • 提示
    #icon-tishi
  • 关闭智能体
    #icon-guanbizhinengti
  • 智能体
    #icon-zhinengti
  • exl文件
    #icon-exlwenjian
  • 重新上传
    #icon-zhongxinshangchuan
  • 开始播放
    #icon-kaishibofang
  • 成功提示
    #icon-chenggongtishi
  • 收藏-选中
    #icon-shoucang-xuanzhong
  • 下载
    #icon-xiazai
  • 删除
    #icon-shanchu
  • 比例_4_3
    #icon-bili_4_3
  • 复制
    #icon-fuzhi1
  • 比例_3_4
    #icon-bili_3_4
  • 比例_9_16
    #icon-bili_9_16
  • 比例_2_3
    #icon-bili_2_3
  • 比例_16_9
    #icon-bili_16_9
  • 比例_3_2
    #icon-bili_3_2
  • 比例_1_1
    #icon-bili_1_1
  • 收藏-未选中
    #icon-shoucang-weixuanzhong
  • 分享
    #icon-fenxiang
  • 提交
    #icon-Vector
  • 新建对话
    #icon-xinjianduihua
  • 深度思考-copy-copy
    #icon-shendusikao1
  • AI-发起新对话
    #icon-AI-faqixinduihua
  • AI对话-展开
    #icon-AIduihua-zhankai
  • AI对话-收起
    #icon-AIduihua-shouqi
  • 发送
    #icon-fasong
  • 收藏管理
    #icon-shoucangguanli
  • 全部应用
    #icon-quanbuyingyong
  • 组织管理
    #icon-zuzhiguanli
  • 折叠
    #icon-zhankai1-copy
  • 展开
    #icon-zhankai1
  • 未全选
    #icon-weiquanxuan1
  • 刷新
    #icon-shuaxin1
  • 宫格视图
    #icon-gonggeshitu1
  • 图生视频
    #icon-tushengshipin1
  • 16_9
    #icon-a-16_91
  • 数据看板
    #icon-shujukanban
  • 推广分析
    #icon-tuiguangfenxi
  • 刷新
    #icon-shuaxin
  • 勾选
    #icon-gouxuan
  • 模型
    #icon-moxing
  • 退出批量操作
    #icon-tuichupiliangcaozuo
  • 全屏
    #icon-quanping
  • 9_16
    #icon-a-9_16
  • 未全选
    #icon-weiquanxuan
  • 分辨率
    #icon-fenbianshuai
  • 批量选择
    #icon-piliangxuanze
  • 待勾选
    #icon-daigouxuan
  • 收藏
    #icon-shoucang
  • 风格
    #icon-fengge
  • 首页
    #icon-shouye
  • 1_1
    #icon-a-1_1
  • 宫格视图
    #icon-gonggeshitu
  • AI创作
    #icon-AIchuangzuo
  • 播放
    #icon-bofang
  • 更多
    #icon-gengduo
  • AI对话
    #icon-AIduihua
  • 再次生成
    #icon-zaicishengcheng
  • 文生视频
    #icon-wenshengshipin
  • 运动幅度
    #icon-yundongfudu
  • 我的作品
    #icon-wodezuopin
  • 做同款
    #icon-zuotongkuan
  • 切换-上一张
    #icon-qiehuan-shangyizhang
  • 切换
    #icon-qiehuan
  • 画面比例
    #icon-huamianbili
  • 时间视图
    #icon-shijianshitu
  • 生成时长
    #icon-shengchengshichang
  • 复制
    #icon-fuzhi
  • 警告
    #icon-jinggao
  • 文件夹
    #icon-wenjianjia
  • 切换-下一张
    #icon-qiehuan-xiayizhang
  • 新建文件夹
    #icon-xinjianwenjianjia
  • 16_9
    #icon-a-16_9
  • 市场洞察
    #icon-shichangdongcha
  • 上传
    #icon-shangchuan
  • 折叠
    #icon-zhedie
  • AI视频
    #icon-AIshipin
  • 展开
    #icon-zhedie-copy

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>