阿里矢量图标库-iconfont使用教程

Hmisaka

已于 2024-10-30 01:13:27 修改

阅读量4.3k

点赞数 10

分类专栏： CSS 文章标签： css3 html 前端 css javascript

于 2024-10-30 01:12:29 首次发布

本文链接：https://blog.csdn.net/qq_52626006/article/details/143349314

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本篇文章介绍如何在项目使用阿里巴巴矢量图标库。
官网：https://www.iconfont.cn

1、资源打包

搜索想要的图标并图标将其添加入库。
在这里插入图片描述
资源管理下【我的项目】，创建项目，将入库的图标添加至项目组中。

完成将图标库下载到本地。

下载完放入项目文件中

2、项目使用

有三种引入方式Unicode 引用，CSS引用和JS引用。

Unicode引用

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

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

font-class 引用

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

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

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

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

Symbol 引用

第一步：引入项目下面生成的 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>