• 面字母D
    
  • 面字母C
    
  • 面字母J
    
  • 面字母F
    
  • 面字母L
    
  • 面字母A
    
  • 面字母N
    
  • 面字母G
    
  • 面字母O
    
  • 面字母M
    
  • 面字母K
    
  • 面字母B
    
  • 面字母I
    
  • 面字母E
    
  • 面字母R
    
  • 面字母T
    
  • 面字母W
    
  • 面字母Z
    
  • 面字母Q
    
  • 面字母P
    
  • 面字母U
    
  • 面字母V
    
  • 面字母X
    
  • 面字母S
    
  • 面字母Y
    
  • 面字母H
    
  • 胶片字体数字1
    
  • 胶片字体数字7
    
  • 胶片字体数字6
    
  • 胶片字体数字8
    
  • 胶片字体数字9
    
  • 胶片字体数字4
    
  • 胶片字体数字3
    
  • 胶片字体数字5
    
  • 胶片字体数字2
    
  • 胶片字体数字0
    
  • palette-fill
    
  • palette-line
    
  • code-box-line
    
  • code-s-slash-fill
    
  • code-box-fill
    
  • 画CAD线
    
  • 卫浴分离
    
  • 卫浴
    
  • 消防工程
    
  • 消防-消防知识
    
  • 招标
    
  • 家装 门
    
  • 客栈公寓
    
  • 别墅
    
  • 长租公寓
    
  • 样板间
    
  • Toaster
    
  • 酒店
    
  • 3d展厅
    
  • 收口
    
  • 民宿
    
  • 衣柜
    
  • 床垫
    
  • 厨房电器
    
  • 
  • 瓷砖
    
  • 冰箱
    
  • 灯具
    
  • 窗帘
    
  • 橱柜
    
  • 电视机
    
  • 辅材
    
  • 淋浴
    
  • 地板
    
  • 空调
    
  • 热水器
    
  • 电视柜
    
  • 沙发
    
  • 木工
    
  • 开关
    
  • 泥工
    
  • 其他
    
  • 涂料
    
  • 水电工
    
  • 门窗
    
  • 洗衣机
    
  • 验房
    
  • 桌椅
    
  • 装修公司
    
  • 油漆工
    
  • 设计费
    
  • 物业费
    
  • 吊顶
    
  • 室内设备_楼梯
    
  • 楼梯扶手
    
  • 预制混凝土楼梯
    
  • 楼梯
    
  • 楼梯STAI
    
  • 衣帽间
    
  • 地漏
    
  • 书房
    
  • 书房
    
  • 衣帽间
    
  • 图例_
    
  • 书房
    
  • 书房
    
  • 洗手台
    
  • 衣帽间
    
  • 衣帽间
    
  • 瓷砖石材
    
  • 地漏防臭
    
  • 通用-集体会议
    
  • 天然石材
    
  • appstore
    
  • bank
    
  • 幕墙
    
  • 墙体
    
  • 报价-2
    
  • 1v1-2
    
  • 案例-2
    
  • 保障-2
    
  • 菜单-2
    
  • 搭配-2
    
  • 厨房-2
    
  • 铲墙-2
    
  • 攻略-2
    
  • 工期-2
    
  • 工厂-2
    
  • 教程-2
    
  • 沟通需求-2
    
  • 电话-2
    
  • 节点验收-2
    
  • 客厅-2
    
  • 竣工-2
    
  • 竣工验收-2
    
  • 沟通-2
    
  • 放样-2
    
  • 开工-2
    
  • 面积-2
    
  • 砌墙-2
    
  • 量房-2
    
  • 过程保护-2
    
  • 匹配设计师-2
    
  • 合同-2
    
  • 软装-2
    
  • 实时-2
    
  • 水电-2
    
  • 浏览-2
    
  • 敲墙-2
    
  • 审批-2
    
  • 水电质保-2
    
  • 设计方案-2
    
  • 墙保地保-2
    
  • 售后-2
    
  • 体验-2
    
  • 卧室-2
    
  • 物业报备-2
    
  • 阳台-2
    
  • 验房-2
    
  • 卫生间-2
    
  • 延误赔偿-2
    
  • 预算-2
    
  • 消费者-2
    
  • 品质硬装-2
    
  • 微信-2
    
  • 在线预约-2
    
  • 油漆-2
    
  • 展厅-2
    
  • 折扣-2
    
  • 主页-2
    
  • 总代-2
    
  • N级分销-2
    
  • 预约设计-2
    
  • 优惠活动-2
    
  • 专车-2
    
  • bubble-chart-fill
    
  • bubble-chart-line
    
  • customer-service-2-fill
    
  • customer-service-2-line
    
  • honour-fill
    
  • honour-line
    
  • codepen-fill
    
  • collage-fill
    
  • collage-line
    
  • group-fill
    
  • group-line
    
  • landscape-fill
    
  • landscape-line
    
  • qr-code-fill
    
  • qr-code-line
    
  • shield-check-fill
    
  • shield-cross-fill
    
  • shield-check-line
    
  • shield-cross-line
    
  • shield-star-fill
    
  • shield-user-fill
    
  • shield-user-line
    
  • shield-star-line
    
  • shopping-bag-2-fill
    
  • shopping-bag-2-line
    
  • shopping-bag-3-fill
    
  • shopping-bag-3-line
    
  • star-fill
    
  • star-half-fill
    
  • star-line
    
  • star-smile-fill
    
  • star-s-line
    
  • star-smile-line
    
  • t-shirt-fill
    
  • t-shirt-line
    
  • table-alt-fill
    
  • table-alt-line
    
  • table-fill
    
  • table-line
    
  • team-fill
    
  • team-line
    
  • vip-crown-2-fill
    
  • vip-crown-2-line
    
  • vip-crown-fill
    
  • vip-crown-line
    
  • wechat-fill
    
  • notification-3-line
    
  • notification-3-fill
    
  • add-circle-fill
    
  • add-circle-line
    
  • sun-fill
    
  • sun-line
    
  • eye-fill
    
  • eye-line
    
  • mark-pen-fill
    
  • mark-pen-line
    
  • moon-fill
    
  • moon-line
    
  • search-line
    
  • 
  • 
  • 
  • jitheme
    
  • jitheme
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • 面字母D
    .a-ziyuan4
  • 面字母C
    .a-ziyuan3
  • 面字母J
    .a-ziyuan10
  • 面字母F
    .a-ziyuan6
  • 面字母L
    .a-ziyuan12
  • 面字母A
    .a-ziyuan1
  • 面字母N
    .a-ziyuan14
  • 面字母G
    .a-ziyuan7
  • 面字母O
    .a-ziyuan15
  • 面字母M
    .a-ziyuan13
  • 面字母K
    .a-ziyuan11
  • 面字母B
    .a-ziyuan2
  • 面字母I
    .a-ziyuan9
  • 面字母E
    .a-ziyuan5
  • 面字母R
    .a-ziyuan18
  • 面字母T
    .a-ziyuan20
  • 面字母W
    .a-ziyuan23
  • 面字母Z
    .a-ziyuan26
  • 面字母Q
    .a-ziyuan17
  • 面字母P
    .a-ziyuan16
  • 面字母U
    .a-ziyuan21
  • 面字母V
    .a-ziyuan22
  • 面字母X
    .a-ziyuan24
  • 面字母S
    .a-ziyuan19
  • 面字母Y
    .a-ziyuan25
  • 面字母H
    .a-ziyuan8
  • 胶片字体数字1
    .sz-1
  • 胶片字体数字7
    .sz-7
  • 胶片字体数字6
    .sz-6
  • 胶片字体数字8
    .sz-8
  • 胶片字体数字9
    .sz-9
  • 胶片字体数字4
    .sz-4
  • 胶片字体数字3
    .sz-3
  • 胶片字体数字5
    .sz-5
  • 胶片字体数字2
    .sz-2
  • 胶片字体数字0
    .sz-0
  • palette-fill
    .palette-fill
  • palette-line
    .palette-line
  • code-box-line
    .code-box-line
  • code-s-slash-fill
    .code-s-slash-fill
  • code-box-fill
    .code-box-fill
  • 画CAD线
    .huaCADxian
  • 卫浴分离
    .weiyufenli
  • 卫浴
    .weiyu
  • 消防工程
    .xiaofanggongcheng
  • 消防-消防知识
    .xiaofang-xiaofangzhishi
  • 招标
    .zhaobiao
  • 家装 门
    .xhx
  • 客栈公寓
    .kezhangongyu
  • 别墅
    .bieshu
  • 长租公寓
    .changzugongyu
  • 样板间
    .yangbanjian
  • Toaster
    .Toaster
  • 酒店
    .jiudian
  • 3d展厅
    .Fill3
  • 收口
    .shoukou
  • 民宿
    .a-21minsu_homestay
  • 衣柜
    .yigui
  • 床垫
    .chuangdian
  • 厨房电器
    .chufangdianqi
  • .chuang
  • 瓷砖
    .cizhuan
  • 冰箱
    .bingxiang
  • 灯具
    .dengju
  • 窗帘
    .chuanglian
  • 橱柜
    .chugui
  • 电视机
    .dianshiji
  • 辅材
    .fucai
  • 淋浴
    .linyu
  • 地板
    .diban
  • 空调
    .kongtiao
  • 热水器
    .reshuiqi
  • 电视柜
    .dianshigui
  • 沙发
    .shafa
  • 木工
    .mugong
  • 开关
    .kaiguan
  • 泥工
    .nigong
  • 其他
    .qita
  • 涂料
    .tuliao
  • 水电工
    .shuidiangong
  • 门窗
    .menchuang
  • 洗衣机
    .xiyiji
  • 验房
    .yanfang
  • 桌椅
    .zhuoyi
  • 装修公司
    .zhuangxiugongsi
  • 油漆工
    .youqigong
  • 设计费
    .shejifei
  • 物业费
    .wuyefei
  • 吊顶
    .diaoding
  • 室内设备_楼梯
    .shineishebei_louti
  • 楼梯扶手
    .loutifushou
  • 预制混凝土楼梯
    .yuzhihunningtulouti
  • 楼梯
    .louti
  • 楼梯STAI
    .loutiSTAI
  • 衣帽间
    .yimaojian
  • 地漏
    .dilou
  • 书房
    .shufang
  • 书房
    .shugui
  • 衣帽间
    .yimaojian1
  • 图例_
    .tuli_
  • 书房
    .shufang1
  • 书房
    .shufang2
  • 洗手台
    .xishoutai
  • 衣帽间
    .yimaojian2
  • 衣帽间
    .yimaojian3
  • 瓷砖石材
    .cizhuanshicai
  • 地漏防臭
    .diloufangchou
  • 通用-集体会议
    .tongyong-jitihuiyi
  • 天然石材
    .tianranshicai
  • appstore
    .appstore
  • bank
    .bank
  • 幕墙
    .muqiang
  • 墙体
    .qiangti
  • 报价-2
    .baojia-2
  • 1v1-2
    .1v1-2
  • 案例-2
    .anli-2
  • 保障-2
    .baozhang-2
  • 菜单-2
    .caidan-2
  • 搭配-2
    .dapei-2
  • 厨房-2
    .chufang-2
  • 铲墙-2
    .chanqiang-2
  • 攻略-2
    .gonglve-2
  • 工期-2
    .gongqi-2
  • 工厂-2
    .gongchang-2
  • 教程-2
    .jiaocheng-2
  • 沟通需求-2
    .goutongxuqiu-2
  • 电话-2
    .dianhua-2
  • 节点验收-2
    .jiedianyanshou-2
  • 客厅-2
    .keting-2
  • 竣工-2
    .jungong-2
  • 竣工验收-2
    .jungongyanshou-2
  • 沟通-2
    .goutong-2
  • 放样-2
    .fangyang-2
  • 开工-2
    .kaigong-2
  • 面积-2
    .mianji-2
  • 砌墙-2
    .qiqiang-2
  • 量房-2
    .liangfang-2
  • 过程保护-2
    .guochengbaohu-2
  • 匹配设计师-2
    .pipeishejishi-2
  • 合同-2
    .hetong-2
  • 软装-2
    .ruanzhuang-2
  • 实时-2
    .shishi-2
  • 水电-2
    .shuidian-2
  • 浏览-2
    .liulan-2
  • 敲墙-2
    .qiaoqiang-2
  • 审批-2
    .shenpi-2
  • 水电质保-2
    .shuidianzhibao-2
  • 设计方案-2
    .shejifangan-2
  • 墙保地保-2
    .qiangbaodibao-2
  • 售后-2
    .shouhou-2
  • 体验-2
    .tiyan-2
  • 卧室-2
    .woshi-2
  • 物业报备-2
    .wuyebaobei-2
  • 阳台-2
    .yangtai-2
  • 验房-2
    .yanfang-2
  • 卫生间-2
    .weishengjian-2
  • 延误赔偿-2
    .yanwupeichang-2
  • 预算-2
    .yusuan-2
  • 消费者-2
    .xiaofeizhe-2
  • 品质硬装-2
    .pinzhiyingzhuang-2
  • 微信-2
    .weixin-2
  • 在线预约-2
    .zaixianyuyue-2
  • 油漆-2
    .youqi-2
  • 展厅-2
    .zhanting-2
  • 折扣-2
    .zhekou-2
  • 主页-2
    .zhuye-2
  • 总代-2
    .zongdai-2
  • N级分销-2
    .Njifenxiao-2
  • 预约设计-2
    .yuyuesheji-2
  • 优惠活动-2
    .youhuihuodong-2
  • 专车-2
    .zhuanche-2
  • bubble-chart-fill
    .bubble-chart-fill
  • bubble-chart-line
    .bubble-chart-line
  • customer-service-2-fill
    .customer-service-2-fill
  • customer-service-2-line
    .customer-service-2-line
  • honour-fill
    .honour-fill
  • honour-line
    .honour-line
  • codepen-fill
    .codepen-fill
  • collage-fill
    .collage-fill
  • collage-line
    .collage-line
  • group-fill
    .group-fill
  • group-line
    .group-line
  • landscape-fill
    .landscape-fill
  • landscape-line
    .landscape-line
  • qr-code-fill
    .qr-code-fill
  • qr-code-line
    .qr-code-line
  • shield-check-fill
    .shield-check-fill
  • shield-cross-fill
    .shield-cross-fill
  • shield-check-line
    .shield-check-line
  • shield-cross-line
    .shield-cross-line
  • shield-star-fill
    .shield-star-fill
  • shield-user-fill
    .shield-user-fill
  • shield-user-line
    .shield-user-line
  • shield-star-line
    .shield-star-line
  • shopping-bag-2-fill
    .shopping-bag-2-fill
  • shopping-bag-2-line
    .shopping-bag-2-line
  • shopping-bag-3-fill
    .shopping-bag-3-fill
  • shopping-bag-3-line
    .shopping-bag-3-line
  • star-fill
    .star-fill
  • star-half-fill
    .star-half-fill
  • star-line
    .star-line
  • star-smile-fill
    .star-smile-fill
  • star-s-line
    .star-s-line
  • star-smile-line
    .star-smile-line
  • t-shirt-fill
    .t-shirt-fill
  • t-shirt-line
    .t-shirt-line
  • table-alt-fill
    .table-alt-fill
  • table-alt-line
    .table-alt-line
  • table-fill
    .table-fill
  • table-line
    .table-line
  • team-fill
    .team-fill
  • team-line
    .team-line
  • vip-crown-2-fill
    .vip-crown-2-fill
  • vip-crown-2-line
    .vip-crown-2-line
  • vip-crown-fill
    .vip-crown-fill
  • vip-crown-line
    .vip-crown-line
  • wechat-fill
    .wechat-fill
  • notification-3-line
    .notification-3-line
  • notification-3-fill
    .notification-3-fill
  • add-circle-fill
    .add-circle-fill
  • add-circle-line
    .add-circle-line
  • sun-fill
    .sun-fill
  • sun-line
    .sun-line
  • eye-fill
    .eye-fill
  • eye-line
    .eye-line
  • mark-pen-fill
    .mark-pen-fill
  • mark-pen-line
    .mark-pen-line
  • moon-fill
    .moon-fill
  • moon-line
    .moon-line
  • search-line
    .search-line
  • .xin
  • .bao
  • .fei
  • jitheme
    .jitheme-logo
  • jitheme
    .logoa

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="Jifont xxx"></span>

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

  • 面字母D
    #a-ziyuan4
  • 面字母C
    #a-ziyuan3
  • 面字母J
    #a-ziyuan10
  • 面字母F
    #a-ziyuan6
  • 面字母L
    #a-ziyuan12
  • 面字母A
    #a-ziyuan1
  • 面字母N
    #a-ziyuan14
  • 面字母G
    #a-ziyuan7
  • 面字母O
    #a-ziyuan15
  • 面字母M
    #a-ziyuan13
  • 面字母K
    #a-ziyuan11
  • 面字母B
    #a-ziyuan2
  • 面字母I
    #a-ziyuan9
  • 面字母E
    #a-ziyuan5
  • 面字母R
    #a-ziyuan18
  • 面字母T
    #a-ziyuan20
  • 面字母W
    #a-ziyuan23
  • 面字母Z
    #a-ziyuan26
  • 面字母Q
    #a-ziyuan17
  • 面字母P
    #a-ziyuan16
  • 面字母U
    #a-ziyuan21
  • 面字母V
    #a-ziyuan22
  • 面字母X
    #a-ziyuan24
  • 面字母S
    #a-ziyuan19
  • 面字母Y
    #a-ziyuan25
  • 面字母H
    #a-ziyuan8
  • 胶片字体数字1
    #sz-1
  • 胶片字体数字7
    #sz-7
  • 胶片字体数字6
    #sz-6
  • 胶片字体数字8
    #sz-8
  • 胶片字体数字9
    #sz-9
  • 胶片字体数字4
    #sz-4
  • 胶片字体数字3
    #sz-3
  • 胶片字体数字5
    #sz-5
  • 胶片字体数字2
    #sz-2
  • 胶片字体数字0
    #sz-0
  • palette-fill
    #palette-fill
  • palette-line
    #palette-line
  • code-box-line
    #code-box-line
  • code-s-slash-fill
    #code-s-slash-fill
  • code-box-fill
    #code-box-fill
  • 画CAD线
    #huaCADxian
  • 卫浴分离
    #weiyufenli
  • 卫浴
    #weiyu
  • 消防工程
    #xiaofanggongcheng
  • 消防-消防知识
    #xiaofang-xiaofangzhishi
  • 招标
    #zhaobiao
  • 家装 门
    #xhx
  • 客栈公寓
    #kezhangongyu
  • 别墅
    #bieshu
  • 长租公寓
    #changzugongyu
  • 样板间
    #yangbanjian
  • Toaster
    #Toaster
  • 酒店
    #jiudian
  • 3d展厅
    #Fill3
  • 收口
    #shoukou
  • 民宿
    #a-21minsu_homestay
  • 衣柜
    #yigui
  • 床垫
    #chuangdian
  • 厨房电器
    #chufangdianqi
  • #chuang
  • 瓷砖
    #cizhuan
  • 冰箱
    #bingxiang
  • 灯具
    #dengju
  • 窗帘
    #chuanglian
  • 橱柜
    #chugui
  • 电视机
    #dianshiji
  • 辅材
    #fucai
  • 淋浴
    #linyu
  • 地板
    #diban
  • 空调
    #kongtiao
  • 热水器
    #reshuiqi
  • 电视柜
    #dianshigui
  • 沙发
    #shafa
  • 木工
    #mugong
  • 开关
    #kaiguan
  • 泥工
    #nigong
  • 其他
    #qita
  • 涂料
    #tuliao
  • 水电工
    #shuidiangong
  • 门窗
    #menchuang
  • 洗衣机
    #xiyiji
  • 验房
    #yanfang
  • 桌椅
    #zhuoyi
  • 装修公司
    #zhuangxiugongsi
  • 油漆工
    #youqigong
  • 设计费
    #shejifei
  • 物业费
    #wuyefei
  • 吊顶
    #diaoding
  • 室内设备_楼梯
    #shineishebei_louti
  • 楼梯扶手
    #loutifushou
  • 预制混凝土楼梯
    #yuzhihunningtulouti
  • 楼梯
    #louti
  • 楼梯STAI
    #loutiSTAI
  • 衣帽间
    #yimaojian
  • 地漏
    #dilou
  • 书房
    #shufang
  • 书房
    #shugui
  • 衣帽间
    #yimaojian1
  • 图例_
    #tuli_
  • 书房
    #shufang1
  • 书房
    #shufang2
  • 洗手台
    #xishoutai
  • 衣帽间
    #yimaojian2
  • 衣帽间
    #yimaojian3
  • 瓷砖石材
    #cizhuanshicai
  • 地漏防臭
    #diloufangchou
  • 通用-集体会议
    #tongyong-jitihuiyi
  • 天然石材
    #tianranshicai
  • appstore
    #appstore
  • bank
    #bank
  • 幕墙
    #muqiang
  • 墙体
    #qiangti
  • 报价-2
    #baojia-2
  • 1v1-2
    #1v1-2
  • 案例-2
    #anli-2
  • 保障-2
    #baozhang-2
  • 菜单-2
    #caidan-2
  • 搭配-2
    #dapei-2
  • 厨房-2
    #chufang-2
  • 铲墙-2
    #chanqiang-2
  • 攻略-2
    #gonglve-2
  • 工期-2
    #gongqi-2
  • 工厂-2
    #gongchang-2
  • 教程-2
    #jiaocheng-2
  • 沟通需求-2
    #goutongxuqiu-2
  • 电话-2
    #dianhua-2
  • 节点验收-2
    #jiedianyanshou-2
  • 客厅-2
    #keting-2
  • 竣工-2
    #jungong-2
  • 竣工验收-2
    #jungongyanshou-2
  • 沟通-2
    #goutong-2
  • 放样-2
    #fangyang-2
  • 开工-2
    #kaigong-2
  • 面积-2
    #mianji-2
  • 砌墙-2
    #qiqiang-2
  • 量房-2
    #liangfang-2
  • 过程保护-2
    #guochengbaohu-2
  • 匹配设计师-2
    #pipeishejishi-2
  • 合同-2
    #hetong-2
  • 软装-2
    #ruanzhuang-2
  • 实时-2
    #shishi-2
  • 水电-2
    #shuidian-2
  • 浏览-2
    #liulan-2
  • 敲墙-2
    #qiaoqiang-2
  • 审批-2
    #shenpi-2
  • 水电质保-2
    #shuidianzhibao-2
  • 设计方案-2
    #shejifangan-2
  • 墙保地保-2
    #qiangbaodibao-2
  • 售后-2
    #shouhou-2
  • 体验-2
    #tiyan-2
  • 卧室-2
    #woshi-2
  • 物业报备-2
    #wuyebaobei-2
  • 阳台-2
    #yangtai-2
  • 验房-2
    #yanfang-2
  • 卫生间-2
    #weishengjian-2
  • 延误赔偿-2
    #yanwupeichang-2
  • 预算-2
    #yusuan-2
  • 消费者-2
    #xiaofeizhe-2
  • 品质硬装-2
    #pinzhiyingzhuang-2
  • 微信-2
    #weixin-2
  • 在线预约-2
    #zaixianyuyue-2
  • 油漆-2
    #youqi-2
  • 展厅-2
    #zhanting-2
  • 折扣-2
    #zhekou-2
  • 主页-2
    #zhuye-2
  • 总代-2
    #zongdai-2
  • N级分销-2
    #Njifenxiao-2
  • 预约设计-2
    #yuyuesheji-2
  • 优惠活动-2
    #youhuihuodong-2
  • 专车-2
    #zhuanche-2
  • bubble-chart-fill
    #bubble-chart-fill
  • bubble-chart-line
    #bubble-chart-line
  • customer-service-2-fill
    #customer-service-2-fill
  • customer-service-2-line
    #customer-service-2-line
  • honour-fill
    #honour-fill
  • honour-line
    #honour-line
  • codepen-fill
    #codepen-fill
  • collage-fill
    #collage-fill
  • collage-line
    #collage-line
  • group-fill
    #group-fill
  • group-line
    #group-line
  • landscape-fill
    #landscape-fill
  • landscape-line
    #landscape-line
  • qr-code-fill
    #qr-code-fill
  • qr-code-line
    #qr-code-line
  • shield-check-fill
    #shield-check-fill
  • shield-cross-fill
    #shield-cross-fill
  • shield-check-line
    #shield-check-line
  • shield-cross-line
    #shield-cross-line
  • shield-star-fill
    #shield-star-fill
  • shield-user-fill
    #shield-user-fill
  • shield-user-line
    #shield-user-line
  • shield-star-line
    #shield-star-line
  • shopping-bag-2-fill
    #shopping-bag-2-fill
  • shopping-bag-2-line
    #shopping-bag-2-line
  • shopping-bag-3-fill
    #shopping-bag-3-fill
  • shopping-bag-3-line
    #shopping-bag-3-line
  • star-fill
    #star-fill
  • star-half-fill
    #star-half-fill
  • star-line
    #star-line
  • star-smile-fill
    #star-smile-fill
  • star-s-line
    #star-s-line
  • star-smile-line
    #star-smile-line
  • t-shirt-fill
    #t-shirt-fill
  • t-shirt-line
    #t-shirt-line
  • table-alt-fill
    #table-alt-fill
  • table-alt-line
    #table-alt-line
  • table-fill
    #table-fill
  • table-line
    #table-line
  • team-fill
    #team-fill
  • team-line
    #team-line
  • vip-crown-2-fill
    #vip-crown-2-fill
  • vip-crown-2-line
    #vip-crown-2-line
  • vip-crown-fill
    #vip-crown-fill
  • vip-crown-line
    #vip-crown-line
  • wechat-fill
    #wechat-fill
  • notification-3-line
    #notification-3-line
  • notification-3-fill
    #notification-3-fill
  • add-circle-fill
    #add-circle-fill
  • add-circle-line
    #add-circle-line
  • sun-fill
    #sun-fill
  • sun-line
    #sun-line
  • eye-fill
    #eye-fill
  • eye-line
    #eye-line
  • mark-pen-fill
    #mark-pen-fill
  • mark-pen-line
    #mark-pen-line
  • moon-fill
    #moon-fill
  • moon-line
    #moon-line
  • search-line
    #search-line
  • #xin
  • #bao
  • #fei
  • jitheme
    #jitheme-logo
  • jitheme
    #logoa

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>