阿里字体图标使用方法：阿里图标iconfont的多种使用方式
阿里字体图标使用方法：阿里图标iconfont的多种使用方式.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }第四步：挑选相应图标并获取字体编码，应用于页面@font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff2?t=1622443244586') format('woff2') url('//at.alicdn.com/t/font_2
序言：并不是每个程序员都会PS，但会PS的程序员无疑是nb的，自从有了阿里图标库之后，我再也不用找UI设计图标了，这感觉简直爽到爆，赶紧点赞收藏吧。
阿里图标官网网址：https://www.iconfont.cn/
使用方法：
第一种：在搜索框中输入关键字，选择合适的图标，然后自定义颜色、尺寸，点击下载就可以了，是不是很方便。
在我的项目中找到对应的项目，然后可以下载至本地，或者如果引用线上链接会更方便
第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：
<link rel="preload" href="//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff2" as="font" type="font/woff2" crossorigin="anonymous">
第二步：拷贝项目下面生成的@font-face
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff2?t=1622443244586') format('woff2')
url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff?t=1622443244586') format('woff')
url('//at.alicdn.com/t/font_2210326_uryikoh8w0e.ttf?t=1622443244586') 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">3</span>Font class 引用
第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：
<link rel="preload" href="//at.alicdn.com/t/font_2210326_uryikoh8w0e.woff2" as="font" type="font/woff2" crossorigin="anonymous">
第二步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="//at.alicdn.com/t/font_2210326_uryikoh8w0e.css">
第三步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>symbol 引用
第一步：引入项目下面生成的 symbol 代码：
<script src="//at.alicdn.com/t/font_2210326_uryikoh8w0e.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>
以上就是页面中引用iconfont图标的几种方法，感兴趣的朋友可以动手尝试一下。
我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。
往期文章分享：
微信小程序授权获取手机号，跟着我来学习下是如何实现的吧
小程序wx.chooseImage上传图片，支持相册选择图片或使用相机拍照
