• search
    
  • linux
    
  • search
    
  • 抗DDos
    
  • search
    
  • 列表,分类
    
  • 抗DDos
    
  • 抗DDos
    
  • YY_classify_2
    
  • 价格
    
  • 分类
    
  • emi价格
    
  • 列表3
    
  • 日期
    
  • 价格
    
  • search
    
  • 内存
    
  • IP
    
  • dashboard_xen
    
  • 内存
    
  • CPU
    
  • 物料价格
    
  • cpu
    
  • 价格查询
    
  • 日期
    
  • 内存条
    
  • 内存条
    
  • 充流量_方形
    
  • 端口
    
  • 首页-防御
    
  • 云硬盘快照
    
  • DDoS
    
  • 列表
    
  • 二级-虚拟机安全检查
    
  • 084价格查询
    
  • IP高防
    
  • 存货价格
    
  • 内存
    
  • 盾
    
  • 列表
    
  • system
    
  • 虚拟机
    
  • delete user
    
  • user
    
  • 操作系统
    
  • windows
    
  • 列表
    
  • 工单
    
  • 日期
    
  • 列表
    
  • 快照
    
  • 备份
    
  • 云硬盘
    
  • 列表_
    
  • 流量
    
  • HDD,机械硬盘,电脑硬盘
    
  • SSD,固态硬盘,电脑硬盘
    
  • 芯片,CPU
    
  • 硬盘
    
  • 端口配置
    
  • CPU
    
  • ts-图标_SLL
    
  • ts-图标_WEB
    
  • ts-图标_VM
    
  • ts-图标_windows
    
  • ts-图标_APPinst
    
  • ts-图标_client
    
  • ts-图标_db
    
  • ts-图标_kvm
    
  • ts-图标_ips
    
  • ts-图标_mangementserver
    
  • ts-图标_san-port
    
  • ts-图标_linux
    
  • 价格
    
  • category
    
  • cpu
    
  • 分类4
    
  • 分类5
    
  • 价格表
    
  • 分类1
    
  • 日期
    
  • 列表排列
    
  • 分类
    
  • ubuntu
    
  • User
    
  • 控制台
    
  • Security-Anti-DDoS
    
  • category-live
    
  • category-forum
    
  • category-pdf
    
  • category-replay
    
  • category-unknown
    
  • category-text
    
  • category-test
    
  • category-video
    
  • DDos高防IP
    
  • 流量
    
  • user
    
  • 虚拟机服务器
    
  • 日期
    
  • 流量
    
  • 控制面板
    
  • 列表
    
  • 操作系统
    
  • 分类分级
    
  • 逻辑网卡端口
    
  • 端口
    
  • 网络端口
    
  • 其他操作系统
    
  • 操作系统
    
  • 快照
    
  • 内存
    
  • ADJUST_BY_CATEGORY
    
  • CATEGORY_STATISTICS
    
  • 销售价格
    
  • 01控制面板
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • search
    .icon-search
  • linux
    .icon-linux
  • search
    .icon-search1
  • 抗DDos
    .icon-kangddos
  • search
    .icon-search2
  • 列表,分类
    .icon-liebiaofenlei
  • 抗DDos
    .icon-kangddos1
  • 抗DDos
    .icon-kangddos2
  • YY_classify_2
    .icon-yyclassify2
  • 价格
    .icon-icon-price
  • 分类
    .icon-icon
  • emi价格
    .icon-emijiage
  • 列表3
    .icon-liebiao3
  • 日期
    .icon-riqi
  • 价格
    .icon-jiage
  • search
    .icon-search3
  • 内存
    .icon-neicun
  • IP
    .icon-IP
  • dashboard_xen
    .icon-dashboard_xen
  • 内存
    .icon-neicun1
  • CPU
    .icon-CPU
  • 物料价格
    .icon-wuliaojiage
  • cpu
    .icon-cpu
  • 价格查询
    .icon-jiagechaxun
  • 日期
    .icon-riqi1
  • 内存条
    .icon-memory
  • 内存条
    .icon-memory1
  • 充流量_方形
    .icon-chongliuliang_fangxing
  • 端口
    .icon-port
  • 首页-防御
    .icon-Ddosfangyu
  • 云硬盘快照
    .icon-yunyingpankuaizhao
  • DDoS
    .icon-DDoS
  • 列表
    .icon-liebiao
  • 二级-虚拟机安全检查
    .icon-erji-xunijianquanjiancha
  • 084价格查询
    .icon-jiagechaxun1
  • IP高防
    .icon-IPgaofang
  • 存货价格
    .icon-navicon-chjg
  • 内存
    .icon-icon-test
  • 盾
    .icon-dun
  • 列表
    .icon-liebiao1
  • system
    .icon-system
  • 虚拟机
    .icon-xuniji
  • delete user
    .icon-deleteuser
  • user
    .icon-user
  • 操作系统
    .icon-caozuoxitong
  • windows
    .icon-windows
  • 列表
    .icon-liebiao2
  • 工单
    .icon-liebiao4
  • 日期
    .icon-riqi2
  • 列表
    .icon-liebiao5
  • 快照
    .icon-kuaizhao
  • 备份
    .icon-beifen
  • 云硬盘
    .icon-yunyingpan
  • 列表_
    .icon-liebiao_
  • 流量
    .icon-liuliang
  • HDD,机械硬盘,电脑硬盘
    .icon-huabankaobei-
  • SSD,固态硬盘,电脑硬盘
    .icon-huaban-
  • 芯片,CPU
    .icon-huaban-1
  • 硬盘
    .icon-yingpan
  • 端口配置
    .icon-ziyuanxhdpi
  • CPU
    .icon-xingzhuang
  • ts-图标_SLL
    .icon-ts-tubiao_SLL
  • ts-图标_WEB
    .icon-ts-tubiao_WEB
  • ts-图标_VM
    .icon-ts-tubiao_VM
  • ts-图标_windows
    .icon-ts-tubiao_windows
  • ts-图标_APPinst
    .icon-ts-tubiao_APPinst
  • ts-图标_client
    .icon-ts-tubiao_client
  • ts-图标_db
    .icon-ts-tubiao_db
  • ts-图标_kvm
    .icon-ts-tubiao_kvm
  • ts-图标_ips
    .icon-ts-tubiao_ips
  • ts-图标_mangementserver
    .icon-ts-tubiao_mangementserver
  • ts-图标_san-port
    .icon-ts-tubiao_san-port
  • ts-图标_linux
    .icon-ts-tubiao_linux
  • 价格
    .icon-jiage1
  • category
    .icon-zhenhuichongtubiaozhizuo-kuozhan-
  • cpu
    .icon-cpu1
  • 分类4
    .icon-fenlei
  • 分类5
    .icon-fenlei1
  • 价格表
    .icon-jiagebiao
  • 分类1
    .icon-fenlei2
  • 日期
    .icon-riqi3
  • 列表排列
    .icon-liebiaopailie
  • 分类
    .icon-fenlei3
  • ubuntu
    .icon-ubuntu
  • User
    .icon-User
  • 控制台
    .icon-kongzhitai
  • Security-Anti-DDoS
    .icon-Security-Anti-DDoS
  • category-live
    .icon-category-live
  • category-forum
    .icon-category-forum
  • category-pdf
    .icon-category-pdf
  • category-replay
    .icon-category-replay
  • category-unknown
    .icon-category-unknown
  • category-text
    .icon-category-text
  • category-test
    .icon-category-test
  • category-video
    .icon-category-video
  • DDos高防IP
    .icon-DDosgaofangIP
  • 流量
    .icon-liuliang1
  • user
    .icon-user1
  • 虚拟机服务器
    .icon-ziyuan1452
  • 日期
    .icon-riqi4
  • 流量
    .icon-liuliang2
  • 控制面板
    .icon-kongzhimianban
  • 列表
    .icon-liebiao6
  • 操作系统
    .icon-caozuoxitong1
  • 分类分级
    .icon-fenleifenji
  • 逻辑网卡端口
    .icon-luojiwangkaduankou
  • 端口
    .icon-duankou
  • 网络端口
    .icon-wangluoduankou
  • 其他操作系统
    .icon-qitacaozuoxitong
  • 操作系统
    .icon-caozuoxitong2
  • 快照
    .icon-kuaizhao1
  • 内存
    .icon-neicun2
  • ADJUST_BY_CATEGORY
    .icon-ADJUST_BY_CATEGORY
  • CATEGORY_STATISTICS
    .icon-CATEGORY_STATISTICS
  • 销售价格
    .icon-xiaoshoujiage
  • 01控制面板
    .icon-leftfont-07

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

  • search
    #icon-search
  • linux
    #icon-linux
  • search
    #icon-search1
  • 抗DDos
    #icon-kangddos
  • search
    #icon-search2
  • 列表,分类
    #icon-liebiaofenlei
  • 抗DDos
    #icon-kangddos1
  • 抗DDos
    #icon-kangddos2
  • YY_classify_2
    #icon-yyclassify2
  • 价格
    #icon-icon-price
  • 分类
    #icon-icon
  • emi价格
    #icon-emijiage
  • 列表3
    #icon-liebiao3
  • 日期
    #icon-riqi
  • 价格
    #icon-jiage
  • search
    #icon-search3
  • 内存
    #icon-neicun
  • IP
    #icon-IP
  • dashboard_xen
    #icon-dashboard_xen
  • 内存
    #icon-neicun1
  • CPU
    #icon-CPU
  • 物料价格
    #icon-wuliaojiage
  • cpu
    #icon-cpu
  • 价格查询
    #icon-jiagechaxun
  • 日期
    #icon-riqi1
  • 内存条
    #icon-memory
  • 内存条
    #icon-memory1
  • 充流量_方形
    #icon-chongliuliang_fangxing
  • 端口
    #icon-port
  • 首页-防御
    #icon-Ddosfangyu
  • 云硬盘快照
    #icon-yunyingpankuaizhao
  • DDoS
    #icon-DDoS
  • 列表
    #icon-liebiao
  • 二级-虚拟机安全检查
    #icon-erji-xunijianquanjiancha
  • 084价格查询
    #icon-jiagechaxun1
  • IP高防
    #icon-IPgaofang
  • 存货价格
    #icon-navicon-chjg
  • 内存
    #icon-icon-test
  • 盾
    #icon-dun
  • 列表
    #icon-liebiao1
  • system
    #icon-system
  • 虚拟机
    #icon-xuniji
  • delete user
    #icon-deleteuser
  • user
    #icon-user
  • 操作系统
    #icon-caozuoxitong
  • windows
    #icon-windows
  • 列表
    #icon-liebiao2
  • 工单
    #icon-liebiao4
  • 日期
    #icon-riqi2
  • 列表
    #icon-liebiao5
  • 快照
    #icon-kuaizhao
  • 备份
    #icon-beifen
  • 云硬盘
    #icon-yunyingpan
  • 列表_
    #icon-liebiao_
  • 流量
    #icon-liuliang
  • HDD,机械硬盘,电脑硬盘
    #icon-huabankaobei-
  • SSD,固态硬盘,电脑硬盘
    #icon-huaban-
  • 芯片,CPU
    #icon-huaban-1
  • 硬盘
    #icon-yingpan
  • 端口配置
    #icon-ziyuanxhdpi
  • CPU
    #icon-xingzhuang
  • ts-图标_SLL
    #icon-ts-tubiao_SLL
  • ts-图标_WEB
    #icon-ts-tubiao_WEB
  • ts-图标_VM
    #icon-ts-tubiao_VM
  • ts-图标_windows
    #icon-ts-tubiao_windows
  • ts-图标_APPinst
    #icon-ts-tubiao_APPinst
  • ts-图标_client
    #icon-ts-tubiao_client
  • ts-图标_db
    #icon-ts-tubiao_db
  • ts-图标_kvm
    #icon-ts-tubiao_kvm
  • ts-图标_ips
    #icon-ts-tubiao_ips
  • ts-图标_mangementserver
    #icon-ts-tubiao_mangementserver
  • ts-图标_san-port
    #icon-ts-tubiao_san-port
  • ts-图标_linux
    #icon-ts-tubiao_linux
  • 价格
    #icon-jiage1
  • category
    #icon-zhenhuichongtubiaozhizuo-kuozhan-
  • cpu
    #icon-cpu1
  • 分类4
    #icon-fenlei
  • 分类5
    #icon-fenlei1
  • 价格表
    #icon-jiagebiao
  • 分类1
    #icon-fenlei2
  • 日期
    #icon-riqi3
  • 列表排列
    #icon-liebiaopailie
  • 分类
    #icon-fenlei3
  • ubuntu
    #icon-ubuntu
  • User
    #icon-User
  • 控制台
    #icon-kongzhitai
  • Security-Anti-DDoS
    #icon-Security-Anti-DDoS
  • category-live
    #icon-category-live
  • category-forum
    #icon-category-forum
  • category-pdf
    #icon-category-pdf
  • category-replay
    #icon-category-replay
  • category-unknown
    #icon-category-unknown
  • category-text
    #icon-category-text
  • category-test
    #icon-category-test
  • category-video
    #icon-category-video
  • DDos高防IP
    #icon-DDosgaofangIP
  • 流量
    #icon-liuliang1
  • user
    #icon-user1
  • 虚拟机服务器
    #icon-ziyuan1452
  • 日期
    #icon-riqi4
  • 流量
    #icon-liuliang2
  • 控制面板
    #icon-kongzhimianban
  • 列表
    #icon-liebiao6
  • 操作系统
    #icon-caozuoxitong1
  • 分类分级
    #icon-fenleifenji
  • 逻辑网卡端口
    #icon-luojiwangkaduankou
  • 端口
    #icon-duankou
  • 网络端口
    #icon-wangluoduankou
  • 其他操作系统
    #icon-qitacaozuoxitong
  • 操作系统
    #icon-caozuoxitong2
  • 快照
    #icon-kuaizhao1
  • 内存
    #icon-neicun2
  • ADJUST_BY_CATEGORY
    #icon-ADJUST_BY_CATEGORY
  • CATEGORY_STATISTICS
    #icon-CATEGORY_STATISTICS
  • 销售价格
    #icon-xiaoshoujiage
  • 01控制面板
    #icon-leftfont-07

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>