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)搜索所需图标,加入购物车和项目

27.png
28.jpg

(3)复制代码


29.jpg

(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">&#xe670;</span>
</body>

</html>

如果出现乱码问题,参考这篇文章:https://blog.csdn.net/weixin_45319402/article/details/117259336

上一篇 下一篇

猜你喜欢

热点阅读