• 刷新
    
  • 刷新
    
  • 智能云
    
  • 合作-A
    
  • 工业的-3
    
  • 设备数字化
    
  • 录像
    
  • 录像
    
  • 更多图片
    
  • 首页
    
  • 字号-加
    
  • 字号-减
    
  • 稿件(本)
    
  • 
  • 火车
    
  • 环境
    
  • 37拓展-细
    
  • 海关口岸
    
  • 会展
    
  • 提升效率
    
  • 语音
    
  • 垃圾箱
    
  • 向上箭头
    
  • 向上箭头
    
  • 上 箭头
    
  • 上 箭头
    
  • 大数据
    
  • 研发创新
    
  • 展厅智能中控系统
    
  • 数字经济
    
  • 城市
    
  • 技术
    
  • AI
    
  • 展厅申请
    
  • 展示
    
  • 互联网
    
  • 地球
    
  • 机器人
    
  • 研发
    
  • 智能制造
    
  • 地图定位
    
  • 日期时间
    
  • 服务
    
  • ichongqing
    
  • 取消
    
  • 稿件-作者
    
  • 人物-团队
    
  • 分类
    
  • 时间
    
  • 分类
    
  • 分享
    
  • 电话
    
  • 坐标
    
  • 坐标 icon
    
  • 投资
    
  • cash-total
    
  • 贸易-59
    
  • 广州国际贸易单一窗口
    
  • 09-政策
    
  • 我的投资
    
  • 开放式基金
    
  • 去投资
    
  • 我的投资
    
  • 政策宣传
    
  • 发展活力
    
  • 发展
    
  • 酒店
    
  • 搜索
    
  • 链接
    
  • 留言
    
  • 留言
    
  • 微博
    
  • 空心箭头
    
  • 左箭头
    
  • 上箭头
    
  • 左箭头
    
  • 左箭头
    
  • 播放
    
  • 日历
    
  • 留言
    
  • 留言
    
  • 留言
    
  • 留言
    
  • 留言
    
  • 微信
    
  • 微博
    
  • QQ
    
  • facebook
    
  • instagram
    
  • youtube
    
  • Linkedin
    
  • twitter
    
  • 旅行
    
  • 风景
    
  • 购物
    
  • 遗迹
    
  • 旅行
    
  • 购物
    
  • 博物馆
    
  • 主题公园
    
  • 博物馆
    
  • 其他
    
  • ic-Restaurants
    
  • 历史遗迹-01
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 刷新
    .icon-shuaxin
  • 刷新
    .icon-shuaxin1
  • 智能云
    .icon-tubiao-
  • 合作-A
    .icon-hezuo-A
  • 工业的-3
    .icon-gongyede-
  • 设备数字化
    .icon-shebeishuzihua
  • 录像
    .icon-luxiang
  • 录像
    .icon-luxiang1
  • 更多图片
    .icon-gengduotupian
  • 首页
    .icon-shouye
  • 字号-加
    .icon-Word-add
  • 字号-减
    .icon-Word-minus
  • 稿件(本)
    .icon-gaojianben
  • .icon-zan
  • 火车
    .icon-huoche
  • 环境
    .icon-huanjing
  • 37拓展-细
    .icon-tuozhan-xi
  • 海关口岸
    .icon-haiguankouan
  • 会展
    .icon-huizhan
  • 提升效率
    .icon-tishengxiaoshuai
  • 语音
    .icon-yuyin
  • 垃圾箱
    .icon-lajixiang
  • 向上箭头
    .icon-xiangshangjiantou-copy-copy
  • 向上箭头
    .icon-xiangshangjiantou-copy
  • 上 箭头
    .icon-shangjiantou
  • 上 箭头
    .icon-shangjiantou1
  • 大数据
    .icon-dashuju
  • 研发创新
    .icon-yanfachuangxin
  • 展厅智能中控系统
    .icon-zhantingzhinengzhongkongxitong
  • 数字经济
    .icon-shuzijingji
  • 城市
    .icon-chengshi
  • 技术
    .icon-jishu
  • AI
    .icon-wuguan
  • 展厅申请
    .icon-zhantingshenqing
  • 展示
    .icon-zhanshi
  • 互联网
    .icon-hulianwang
  • 地球
    .icon-diqiu
  • 机器人
    .icon-jiqiren
  • 研发
    .icon-yanfa
  • 智能制造
    .icon-zhinengzhizao
  • 地图定位
    .icon-ditudingwei
  • 日期时间
    .icon-riqishijian
  • 服务
    .icon-fuwu
  • ichongqing
    .icon-ichongqing
  • 取消
    .icon-quxiao
  • 稿件-作者
    .icon-gaojian-zuozhe
  • 人物-团队
    .icon-renwu-tuandui
  • 分类
    .icon-iconfl
  • 时间
    .icon-shijian
  • 分类
    .icon-fenlei
  • 分享
    .icon-fenxiang-copy
  • 电话
    .icon-dianhua
  • 坐标
    .icon-zuobiao
  • 坐标 icon
    .icon-zuobiaoicon
  • 投资
    .icon-touzi1
  • cash-total
    .icon-shoukuanzonge
  • 贸易-59
    .icon-maoyi-
  • 广州国际贸易单一窗口
    .icon-guangzhouguojimaoyidanyichuangkou
  • 09-政策
    .icon-zhengce
  • 我的投资
    .icon-touzi
  • 开放式基金
    .icon-kaifangshijijin
  • 去投资
    .icon-qutouzi
  • 我的投资
    .icon-wodetouzi
  • 政策宣传
    .icon-zhengcexuanchuan
  • 发展活力
    .icon-fazhanhuoli
  • 发展
    .icon-fazhan
  • 酒店
    .icon-jiudian
  • 搜索
    .icon-iconset0157
  • 链接
    .icon-lianjie
  • 留言
    .icon-liuyan4
  • 留言
    .icon-liuyan5
  • 微博
    .icon-weibo1
  • 空心箭头
    .icon-kongxinjiantou33
  • 左箭头
    .icon-icon1
  • 上箭头
    .icon-icon-shang
  • 左箭头
    .icon-xiangzuo
  • 左箭头
    .icon-left-angle-copy
  • 播放
    .icon-play
  • 日历
    .icon-rili
  • 留言
    .icon-liuyan-copy
  • 留言
    .icon-liuyan
  • 留言
    .icon-liuyan1
  • 留言
    .icon-liuyan2
  • 留言
    .icon-liuyan3
  • 微信
    .icon-weixin
  • 微博
    .icon-weibo
  • QQ
    .icon-QQ
  • facebook
    .icon-facebook
  • instagram
    .icon-instagram
  • youtube
    .icon-youtube
  • Linkedin
    .icon-Linkedin
  • twitter
    .icon-twitter
  • 旅行
    .icon-lvxing
  • 风景
    .icon-icon
  • 购物
    .icon-12gouwuicon
  • 遗迹
    .icon-yiji
  • 旅行
    .icon-lvhang
  • 购物
    .icon-gouwu
  • 博物馆
    .icon-bowuguan
  • 主题公园
    .icon-zhutigongyuan
  • 博物馆
    .icon-bowuguan1
  • 其他
    .icon-qita
  • ic-Restaurants
    .icon-ic-Restaurants
  • 历史遗迹-01
    .icon-lishiyiji-

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

  • 刷新
    #icon-shuaxin
  • 刷新
    #icon-shuaxin1
  • 智能云
    #icon-tubiao-
  • 合作-A
    #icon-hezuo-A
  • 工业的-3
    #icon-gongyede-
  • 设备数字化
    #icon-shebeishuzihua
  • 录像
    #icon-luxiang
  • 录像
    #icon-luxiang1
  • 更多图片
    #icon-gengduotupian
  • 首页
    #icon-shouye
  • 字号-加
    #icon-Word-add
  • 字号-减
    #icon-Word-minus
  • 稿件(本)
    #icon-gaojianben
  • #icon-zan
  • 火车
    #icon-huoche
  • 环境
    #icon-huanjing
  • 37拓展-细
    #icon-tuozhan-xi
  • 海关口岸
    #icon-haiguankouan
  • 会展
    #icon-huizhan
  • 提升效率
    #icon-tishengxiaoshuai
  • 语音
    #icon-yuyin
  • 垃圾箱
    #icon-lajixiang
  • 向上箭头
    #icon-xiangshangjiantou-copy-copy
  • 向上箭头
    #icon-xiangshangjiantou-copy
  • 上 箭头
    #icon-shangjiantou
  • 上 箭头
    #icon-shangjiantou1
  • 大数据
    #icon-dashuju
  • 研发创新
    #icon-yanfachuangxin
  • 展厅智能中控系统
    #icon-zhantingzhinengzhongkongxitong
  • 数字经济
    #icon-shuzijingji
  • 城市
    #icon-chengshi
  • 技术
    #icon-jishu
  • AI
    #icon-wuguan
  • 展厅申请
    #icon-zhantingshenqing
  • 展示
    #icon-zhanshi
  • 互联网
    #icon-hulianwang
  • 地球
    #icon-diqiu
  • 机器人
    #icon-jiqiren
  • 研发
    #icon-yanfa
  • 智能制造
    #icon-zhinengzhizao
  • 地图定位
    #icon-ditudingwei
  • 日期时间
    #icon-riqishijian
  • 服务
    #icon-fuwu
  • ichongqing
    #icon-ichongqing
  • 取消
    #icon-quxiao
  • 稿件-作者
    #icon-gaojian-zuozhe
  • 人物-团队
    #icon-renwu-tuandui
  • 分类
    #icon-iconfl
  • 时间
    #icon-shijian
  • 分类
    #icon-fenlei
  • 分享
    #icon-fenxiang-copy
  • 电话
    #icon-dianhua
  • 坐标
    #icon-zuobiao
  • 坐标 icon
    #icon-zuobiaoicon
  • 投资
    #icon-touzi1
  • cash-total
    #icon-shoukuanzonge
  • 贸易-59
    #icon-maoyi-
  • 广州国际贸易单一窗口
    #icon-guangzhouguojimaoyidanyichuangkou
  • 09-政策
    #icon-zhengce
  • 我的投资
    #icon-touzi
  • 开放式基金
    #icon-kaifangshijijin
  • 去投资
    #icon-qutouzi
  • 我的投资
    #icon-wodetouzi
  • 政策宣传
    #icon-zhengcexuanchuan
  • 发展活力
    #icon-fazhanhuoli
  • 发展
    #icon-fazhan
  • 酒店
    #icon-jiudian
  • 搜索
    #icon-iconset0157
  • 链接
    #icon-lianjie
  • 留言
    #icon-liuyan4
  • 留言
    #icon-liuyan5
  • 微博
    #icon-weibo1
  • 空心箭头
    #icon-kongxinjiantou33
  • 左箭头
    #icon-icon1
  • 上箭头
    #icon-icon-shang
  • 左箭头
    #icon-xiangzuo
  • 左箭头
    #icon-left-angle-copy
  • 播放
    #icon-play
  • 日历
    #icon-rili
  • 留言
    #icon-liuyan-copy
  • 留言
    #icon-liuyan
  • 留言
    #icon-liuyan1
  • 留言
    #icon-liuyan2
  • 留言
    #icon-liuyan3
  • 微信
    #icon-weixin
  • 微博
    #icon-weibo
  • QQ
    #icon-QQ
  • facebook
    #icon-facebook
  • instagram
    #icon-instagram
  • youtube
    #icon-youtube
  • Linkedin
    #icon-Linkedin
  • twitter
    #icon-twitter
  • 旅行
    #icon-lvxing
  • 风景
    #icon-icon
  • 购物
    #icon-12gouwuicon
  • 遗迹
    #icon-yiji
  • 旅行
    #icon-lvhang
  • 购物
    #icon-gouwu
  • 博物馆
    #icon-bowuguan
  • 主题公园
    #icon-zhutigongyuan
  • 博物馆
    #icon-bowuguan1
  • 其他
    #icon-qita
  • ic-Restaurants
    #icon-ic-Restaurants
  • 历史遗迹-01
    #icon-lishiyiji-

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>