iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）

前言

相信大家在前端开发过程中，需要使用各种奇奇怪怪的小图，可是我们不能总是截别人的图copy吧，我们要做一个优雅的程序员，所以我们可以插入矢量图。

我从各种渠道(b站、csdn)学习到了3种常用的方法,可以插入矢量图。

开始前的准备

你需要登录iconfont-阿里巴巴矢量图标库

首先你必须申请注册一个账号，目前你可以使用Git-hub账号、或者微博账号、或者手机号来注册，阿里矢量图需要登录才能进行操作。

开始

1、我们来到iconfont网站首页，搜索一个我们想要的矢量图，如："小狗"或"dog"(这里即可以输入中文也可以输入英文查找，这里称赞一下阿里，非常人性化，毕竟有些图标用英文更好查找)；

2、我们这里输入关键词“狗”，出来一大堆矢量图，我们选中第三个，然后点击蓝色圈里的“红色购物车图标”的按钮；

3、接2步骤，点击“红色购物车图标”后，如图该图标会变成一个满满的红色购物车状态的按钮，紧接着我们再点击网页导航栏右上角的白色购物车按钮，如红色箭头所示；

4、如下图，页面变成如下的样式，(注：这里哥们提醒你们，最好将一个项目所需要的所有矢量图标，一次性全部选进“红色购物车”里，后面会省很多事情)，这里假设我们要开发一个十二生肖的某网页，我们选了十二生肖的图标，全部选进购物车后，如图所示，我们再点击右下角的“添加至项目”按钮。

5、然后界面会变成如下图的样子，(这里请忽略我已经创建过的名称为"myicon"的项目)，哥们假设我第一次来这个页面；

6、来，我们点击右下角红色方框内标记的按钮。

7、点击过之后，我们重新创建一个名为“shengxiao”的项目，之所以用英文字母命名，是因为一个优雅的程序员习惯用英文字母，(傲娇)。

8、点击“确定”按钮之后，我们来到如下图界面，从这里开始我们就有三种方法插入矢量图了，

分别是unicode 引用、font-class 引用、symbol 引用。

9、不管哪种方法，都不影响我们下载至电脑，我们点击“下载至本地”按钮，是一个压缩包，下载完之后，需要先解压成正常的文件夹。(别急着关掉这个页面，我们让网页最小化，一会儿再用)。

10、解压后的文件夹打开应该是具有这些文件的，如图所示。

方案一、 unicode 引用。

1、首先我们进入VScode或者你自己的其他编译器，创建一个"shengxiao01"的html文件，这里题目自定，无所谓，为了方便区分，这里title标签写上"<title>引用unicode</title>"。

2、接着我们引入刚才解压的文件夹，(记住是文件夹，直接拉到“shengxiao01”文件夹下，即你要开发项目的文件夹下，引入的文件夹，自带的名字都挺长的，这里我们为了方便区别，给这个文件夹重命名为“font”)。

3、我们写一个link,如图，引入的文件为font文件夹中的iconfont.css文件。(注意：这个font文件是咱们前面步骤9、10下载的那个压缩文件解压后的，只不过换了个名字，别晕了)

4、我们再回到阿里矢量图刚才操作到的界面，(你不会关掉阿里矢量图页面了吧？如果关掉了，你再重新开一下，在“我的项目”里找到你已经收入购物车的图标)，保证此时选中的是Unicode按钮，选中显示为橙红色的状态。

5、复制如图这个牧羊座矢量图标的unicode代码，你把鼠标光标放到矢量图上就会出现，如图操作。

6、带着这个复制的unicode代码，我们回到vscode操作界面，如图提示操作。

7、运行后的成功图。

8、哥们的额外发现，i 、span、p标签都可以包这个unicode编码代码。

如图运行后

方案二、 Fontclass 引用。

(注意：这里方法改动不大，唯一的区别是类名、编码的不同，操作是一样的。)

为了方便大家不混乱，我们重新建一个文件叫做shengxiao02,写font class引用方法。

1、仿照方案一的步骤。

2、操作过步骤1再回到阿里矢量图界面，我们按照如下操作。

3、复制结束，该粘贴了吧，但是注意这次不是粘贴进标签中间了。

4、我们来看看效果：

方案三、 Font class 引用。

第三种方法链接的是JS文件，

1、打开你之前从阿里巴巴矢量图官网下载的文件，我们点击在之前下载的那个文件夹，没错重命名过的“font”文件夹，点击蓝色框选中的文件。

2、来到如下界面：如图提示操作

3、翻到下面，如图操作。

4、接着我们回到vscode，如图操作。

5、然后选择Symbol代码，对应的图标代码。

6、复制粘贴这个symbol代码过后，如图：

7、运行如图效果：

恭喜你，你已经学会了三种向html文件中引入矢量图的方法。给自己买个鸡腿吧

#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）相关推荐

#今日说码栏目#第十六集
1.JS的使用方式 ①内嵌式可以将js代码书写在页面的额任意位置 head body ②外链式以独立的js文件进行代码的编写 ③行内式将js代码直接书写在标签内部 2.JS的输入和 ...
redis源码剖析（十五）——客户端思维导图整理
redis源码剖析(十五)--客户端执行逻辑结构整理加载略慢
陈艾盐：春燕百集访谈节目第二十五集
<春燕姐姐>访谈节目共120集,每月分10集播出,记录了上百位企业家对"慈善"的各种不同见解,通过讲述社会真善美的故事,让更多的人了解慈善.发扬慈善精神,构建更加美好, ...
美学心得（第二百三十五集）罗国正
美学心得(第二百三十五集) 罗国正 (2022年3月) 3015.我比较喜欢"破茧化蝶"这个成语,它充满象征意义和美感.其实,人的成长过程,人类的发展就象不断的"破茧化蝶 ...
美学心得（第二百四十五集）罗国正
美学心得(第二百四十五集) 罗国正 (2023年2月) 3039.清朝文学家张惠言,是江苏武进人,三十八岁中进士,官至翰林院编修,工词文,他的美学成就居于常州词派的创始地位,他一生得志的时间很短,享年 ...
我的团长我的团第二十五集
我的团长我的团第二十五集豆饼首先发现了异常. 脚下的土地居然有庄稼苗,而周围别的地块全都没有. 果然,走不多远,就发现树林里藏着几个农人.一家老小. 老乡了解了他们的身份后,带路送他们来到一条没有鬼 ...
JAVASE基础模块三十五（线程线程创建的第一种方法以及线程的一些方法）
JAVASE基础模块三十五( 线程线程创建的第一种方法以及线程的一些方法) 线程首先要清楚的是线程依赖于进程进程是正在运行的应用程序一个正在运行的应用程序是个进程这个应用程序又要执 ...
保姆级教学——集群环境搭建及创建集群
保姆级教学--集群环境搭建及创建集群新建虚拟机一些默认,加载镜像开启虚拟机,在安装位置选择自己目录,然后建立分区,首先添加挂载点,类型标准分区,文件系统ext4 加载分区,期望给2G, 类型标准 ...
#今日说码栏目# 第九集
1.伪类选择器 (伪类:指的是一个不存在的类,特殊的类,例如:伪类可能是第一个元素.被点击的元素,.鼠标移入的元素等等) 1.(以所有元素作为分母,是在所有的元素(包括同类型和不同类型的元素)自身作为 ...
#今日说码栏目# 第二十三集动画，旅行的热气球
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）