16、iconfont怎么使用?
2022-06-03 本文已影响0人
小黄不头秃
一、 什么是iconfont?
官方解释:
阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。
官方教程1:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d0091c141&helptype=code
官方教程2:https://at.alicdn.com/t/project/3440896/0835bfb6-1fb6-498a-a4c4-968437c41f83.html?spm=a313x.7781069.1998910419.108
二、怎么使用
(1)官网登录icon font
官方网址:https://www.iconfont.cn/manage/index
(2)搜索所需图标,加入购物车和项目


(3)复制代码

(4)使用至代码中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标字体</title>
<style>
@font-face {
font-family: 'iconfont'; /* Project id 3440896 */
src: url('//at.alicdn.com/t/font_3440896_e5punhxdg9n.eot?t=1653981956615'); /* IE9 */
src: url('//at.alicdn.com/t/font_3440896_e5punhxdg9n.eot?t=1653981956615#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALwAAsAAAAABrQAAAKkAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBLIEvATYCJAMICwYABCAFhGcHMxvuBcgekiSDXG5wHFCuAIM5BE/ffr87u7NPZr8KyT1pKKKpkU0SoXiJhE7IHBKVRGZeuzeFnEqYiLv7OSGXyiOxe9jAra/D1K0jhhHioff27+2CROLSgAMM4yiBhS1JJLXA8vEv5VtAB/zi5zxorORozK5BiyZ+sHpBeqCd22oFKXjTeJGroF7T6QKUyc8gwMwrY73UtbQD94MiKghmyxkX5O1yCBwFHI2UUjQyImH3JnlAB3dZf8Jj/Hn5zeEIJxRO195eawEPr7q7wGb+v+I/dbkBPOZAAB5MAyhk7a/usCFtvA1zbQ2iVwl+9P//0EEObSP6X+e0FgAMQHwmyZcfVegAKKbDGsD2pDcFPzRtp/acLc47KzT/zr0rs3ZDVr9dl/J92u7bV+OyX8fhZSzeuyi1o0a7zcL+aanPo/D97qniMhx+HZ5omzNauZ7t8x5xHdHh3N1y7rxzHM/EoY/fd9vq2MqNaJ9E2w7b4VxxYNq+OAzHVeUlXFIJqJB5/1p//8rf8Gw8PA15lPxlMQF8XZvXsaU4H9m5XMGPUzeSqGYOXLZJRtNZY3MvPcbAPyeseZlq1G+wKTL12/RT/RxeZpBSbhJBtIhEZh1mSu3hqE5nQ7IHo5YERMU5nJIPeBWPlHLPCFrekKj4hTkJt/Oi0WCqMaIIskB6AgqMprKeTuKsrYgbkSncVOpE2BRQgJlpGdVGPVIRnmODOcplEcJCFmsKrNMeQ7KsQR1rImJIGk+IXpSezra9JI3RFFANQygEYgHRJkAChkbFhmRS/r5WCGeEjIJJqrOKmQRkhzKlySCoekWlRh7kEtMoThaCYEEsLOoKqM6YhchkGkhvnyVCGEQafkJZVyTdJbGskra9pvzaCcA4pgt3S5HvgoxSNR2pAAA=') format('woff2'),
url('//at.alicdn.com/t/font_3440896_e5punhxdg9n.woff?t=1653981956615') format('woff'),
url('//at.alicdn.com/t/font_3440896_e5punhxdg9n.ttf?t=1653981956615') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
如果出现乱码问题,参考这篇文章:https://blog.csdn.net/weixin_45319402/article/details/117259336