查看项目
  • 地址
    
  • 时间
    
  • 邮箱
    
  • 查看
    
  • 右
    
  • 图表 上升趋势
    
  • 趋势
    
  • 职称
    
  • 日历
    
  • 热点
    
  • 电话
    
  • 申请
    
  • 24gl-building2
    
  • 24gl-newspapers
    
  • empty
    
  • 成员
    
  • 提交
    
  • 人员
    
  • 电话
    
  • 日期
    
  • 主页
    
  • 热点
    
  • 职称
    
  • 成员多选
    
  • icon_arrow_left
    
  • 网址
    
  • 通知
    
  • 职称
    
  • 搜索
    
  • 引用-line
    
  • 引用
    
  • 引用
    
  • 更多
    

Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

@font-face {
  font-family: 'iconfont';
  src: 
       url('data:font/ttf;charset=utf-8;base64,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OiMB4CM7Iv2gEhtERBsSAeATGhoTiAcGeQYHRUWGBgcHBnkGB0VFhgYHAAAABAAA/9QDtwMsABUAKwA5AD4AAAEyNjU0JisBNDc2NycOARUUFxYXHgEjMjY1NCYrATQ3NjcnDgEVFBcWFx4BASEiBhURNyEyNjURNCYDIQcRIQJ2IS4pHRYJESwRPUcJCBIHHschLSgdFgkQLRI8RwkIEgYfAgP86xQXxAJ8FBgYQP2STwK9ATwuIR4tGhcqFh8bXjofGBQVCwwuIR4tGhcqFh8bXjofGBQVCwwB7xcU/NWaFxQCZhMY/Zs9AksAAwAAAAADgAHWAAgAEQAaAAABIgYUFjI2NCYhIgYUFjI2NCYhIgYUFjI2NCYCACMyMkYyMgEIJDIyRzIy/YcjMjJHMjIB1TJGMjJGMjJGMjJGMjJGMjJGMgAAAAAAABIA3gABAAAAAAAAABMAAAABAAAAAAABAAgAEwABAAAAAAACAAcAGwABAAAAAAADAAgAIgABAAAAAAAEAAgAKgABAAAAAAAFAAsAMgABAAAAAAAGAAgAPQABAAAAAAAKACsARQABAAAAAAALABMAcAADAAEECQAAACYAgwADAAEECQABABAAqQADAAEECQACAA4AuQADAAEECQADABAAxwADAAEECQAEABAA1wADAAEECQAFABYA5wADAAEECQAGABAA/QADAAEECQAKAFYBDQADAAEECQALACYBY0NyZWF0ZWQgYnkgaWNvbmZvbnRpY29uZm9udFJlZ3VsYXJpY29uZm9udGljb25mb250VmVyc2lvbiAxLjBpY29uZm9udEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFIAZQBnAHUAbABhAHIAaQBjAG8AbgBmAG8AbgB0AGkAYwBvAG4AZgBvAG4AdABWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbgBmAG8AbgB0AEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMABWRpemhpB3NoaWppYW4IeW91eGlhbmcGY2hha2FuA3lvdQZxdXNoaTIFcXVzaGkIemhpY2hlbmcEcmlsaQZyZWRpYW4HZGlhbmh1YQhzaGVucWluZwhidWlsZGluZwpuZXdzcGFwZXJzBWVtcHR5CWNoZW5neXVhbgZ0aWppYW8HcmVueXVhbghkaWFuaHVhMQRyaXFpBXpodXllA2h1bwl6aGljaGVuZzEGcmV5dWFuA3p1bwd3YW5nemhpB3Rvbmd6aGkJemhpY2hlbmcyBnNvdXN1bwh5aW55b25nMgd5aW55b25nCHlpbnlvbmcxB2dlbmdkdW8AAAAAAA==') 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"。

  • 地址
    .iconfont-dizhi
  • 时间
    .iconfont-shijian
  • 邮箱
    .iconfont-youxiang
  • 查看
    .iconfont-chakan
  • 右
    .iconfont-you
  • 图表 上升趋势
    .iconfont-qushi2
  • 趋势
    .iconfont-qushi
  • 职称
    .iconfont-zhicheng
  • 日历
    .iconfont-rili
  • 热点
    .iconfont-redian
  • 电话
    .iconfont-dianhua
  • 申请
    .iconfont-shenqing
  • 24gl-building2
    .iconfont-building
  • 24gl-newspapers
    .iconfont-newspapers
  • empty
    .iconfont-empty
  • 成员
    .iconfont-chengyuan
  • 提交
    .iconfont-tijiao
  • 人员
    .iconfont-renyuan
  • 电话
    .iconfont-dianhua1
  • 日期
    .iconfont-riqi
  • 主页
    .iconfont-zhuye
  • 热点
    .iconfont-huo
  • 职称
    .iconfont-zhicheng1
  • 成员多选
    .iconfont-reyuan
  • icon_arrow_left
    .iconfont-zuo
  • 网址
    .iconfont-wangzhi
  • 通知
    .iconfont-tongzhi
  • 职称
    .iconfont-zhicheng2
  • 搜索
    .iconfont-sousuo
  • 引用-line
    .iconfont-yinyong2
  • 引用
    .iconfont-yinyong
  • 引用
    .iconfont-yinyong1
  • 更多
    .iconfont-gengduo

font-class 引用

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

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

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

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

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

<span class="iconfont iconfont-xxx"></span>

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

  • 地址
    #iconfont-dizhi
  • 时间
    #iconfont-shijian
  • 邮箱
    #iconfont-youxiang
  • 查看
    #iconfont-chakan
  • 右
    #iconfont-you
  • 图表 上升趋势
    #iconfont-qushi2
  • 趋势
    #iconfont-qushi
  • 职称
    #iconfont-zhicheng
  • 日历
    #iconfont-rili
  • 热点
    #iconfont-redian
  • 电话
    #iconfont-dianhua
  • 申请
    #iconfont-shenqing
  • 24gl-building2
    #iconfont-building
  • 24gl-newspapers
    #iconfont-newspapers
  • empty
    #iconfont-empty
  • 成员
    #iconfont-chengyuan
  • 提交
    #iconfont-tijiao
  • 人员
    #iconfont-renyuan
  • 电话
    #iconfont-dianhua1
  • 日期
    #iconfont-riqi
  • 主页
    #iconfont-zhuye
  • 热点
    #iconfont-huo
  • 职称
    #iconfont-zhicheng1
  • 成员多选
    #iconfont-reyuan
  • icon_arrow_left
    #iconfont-zuo
  • 网址
    #iconfont-wangzhi
  • 通知
    #iconfont-tongzhi
  • 职称
    #iconfont-zhicheng2
  • 搜索
    #iconfont-sousuo
  • 引用-line
    #iconfont-yinyong2
  • 引用
    #iconfont-yinyong
  • 引用
    #iconfont-yinyong1
  • 更多
    #iconfont-gengduo

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>