• DevOps-test
    
  • 密钥管理
    
  • 角色管理
    
  • 新闻
    
  • APP角色
    
  • 业务平台
    
  • tenant
    
  • 部门管理
    
  • 系统管理_用户管理
    
  • 提示词
    
  • 账单管理
    
  • 知识库
    
  • 专题库模型配置
    
  • 文档管理
    
  • 切片管理
    
  • ai助手
    
  • OCR识别
    
  • 数据中心-数据标注
    
  • 权限管理
    
  • 系统管理
    
  • 元数据管理
    
  • 系统日志
    
  • 退款订单
    
  • 支付渠道
    
  • 粉丝
    
  • 资产评估
    
  • 账号管理
    
  • 行政区划管理
    
  • swagger
    
  • 缓存监控
    
  • 单据模板_分组
    
  • 数据源管理
    
  • code
    
  • 租户
    
  • 商品订单
    
  • quartz
    
  • 底部导航
    
  • 菜单设置
    
  • 
    自动回复
    
  • 数据表管理
    
  • 流程管理
    
  • 我的发起
    
  • 待办任务
    
  • mti-模板管理
    
  • 待支付订单
    
  • 手机
    
  • field-manage
    
  • 底部导航
    
  • apigateway
    
  • 消息管理
    
  • 运营数据
    
  • 数据大屏
    
  • 任务管理
    
  • 信息推送
    
  • 数据报表
    
  • 抄送给我
    
  • 敏感词
    
  • 门户客户端
    
  • 标签
    
  • 我的已办
    
  • 收银台
    
  • 岗位图标
    
  • 参数管理
    
  • OA系统
    
  • 令牌
    
  • 微信公众号
    
  • 多渠道支付系统管理
    
  • 字典管理
    
  • shoujizhaorenlian
    
  • 发起流程
    
  • origin-data sheet
    
  • 素材管理
    
  • dian
    
  • fullscreen
    
  • gongju
    
  • shouye
    
  • xitongshezhi
    
  • zujian
    
  • skin
    
  • gerenzhongxin
    
  • dian
    
  • fullscreen-expand
    
  • quanxian
    
  • shixinyuan
    
  • webicon318
    
  • neiqianshujuchucun
    
  • crew_feature
    
  • tuichuquanping
    
  • caidan
    
  • shuju101
    
  • shuju
    
  • fuzhiyemian
    
  • icon-
    
  • caozuo-wailian
    
  • ico_shuju
    
  • zhongyingwenqiehuan
    
  • zhongyingwenyuyan
    
  • zhongyingwen
    
  • jinridaiban
    
  • shenqingkaiban
    
  • zhongyingzhuanhuan
    
  • AIshiyanshi
    
  • shidu
    
  • fangkuang
    
  • yangan
    
  • wendu
    
  • caijian
    
  • shangchuan
    
  • gouxuan-weixuanzhong-xianxingfangkuang
    
  • 选择器
    
  • zaosheng
    
  • fuwenben1
    
  • fuwenbenkuang
    
  • ditu
    
  • icons8-opera
    
  • tongzhi
    
  • ico
    
  • biaodan
    
  • siweidaotu
    
  • shibai
    
  • 
  • 3_round_solid
    
  • 4_round_solid
    
  • 5_round_solid
    
  • 7_round_solid
    
  • 9_round_solid
    
  • 30xuanzhongyuanxingfill
    
  • chazhaobiaodanliebiao
    
  • radio-off-full
    
  • jiliandongxuanzeqi
    
  • 1_round_solid
    
  • 2_round_solid
    
  • 6_round_solid
    
  • 8_round_solid
    
  • 7_round_solid
    
  • siweidaotu
    
  • dayin
    
  • xingqiu
    
  • diqiu
    
  • step
    
  • huanjingxingqiu
    
  • zidingyibuju
    
  • diqiu1
    
  • ziti
    
  • tuodong
    
  • font-size
    
  • 728bianjiqi_zitidaxiao
    
  • bolangneng
    
  • juxingkaobei
    
  • 15tupianyulan
    
  • bolangnengshiyanchang
    
  • tupianyulan
    
  • fuhao-zhongwen
    
  • -chaifenlie
    
  • zhongyingwen1
    
  • fuhao-yingwen
    
  • shuxingtu
    
  • -chaifenhang
    
  • jtongzhi2
    
  • dianhua
    
  • tongzhi3
    
  • tongzhi1
    
  • dongtai
    
  • yincangmima
    
  • tongzhi4
    
  • shuxing
    
  • wenducanshu-05
    
  • zhongduancanshu
    
  • xianshimima
    
  • tongzhi-4
    
  • barcode-qr
    
  • yunxiazai_o
    
  • putong
    
  • shuaxin
    
  • quanjushezhi_o
    
  • yunshangchuan_o
    
  • shouye_dongtaihui
    
  • zhongduancanshuchaxun
    
  • diannao1
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • DevOps-test
    .icon-DevOps
  • 密钥管理
    .icon-miyueguanli
  • 角色管理
    .icon-jiaoseguanli
  • 新闻
    .icon-wenzhangzixun
  • APP角色
    .icon-app-juese
  • 业务平台
    .icon-yewupingtai
  • tenant
    .icon-tenant
  • 部门管理
    .icon-bumenguanli
  • 系统管理_用户管理
    .icon-yonghuguanli
  • 提示词
    .icon-tishici
  • 账单管理
    .icon-zhangdanguanli
  • 知识库
    .icon-zhishi
  • 专题库模型配置
    .icon-zhuantikumoxingpeizhi
  • 文档管理
    .icon-wendangguanli
  • 切片管理
    .icon-qiepianguanli
  • ai助手
    .icon-aizhushou
  • OCR识别
    .icon-OCRshibie
  • 数据中心-数据标注
    .icon-shujuzhongxin-shujubiaozhu
  • 权限管理
    .icon-quanxianguanli
  • 系统管理
    .icon-xitongguanli
  • 元数据管理
    .icon-yuanshujuguanli
  • 系统日志
    .icon-xitongrizhi
  • 退款订单
    .icon-tuikuandingdan
  • 支付渠道
    .icon-zhifuqudao
  • 粉丝
    .icon-fans
  • 资产评估
    .icon-zcpg
  • 账号管理
    .icon-zhanghaoguanli
  • 行政区划管理
    .icon-hangzhengquhuaguanli
  • swagger
    .icon-swagger
  • 缓存监控
    .icon-huancunjiankong
  • 单据模板_分组
    .icon-danjumoban_fenzu
  • 数据源管理
    .icon-shujuyuanguanli
  • code
    .icon-daimashengcheng
  • 租户
    .icon-corporate_fare
  • 商品订单
    .icon-shangpindingdan
  • quartz
    .icon-quartz
  • 底部导航
    .icon-dibudaohang1
  • 菜单设置
    .icon-caidanshezhi
  • 自动回复
    .icon-zidonghuifu
  • 数据表管理
    .icon-shujubiaoguanli1
  • 流程管理
    .icon-liuchengguanli
  • 我的发起
    .icon-wodefaqi
  • 待办任务
    .icon-document-record
  • mti-模板管理
    .icon-mti-mobanguanli
  • 待支付订单
    .icon-daizhifudingdan
  • 手机
    .icon-shouji
  • field-manage
    .icon-field-manage
  • 底部导航
    .icon-dibudaohang
  • apigateway
    .icon-apigateway
  • 消息管理
    .icon-xiaoxiguanli
  • 运营数据
    .icon-yunyingshuju
  • 数据大屏
    .icon-shujudaping
  • 任务管理
    .icon-renwuguanli
  • 信息推送
    .icon-xinxituisong
  • 数据报表
    .icon-shujubaobiao
  • 抄送给我
    .icon-chaosonggeiwo
  • 敏感词
    .icon-sensitiveword
  • 门户客户端
    .icon-menhukehuduan
  • 标签
    .icon-biaoqian
  • 我的已办
    .icon-wodeyiban
  • 收银台
    .icon-shouyintai
  • 岗位图标
    .icon-gangweitubiao
  • 参数管理
    .icon-canshuguanli
  • OA系统
    .icon-OAxitong
  • 令牌
    .icon-lingpai
  • 微信公众号
    .icon-weixingongzhonghao
  • 多渠道支付系统管理
    .icon-duoqudaozhifuxitongguanli
  • 字典管理
    .icon-zidianguanli
  • shoujizhaorenlian
    .icon-shoujizhaorenlian
  • 发起流程
    .icon-faqiliucheng
  • origin-data sheet
    .icon-shujubiaoguanli
  • 素材管理
    .icon-sucaiguanli
  • dian
    .icon-dian
  • fullscreen
    .icon-fullscreen
  • gongju
    .icon-gongju
  • shouye
    .icon-shouye
  • xitongshezhi
    .icon-xitongshezhi
  • zujian
    .icon-zujian
  • skin
    .icon-skin
  • gerenzhongxin
    .icon-gerenzhongxin
  • dian
    .icon-dian1
  • fullscreen-expand
    .icon-fullscreen-expand
  • quanxian
    .icon-quanxian
  • shixinyuan
    .icon-shixinyuan
  • webicon318
    .icon-webicon318
  • neiqianshujuchucun
    .icon-neiqianshujuchucun
  • crew_feature
    .icon-crew_feature
  • tuichuquanping
    .icon-tuichuquanping
  • caidan
    .icon-caidan
  • shuju101
    .icon-shuju101
  • shuju
    .icon-shuju
  • fuzhiyemian
    .icon-fuzhiyemian
  • icon-
    .icon-a-44tubiao-63
  • caozuo-wailian
    .icon-caozuo-wailian
  • ico_shuju
    .icon-ico_shuju
  • zhongyingwenqiehuan
    .icon-zhongyingwenqiehuan
  • zhongyingwenyuyan
    .icon-zhongyingwenyuyan
  • zhongyingwen
    .icon-zhongyingwen
  • jinridaiban
    .icon-jinridaiban
  • shenqingkaiban
    .icon-shenqingkaiban
  • zhongyingzhuanhuan
    .icon-zhongyingzhuanhuan
  • AIshiyanshi
    .icon-AIshiyanshi
  • shidu
    .icon-shidu
  • fangkuang
    .icon-fangkuang
  • yangan
    .icon-yangan
  • wendu
    .icon-wendu
  • caijian
    .icon-crop
  • shangchuan
    .icon-upload
  • gouxuan-weixuanzhong-xianxingfangkuang
    .icon-gouxuan-weixuanzhong-xianxingfangkuang
  • 选择器
    .icon-xuanzeqi
  • zaosheng
    .icon-zaosheng
  • fuwenben1
    .icon-fuwenben1
  • fuwenbenkuang
    .icon-fuwenbenkuang
  • ditu
    .icon-ditudingwei
  • icons8-opera
    .icon-icons-opera
  • tongzhi
    .icon-tongzhi2
  • ico
    .icon-ico
  • biaodan
    .icon-biaodan
  • siweidaotu
    .icon-siweidaotu
  • shibai
    .icon-fail
  • .icon-one
  • 3_round_solid
    .icon-a-3_round_solid
  • 4_round_solid
    .icon-a-4_round_solid
  • 5_round_solid
    .icon-a-5_round_solid
  • 7_round_solid
    .icon-a-7_round_solid
  • 9_round_solid
    .icon-a-9_round_solid
  • 30xuanzhongyuanxingfill
    .icon-a-30xuanzhongyuanxingfill
  • chazhaobiaodanliebiao
    .icon-chazhaobiaodanliebiao
  • radio-off-full
    .icon-radio-off-full
  • jiliandongxuanzeqi
    .icon-jiliandongxuanzeqi
  • 1_round_solid
    .icon-a-1_round_solid
  • 2_round_solid
    .icon-a-2_round_solid
  • 6_round_solid
    .icon-a-6_round_solid
  • 8_round_solid
    .icon-a-8_round_solid
  • 7_round_solid
    .icon-a-7_round_solid1
  • siweidaotu
    .icon-siweidaotu1
  • dayin
    .icon-dayin
  • xingqiu
    .icon-xingqiu
  • diqiu
    .icon-ditu_diqiu_o
  • step
    .icon-step
  • huanjingxingqiu
    .icon-huanjingxingqiu
  • zidingyibuju
    .icon-zidingyibuju
  • diqiu1
    .icon-diqiu1
  • ziti
    .icon-ziti
  • tuodong
    .icon-tuodong
  • font-size
    .icon-font-size
  • 728bianjiqi_zitidaxiao
    .icon-bianjiqi_zitidaxiao
  • bolangneng
    .icon-bolangneng
  • juxingkaobei
    .icon-juxingkaobei
  • 15tupianyulan
    .icon-a-15tupianyulan
  • bolangnengshiyanchang
    .icon-bolangnengshiyanchang
  • tupianyulan
    .icon-tupianyulan
  • fuhao-zhongwen
    .icon-fuhao-zhongwen
  • -chaifenlie
    .icon--chaifenlie
  • zhongyingwen1
    .icon-zhongyingwen1
  • fuhao-yingwen
    .icon-fuhao-yingwen
  • shuxingtu
    .icon-shuxingtu
  • -chaifenhang
    .icon--chaifenhang
  • jtongzhi2
    .icon-jtongzhi2
  • dianhua
    .icon-dianhua
  • tongzhi3
    .icon-tongzhi
  • tongzhi1
    .icon-tongzhi1
  • dongtai
    .icon-dongtai
  • yincangmima
    .icon-yincangmima
  • tongzhi4
    .icon-tongzhi4
  • shuxing
    .icon-shuxingjiegou
  • wenducanshu-05
    .icon-wenducanshu-05
  • zhongduancanshu
    .icon-zhongduancanshu
  • xianshimima
    .icon-xianshimima
  • tongzhi-4
    .icon-tongzhi-4
  • barcode-qr
    .icon-barcode-qr
  • yunxiazai_o
    .icon-yunxiazai_o
  • putong
    .icon-putong
  • shuaxin
    .icon-shuaxin
  • quanjushezhi_o
    .icon-quanjushezhi_o
  • yunshangchuan_o
    .icon-yunshangchuan_o
  • shouye_dongtaihui
    .icon-shouye_dongtaihui
  • zhongduancanshuchaxun
    .icon-zhongduancanshuchaxun
  • diannao1
    .icon-diannao1

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

  • DevOps-test
    #icon-DevOps
  • 密钥管理
    #icon-miyueguanli
  • 角色管理
    #icon-jiaoseguanli
  • 新闻
    #icon-wenzhangzixun
  • APP角色
    #icon-app-juese
  • 业务平台
    #icon-yewupingtai
  • tenant
    #icon-tenant
  • 部门管理
    #icon-bumenguanli
  • 系统管理_用户管理
    #icon-yonghuguanli
  • 提示词
    #icon-tishici
  • 账单管理
    #icon-zhangdanguanli
  • 知识库
    #icon-zhishi
  • 专题库模型配置
    #icon-zhuantikumoxingpeizhi
  • 文档管理
    #icon-wendangguanli
  • 切片管理
    #icon-qiepianguanli
  • ai助手
    #icon-aizhushou
  • OCR识别
    #icon-OCRshibie
  • 数据中心-数据标注
    #icon-shujuzhongxin-shujubiaozhu
  • 权限管理
    #icon-quanxianguanli
  • 系统管理
    #icon-xitongguanli
  • 元数据管理
    #icon-yuanshujuguanli
  • 系统日志
    #icon-xitongrizhi
  • 退款订单
    #icon-tuikuandingdan
  • 支付渠道
    #icon-zhifuqudao
  • 粉丝
    #icon-fans
  • 资产评估
    #icon-zcpg
  • 账号管理
    #icon-zhanghaoguanli
  • 行政区划管理
    #icon-hangzhengquhuaguanli
  • swagger
    #icon-swagger
  • 缓存监控
    #icon-huancunjiankong
  • 单据模板_分组
    #icon-danjumoban_fenzu
  • 数据源管理
    #icon-shujuyuanguanli
  • code
    #icon-daimashengcheng
  • 租户
    #icon-corporate_fare
  • 商品订单
    #icon-shangpindingdan
  • quartz
    #icon-quartz
  • 底部导航
    #icon-dibudaohang1
  • 菜单设置
    #icon-caidanshezhi
  • 自动回复
    #icon-zidonghuifu
  • 数据表管理
    #icon-shujubiaoguanli1
  • 流程管理
    #icon-liuchengguanli
  • 我的发起
    #icon-wodefaqi
  • 待办任务
    #icon-document-record
  • mti-模板管理
    #icon-mti-mobanguanli
  • 待支付订单
    #icon-daizhifudingdan
  • 手机
    #icon-shouji
  • field-manage
    #icon-field-manage
  • 底部导航
    #icon-dibudaohang
  • apigateway
    #icon-apigateway
  • 消息管理
    #icon-xiaoxiguanli
  • 运营数据
    #icon-yunyingshuju
  • 数据大屏
    #icon-shujudaping
  • 任务管理
    #icon-renwuguanli
  • 信息推送
    #icon-xinxituisong
  • 数据报表
    #icon-shujubaobiao
  • 抄送给我
    #icon-chaosonggeiwo
  • 敏感词
    #icon-sensitiveword
  • 门户客户端
    #icon-menhukehuduan
  • 标签
    #icon-biaoqian
  • 我的已办
    #icon-wodeyiban
  • 收银台
    #icon-shouyintai
  • 岗位图标
    #icon-gangweitubiao
  • 参数管理
    #icon-canshuguanli
  • OA系统
    #icon-OAxitong
  • 令牌
    #icon-lingpai
  • 微信公众号
    #icon-weixingongzhonghao
  • 多渠道支付系统管理
    #icon-duoqudaozhifuxitongguanli
  • 字典管理
    #icon-zidianguanli
  • shoujizhaorenlian
    #icon-shoujizhaorenlian
  • 发起流程
    #icon-faqiliucheng
  • origin-data sheet
    #icon-shujubiaoguanli
  • 素材管理
    #icon-sucaiguanli
  • dian
    #icon-dian
  • fullscreen
    #icon-fullscreen
  • gongju
    #icon-gongju
  • shouye
    #icon-shouye
  • xitongshezhi
    #icon-xitongshezhi
  • zujian
    #icon-zujian
  • skin
    #icon-skin
  • gerenzhongxin
    #icon-gerenzhongxin
  • dian
    #icon-dian1
  • fullscreen-expand
    #icon-fullscreen-expand
  • quanxian
    #icon-quanxian
  • shixinyuan
    #icon-shixinyuan
  • webicon318
    #icon-webicon318
  • neiqianshujuchucun
    #icon-neiqianshujuchucun
  • crew_feature
    #icon-crew_feature
  • tuichuquanping
    #icon-tuichuquanping
  • caidan
    #icon-caidan
  • shuju101
    #icon-shuju101
  • shuju
    #icon-shuju
  • fuzhiyemian
    #icon-fuzhiyemian
  • icon-
    #icon-a-44tubiao-63
  • caozuo-wailian
    #icon-caozuo-wailian
  • ico_shuju
    #icon-ico_shuju
  • zhongyingwenqiehuan
    #icon-zhongyingwenqiehuan
  • zhongyingwenyuyan
    #icon-zhongyingwenyuyan
  • zhongyingwen
    #icon-zhongyingwen
  • jinridaiban
    #icon-jinridaiban
  • shenqingkaiban
    #icon-shenqingkaiban
  • zhongyingzhuanhuan
    #icon-zhongyingzhuanhuan
  • AIshiyanshi
    #icon-AIshiyanshi
  • shidu
    #icon-shidu
  • fangkuang
    #icon-fangkuang
  • yangan
    #icon-yangan
  • wendu
    #icon-wendu
  • caijian
    #icon-crop
  • shangchuan
    #icon-upload
  • gouxuan-weixuanzhong-xianxingfangkuang
    #icon-gouxuan-weixuanzhong-xianxingfangkuang
  • 选择器
    #icon-xuanzeqi
  • zaosheng
    #icon-zaosheng
  • fuwenben1
    #icon-fuwenben1
  • fuwenbenkuang
    #icon-fuwenbenkuang
  • ditu
    #icon-ditudingwei
  • icons8-opera
    #icon-icons-opera
  • tongzhi
    #icon-tongzhi2
  • ico
    #icon-ico
  • biaodan
    #icon-biaodan
  • siweidaotu
    #icon-siweidaotu
  • shibai
    #icon-fail
  • #icon-one
  • 3_round_solid
    #icon-a-3_round_solid
  • 4_round_solid
    #icon-a-4_round_solid
  • 5_round_solid
    #icon-a-5_round_solid
  • 7_round_solid
    #icon-a-7_round_solid
  • 9_round_solid
    #icon-a-9_round_solid
  • 30xuanzhongyuanxingfill
    #icon-a-30xuanzhongyuanxingfill
  • chazhaobiaodanliebiao
    #icon-chazhaobiaodanliebiao
  • radio-off-full
    #icon-radio-off-full
  • jiliandongxuanzeqi
    #icon-jiliandongxuanzeqi
  • 1_round_solid
    #icon-a-1_round_solid
  • 2_round_solid
    #icon-a-2_round_solid
  • 6_round_solid
    #icon-a-6_round_solid
  • 8_round_solid
    #icon-a-8_round_solid
  • 7_round_solid
    #icon-a-7_round_solid1
  • siweidaotu
    #icon-siweidaotu1
  • dayin
    #icon-dayin
  • xingqiu
    #icon-xingqiu
  • diqiu
    #icon-ditu_diqiu_o
  • step
    #icon-step
  • huanjingxingqiu
    #icon-huanjingxingqiu
  • zidingyibuju
    #icon-zidingyibuju
  • diqiu1
    #icon-diqiu1
  • ziti
    #icon-ziti
  • tuodong
    #icon-tuodong
  • font-size
    #icon-font-size
  • 728bianjiqi_zitidaxiao
    #icon-bianjiqi_zitidaxiao
  • bolangneng
    #icon-bolangneng
  • juxingkaobei
    #icon-juxingkaobei
  • 15tupianyulan
    #icon-a-15tupianyulan
  • bolangnengshiyanchang
    #icon-bolangnengshiyanchang
  • tupianyulan
    #icon-tupianyulan
  • fuhao-zhongwen
    #icon-fuhao-zhongwen
  • -chaifenlie
    #icon--chaifenlie
  • zhongyingwen1
    #icon-zhongyingwen1
  • fuhao-yingwen
    #icon-fuhao-yingwen
  • shuxingtu
    #icon-shuxingtu
  • -chaifenhang
    #icon--chaifenhang
  • jtongzhi2
    #icon-jtongzhi2
  • dianhua
    #icon-dianhua
  • tongzhi3
    #icon-tongzhi
  • tongzhi1
    #icon-tongzhi1
  • dongtai
    #icon-dongtai
  • yincangmima
    #icon-yincangmima
  • tongzhi4
    #icon-tongzhi4
  • shuxing
    #icon-shuxingjiegou
  • wenducanshu-05
    #icon-wenducanshu-05
  • zhongduancanshu
    #icon-zhongduancanshu
  • xianshimima
    #icon-xianshimima
  • tongzhi-4
    #icon-tongzhi-4
  • barcode-qr
    #icon-barcode-qr
  • yunxiazai_o
    #icon-yunxiazai_o
  • putong
    #icon-putong
  • shuaxin
    #icon-shuaxin
  • quanjushezhi_o
    #icon-quanjushezhi_o
  • yunshangchuan_o
    #icon-yunshangchuan_o
  • shouye_dongtaihui
    #icon-shouye_dongtaihui
  • zhongduancanshuchaxun
    #icon-zhongduancanshuchaxun
  • diannao1
    #icon-diannao1

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>