• 商城1
    
  • 小红书
    
  • 视频
    
  • 24gf-phoneBubble
    
  • 抖音
    
  • 位置
    
  • 24gf-phone24h
    
  • 小程序
    
  • 24gl-phone24h
    
  • 箭头-右上
    
  • 对勾
    
  • 上
    
  • 微博
    
  • 微信
    
  • language
    
  • 专利信息
    
  • 对话
    
  • vr
    
  • whatsapp
    
  • 微信
    
  • 购物
    
  • 商城
    
  • 309下一页、前进、查看更多-线性圆框
    
  • 售前咨询
    
  • linkedin
    
  • twitter
    
  • instagram
    
  • social_fb
    
  • social_linkedin
    
  • social_sina
    
  • social_youtube
    
  • social_twitter
    
  • facebook
    
  • linkedin
    
  • youtube
    
  • 谷歌
    
  • 邮箱
    
  • WIFI
    
  • 功能_产业咨询
    
  • 咨询
    
  • 客服
    
  • 电 话
    
  • qq
    
  • home_fill
    
  • 产品-面性
    
  • 更多2
    
  • 电话
    
  • 箭头 上
    
  • 更多
    
  • 更多
    
  • Arrow Ledft 1 - 24px
    
  • Arrow Right 1 - 24px
    
  • swap-right
    
  • swap-left
    
  • left arrow
    
  • right arrow
    
  • 箭头_切换向下_o
    
  • 箭头_切换右_o
    
  • 箭头_切换向上_o
    
  • 箭头_切换左_o
    
  • 更多
    
  • 播放
    
  • 播放
    
  • 下载
    
  • 扫码
    
  • 3.1收藏-选中
    
  • 3.1收藏
    
  • download
    
  • down
    
  • up
    
  • add
    
  • minus
    
  • link
    
  • 二维码
    
  • 返回
    
  • 关闭
    
  • 搜索
    
  • 箭头
    
  • 菜单_menu42
    
  • arrow-down
    
  • arrow-left
    
  • arrow-right
    
  • arrow-up
    
  • home
    
  • 缩小
    
  • 放大
    
  • 搜索
    
  • 时间
    
  • 搜索
    
  • 箭头右
    
  • 箭头左
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1699162665107'); /* IE9 */
  src: url('iconfont.eot?t=1699162665107#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1699162665107') format('woff2'),
       url('iconfont.woff?t=1699162665107') format('woff');
}

第二步:定义使用 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"。

  • 商城1
    .icon-shangcheng
  • 小红书
    .icon-xiaohongshu
  • 视频
    .icon-shipin
  • 24gf-phoneBubble
    .icon-24gf-phoneBubble
  • 抖音
    .icon-douyin
  • 位置
    .icon-weizhi
  • 24gf-phone24h
    .icon-24gf-phone24h
  • 小程序
    .icon-xiaochengxu
  • 24gl-phone24h
    .icon-24gl-phone24h
  • 箭头-右上
    .icon-changyongtubiao-fuben-12
  • 对勾
    .icon-duigoux
  • 上
    .icon-shang
  • 微博
    .icon-weibo
  • 微信
    .icon-weixin
  • language
    .icon-language
  • 专利信息
    .icon-zhuanlixinxi
  • 对话
    .icon-duihua
  • vr
    .icon-vr
  • whatsapp
    .icon-whatsapp
  • 微信
    .icon-weixin2
  • 购物
    .icon-gouwu
  • 商城
    .icon-icon-test
  • 309下一页、前进、查看更多-线性圆框
    .icon-xiayiyeqianjinchakangengduo-xianxingyuankuang
  • 售前咨询
    .icon-shouqianzixun
  • linkedin
    .icon-linkedin
  • twitter
    .icon-twitter
  • instagram
    .icon-instagram
  • social_fb
    .icon-icon-test2
  • social_linkedin
    .icon-icon-test3
  • social_sina
    .icon-icon-test4
  • social_youtube
    .icon-icon-test5
  • social_twitter
    .icon-icon-test6
  • facebook
    .icon-facebook
  • linkedin
    .icon-linkedin1
  • youtube
    .icon-youtube
  • 谷歌
    .icon-guge
  • 邮箱
    .icon-youxiang
  • WIFI
    .icon-WIFI
  • 功能_产业咨询
    .icon-gongneng_chanyezixun
  • 咨询
    .icon-zixun
  • 客服
    .icon-kefu1
  • 电 话
    .icon-dianhua3
  • qq
    .icon-qq
  • home_fill
    .icon-homefill
  • 产品-面性
    .icon-chanpin-mianxing
  • 更多2
    .icon-gengduo11
  • 电话
    .icon-dianhua5
  • 箭头 上
    .icon-jiantoushang
  • 更多
    .icon-gengduo1
  • 更多
    .icon-a-ziyuan13
  • Arrow Ledft 1 - 24px
    .icon-ArrowLedft1-24px
  • Arrow Right 1 - 24px
    .icon-ArrowRight1-24px
  • swap-right
    .icon-swap-right
  • swap-left
    .icon-swap-left
  • left arrow
    .icon-leftarrow
  • right arrow
    .icon-rightarrow
  • 箭头_切换向下_o
    .icon-jiantou_qiehuanxiangxia_o
  • 箭头_切换右_o
    .icon-jiantou_qiehuanyou_o
  • 箭头_切换向上_o
    .icon-jiantou_qiehuanxiangshang_o
  • 箭头_切换左_o
    .icon-jiantou_qiehuanzuo_o
  • 更多
    .icon-gengduo
  • 播放
    .icon-bofang
  • 播放
    .icon-iconset0481
  • 下载
    .icon-xiazai
  • 扫码
    .icon-iconfontscan
  • 3.1收藏-选中
    .icon-31shoucangxuanzhong
  • 3.1收藏
    .icon-31shoucang
  • download
    .icon-download
  • down
    .icon-down
  • up
    .icon-up
  • add
    .icon-add
  • minus
    .icon-minus
  • link
    .icon-link
  • 二维码
    .icon-erweima1688
  • 返回
    .icon-fanhui
  • 关闭
    .icon-guanbi
  • 搜索
    .icon-sousuo11
  • 箭头
    .icon-jiantou
  • 菜单_menu42
    .icon-caidanmenu42
  • arrow-down
    .icon-arrowdown
  • arrow-left
    .icon-arrowleft
  • arrow-right
    .icon-arrowright
  • arrow-up
    .icon-arrowup
  • home
    .icon-home
  • 缩小
    .icon-suoxiao
  • 放大
    .icon-fangda
  • 搜索
    .icon-sousuo
  • 时间
    .icon-shijian
  • 搜索
    .icon-sousuo1
  • 箭头右
    .icon-jiantouyou
  • 箭头左
    .icon-jiantouzuo

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

  • 商城1
    #icon-shangcheng
  • 小红书
    #icon-xiaohongshu
  • 视频
    #icon-shipin
  • 24gf-phoneBubble
    #icon-24gf-phoneBubble
  • 抖音
    #icon-douyin
  • 位置
    #icon-weizhi
  • 24gf-phone24h
    #icon-24gf-phone24h
  • 小程序
    #icon-xiaochengxu
  • 24gl-phone24h
    #icon-24gl-phone24h
  • 箭头-右上
    #icon-changyongtubiao-fuben-12
  • 对勾
    #icon-duigoux
  • 上
    #icon-shang
  • 微博
    #icon-weibo
  • 微信
    #icon-weixin
  • language
    #icon-language
  • 专利信息
    #icon-zhuanlixinxi
  • 对话
    #icon-duihua
  • vr
    #icon-vr
  • whatsapp
    #icon-whatsapp
  • 微信
    #icon-weixin2
  • 购物
    #icon-gouwu
  • 商城
    #icon-icon-test
  • 309下一页、前进、查看更多-线性圆框
    #icon-xiayiyeqianjinchakangengduo-xianxingyuankuang
  • 售前咨询
    #icon-shouqianzixun
  • linkedin
    #icon-linkedin
  • twitter
    #icon-twitter
  • instagram
    #icon-instagram
  • social_fb
    #icon-icon-test2
  • social_linkedin
    #icon-icon-test3
  • social_sina
    #icon-icon-test4
  • social_youtube
    #icon-icon-test5
  • social_twitter
    #icon-icon-test6
  • facebook
    #icon-facebook
  • linkedin
    #icon-linkedin1
  • youtube
    #icon-youtube
  • 谷歌
    #icon-guge
  • 邮箱
    #icon-youxiang
  • WIFI
    #icon-WIFI
  • 功能_产业咨询
    #icon-gongneng_chanyezixun
  • 咨询
    #icon-zixun
  • 客服
    #icon-kefu1
  • 电 话
    #icon-dianhua3
  • qq
    #icon-qq
  • home_fill
    #icon-homefill
  • 产品-面性
    #icon-chanpin-mianxing
  • 更多2
    #icon-gengduo11
  • 电话
    #icon-dianhua5
  • 箭头 上
    #icon-jiantoushang
  • 更多
    #icon-gengduo1
  • 更多
    #icon-a-ziyuan13
  • Arrow Ledft 1 - 24px
    #icon-ArrowLedft1-24px
  • Arrow Right 1 - 24px
    #icon-ArrowRight1-24px
  • swap-right
    #icon-swap-right
  • swap-left
    #icon-swap-left
  • left arrow
    #icon-leftarrow
  • right arrow
    #icon-rightarrow
  • 箭头_切换向下_o
    #icon-jiantou_qiehuanxiangxia_o
  • 箭头_切换右_o
    #icon-jiantou_qiehuanyou_o
  • 箭头_切换向上_o
    #icon-jiantou_qiehuanxiangshang_o
  • 箭头_切换左_o
    #icon-jiantou_qiehuanzuo_o
  • 更多
    #icon-gengduo
  • 播放
    #icon-bofang
  • 播放
    #icon-iconset0481
  • 下载
    #icon-xiazai
  • 扫码
    #icon-iconfontscan
  • 3.1收藏-选中
    #icon-31shoucangxuanzhong
  • 3.1收藏
    #icon-31shoucang
  • download
    #icon-download
  • down
    #icon-down
  • up
    #icon-up
  • add
    #icon-add
  • minus
    #icon-minus
  • link
    #icon-link
  • 二维码
    #icon-erweima1688
  • 返回
    #icon-fanhui
  • 关闭
    #icon-guanbi
  • 搜索
    #icon-sousuo11
  • 箭头
    #icon-jiantou
  • 菜单_menu42
    #icon-caidanmenu42
  • arrow-down
    #icon-arrowdown
  • arrow-left
    #icon-arrowleft
  • arrow-right
    #icon-arrowright
  • arrow-up
    #icon-arrowup
  • home
    #icon-home
  • 缩小
    #icon-suoxiao
  • 放大
    #icon-fangda
  • 搜索
    #icon-sousuo
  • 时间
    #icon-shijian
  • 搜索
    #icon-sousuo1
  • 箭头右
    #icon-jiantouyou
  • 箭头左
    #icon-jiantouzuo

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>