阿里巴巴矢量图标库(iconfont)使用教程

  进入iconfont网站(https://www.iconfont.cn/),登录账号,点击“资源管理-我的项目”,新建一个项目,项目名称可随便填写。
 
  回到iconfont网站首页,在搜索框中输入图标名称,中英文均可(如:编辑/edit、删除/delete),鼠标移到图标上方,点击添加入库,然后将库中图标添加至项目即可。
 
  点击“资源管理-我的项目”,点击下载至本地,相关的文件会全部打包下载,可以离线使用。
 
  将下载的.zip文件解压,可以打开demo_index.html查看演示效果,项目只需引入其中的iconfont.css(Font class)或iconfont.js(Symbol)即可使用图标。
 
  说明:Font class不支持多色图标,Symbol支持多色图标,但Symbol的缺点是兼容性较差(只支持IE9+及现代浏览器),且性能一般(还不如png),可根据需求选择。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iconfont</title>

    <!-- 若只使用Font class方式显示图标,只需引入iconfont.css即可,无需引入iconfont.js -->
    <!-- 重要提醒:必须设置rel属性,否则无法显示图标。 -->
    <link rel="stylesheet" href="./iconfont.css">

    <!-- 若只使用Symbol方式显示图标,只需引入iconfont.js即可,无需引入iconfont.css -->
    <script src="./iconfont.js"></script>
    <style>.icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}</style>

</head>
<body>

<!-- 使用Font class方式显示图标 -->
<span class="iconfont icon-edit"></span>

<!-- 使用Symbol方式显示图标 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-edit-twotone"></use>
</svg>

</body>
</html>

Copyright © 2025 码农人生. All Rights Reserved