关于阿里巴巴矢量图的用法

首先当然是找到他们的官网

https://www.iconfont.cn/
鼠标放上去搜索你想要搜索的矢量图,比如 购物车
在这里插入图片描述
得到你想要的矢量图,
在这里插入图片描述
加入购物车
如果你没有登录的话,会叫你登录,登录的话很简单了,用微博,或者githup账号登录了
在这里插入图片描述
如果你没有创建一个项目的话,会叫你创建一个项目,相当于就是 给你好整理,放在一个文件夹在这里插入图片描述
跳转到此界面
在这里插入图片描述
下载至本地,目录自选,得到一个zip文件,解压,在这里插入图片描述
解压后的内容
打开demo_index.html上面会有一些指引,有三种方式可以引入,我这里采用的第二种,根据自己的路劲引入iconfont.css文件
在这里插入图片描述
引入css文件后
复制上面的class名
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="images/icon/hack/font_1637043_xlqodtnctv/iconfont.css">
    <!-- 上面路劲根据自己下载本地方式更改 我这里给的列子 -->
</head>
<body>
    <!-- 第一个iconfont 不动 第二个 才是刚才复制的class名 放入 就能在网页上看见了 -->
    <span class="iconfont icon-gouwucheman"></span>
</body>
</html>

在这里插入图片描述
当然,你看其他文件不舒服的话,那些文件都可以删,保留iconfont.css文件就可以了
如果实在不懂,加我QQ 1423228256

发布了15 篇原创文章 · 获赞 1 · 访问量 1149

猜你喜欢

转载自blog.csdn.net/qq_45004361/article/details/104288706
今日推荐