• 流量
    
  • 流量
    
  • horse-solid
    
  • 账号
    
  • 密码找回
    
  • 登录框
    
  • 高并发
    
  • JS
    
  • 认证绕过
    
  • 权限伪造
    
  • 短信
    
  • 验证码
    
  • 验证码
    
  • XPath
    
  • 支付
    
  • 权限
    
  • 24gl-swapHorizontal3
    
  • 24gl-swapVertical3
    
  • DOS攻击
    
  • origin
    
  • JSON
    
  • 跨站请求伪造
    
  • 来源
    
  • XML
    
  • java
    
  • 登录
    
  • 1.逻辑漏洞检测
    
  • 服务请求
    
  • 命令执行
    
  • 文件
    
  • 密码
    
  • csdn
    
  • thymeleaf
    
  • 跨站脚本攻击
    
  • SQL注入攻击
    
  • 文件
    
  • dom
    
  • icon_username
    
  • S
    
  • L
    
  • J
    
  • F
    
  • R
    
  • X
    
  • 文件-删除
    
  • 读取
    
  • cors
    
  • 文件-下载
    
  • 文件-上传
    
  • 压缩包
    
  • mybatis
    
  • 特色服务
    
  • 验证 验证码
    
  • 其他
    
  • 敏感信息
    
  • code
    
  • wechat-fill
    
  • 组件
    
  • jdbc
    
  • 测试流程
    
  • bug
    
  • 
    redirect
    
  • 执行
    
  • 反序列化Json
    
  • Hive表
    
  • 列表-目录
    
  • 安全
    
  • github
    
  • 黑客
    
  • js
    
  • spring
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1740320716474') format('woff2');
}

第二步:定义使用 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-liuliang1
  • 流量
    .icon-liuliang
  • horse-solid
    .icon-horse-solid
  • 账号
    .icon-zhanghao
  • 密码找回
    .icon-mimazhaohui
  • 登录框
    .icon-denglukuang
  • 高并发
    .icon-gaobingfa
  • JS
    .icon-JS
  • 认证绕过
    .icon-renzhengraoguo
  • 权限伪造
    .icon-quanxianweizao
  • 短信
    .icon-duanxin
  • 验证码
    .icon-yanzhengma
  • 验证码
    .icon-yanzhengma1
  • XPath
    .icon-XPath
  • 支付
    .icon-zhifu
  • 权限
    .icon-quanxian
  • 24gl-swapHorizontal3
    .icon-24gl-swapHorizontal3
  • 24gl-swapVertical3
    .icon-24gl-swapVertical3
  • DOS攻击
    .icon-DOSgongji
  • origin
    .icon-origin
  • JSON
    .icon-JSON
  • 跨站请求伪造
    .icon-kuazhanqingqiuweizao
  • 来源
    .icon-laiyuan
  • XML
    .icon-XML
  • java
    .icon-java
  • 登录
    .icon-denglu
  • 1.逻辑漏洞检测
    .icon-luojiloudongjiance
  • 服务请求
    .icon-fuwuqingqiu
  • 命令执行
    .icon-minglingzhihang
  • 文件
    .icon-wenjian1
  • 密码
    .icon-mima1
  • csdn
    .icon-csdn48
  • thymeleaf
    .icon-thymeleaf
  • 跨站脚本攻击
    .icon-kuazhanjiaobengongji
  • SQL注入攻击
    .icon-SQLzhurugongji
  • 文件
    .icon-wenjian
  • dom
    .icon-dom
  • icon_username
    .icon-icon_username
  • S
    .icon-S
  • L
    .icon-L
  • J
    .icon-J
  • F
    .icon-F
  • R
    .icon-R
  • X
    .icon-X
  • 文件-删除
    .icon-wenjian-shanchu
  • 读取
    .icon-duqu
  • cors
    .icon-cors
  • 文件-下载
    .icon-wenjian-xiazai
  • 文件-上传
    .icon-wenjian-shangchuan
  • 压缩包
    .icon-yasuobao
  • mybatis
    .icon-icons8-mybatis
  • 特色服务
    .icon-tesefuwu
  • 验证 验证码
    .icon-yanzhengyanzhengma
  • 其他
    .icon-qita
  • 敏感信息
    .icon-minganxinxi
  • code
    .icon-code
  • wechat-fill
    .icon-wechat-fill
  • 组件
    .icon-zujian
  • jdbc
    .icon-jdbc
  • 测试流程
    .icon-ceshiliucheng
  • bug
    .icon-bug
  • redirect
    .icon-redirect
  • 执行
    .icon-zhihang
  • 反序列化Json
    .icon-fanxuliehuaJson
  • Hive表
    .icon-Hivebiao
  • 列表-目录
    .icon-catalog
  • 安全
    .icon-anquan
  • github
    .icon-github
  • 黑客
    .icon-anonymity-101
  • js
    .icon-js
  • spring
    .icon-spring

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-liuliang1
  • 流量
    #icon-liuliang
  • horse-solid
    #icon-horse-solid
  • 账号
    #icon-zhanghao
  • 密码找回
    #icon-mimazhaohui
  • 登录框
    #icon-denglukuang
  • 高并发
    #icon-gaobingfa
  • JS
    #icon-JS
  • 认证绕过
    #icon-renzhengraoguo
  • 权限伪造
    #icon-quanxianweizao
  • 短信
    #icon-duanxin
  • 验证码
    #icon-yanzhengma
  • 验证码
    #icon-yanzhengma1
  • XPath
    #icon-XPath
  • 支付
    #icon-zhifu
  • 权限
    #icon-quanxian
  • 24gl-swapHorizontal3
    #icon-24gl-swapHorizontal3
  • 24gl-swapVertical3
    #icon-24gl-swapVertical3
  • DOS攻击
    #icon-DOSgongji
  • origin
    #icon-origin
  • JSON
    #icon-JSON
  • 跨站请求伪造
    #icon-kuazhanqingqiuweizao
  • 来源
    #icon-laiyuan
  • XML
    #icon-XML
  • java
    #icon-java
  • 登录
    #icon-denglu
  • 1.逻辑漏洞检测
    #icon-luojiloudongjiance
  • 服务请求
    #icon-fuwuqingqiu
  • 命令执行
    #icon-minglingzhihang
  • 文件
    #icon-wenjian1
  • 密码
    #icon-mima1
  • csdn
    #icon-csdn48
  • thymeleaf
    #icon-thymeleaf
  • 跨站脚本攻击
    #icon-kuazhanjiaobengongji
  • SQL注入攻击
    #icon-SQLzhurugongji
  • 文件
    #icon-wenjian
  • dom
    #icon-dom
  • icon_username
    #icon-icon_username
  • S
    #icon-S
  • L
    #icon-L
  • J
    #icon-J
  • F
    #icon-F
  • R
    #icon-R
  • X
    #icon-X
  • 文件-删除
    #icon-wenjian-shanchu
  • 读取
    #icon-duqu
  • cors
    #icon-cors
  • 文件-下载
    #icon-wenjian-xiazai
  • 文件-上传
    #icon-wenjian-shangchuan
  • 压缩包
    #icon-yasuobao
  • mybatis
    #icon-icons8-mybatis
  • 特色服务
    #icon-tesefuwu
  • 验证 验证码
    #icon-yanzhengyanzhengma
  • 其他
    #icon-qita
  • 敏感信息
    #icon-minganxinxi
  • code
    #icon-code
  • wechat-fill
    #icon-wechat-fill
  • 组件
    #icon-zujian
  • jdbc
    #icon-jdbc
  • 测试流程
    #icon-ceshiliucheng
  • bug
    #icon-bug
  • redirect
    #icon-redirect
  • 执行
    #icon-zhihang
  • 反序列化Json
    #icon-fanxuliehuaJson
  • Hive表
    #icon-Hivebiao
  • 列表-目录
    #icon-catalog
  • 安全
    #icon-anquan
  • github
    #icon-github
  • 黑客
    #icon-anonymity-101
  • js
    #icon-js
  • spring
    #icon-spring

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>