阿里巴巴iconfont字体图标使用，利用iconfont字体实现小图标的插入

阿里巴巴iconfont字体图标使用，利用iconfont字体实现小图标的插入

1.找到阿里巴巴矢量图标库官网

https://www.iconfont.cn

2.然后注册登录或者用github登录也行,此步骤跳过。

注册一个git账号

注意：下面要 操作 5步验证

然后点击

这时，会接收到一份qq邮件

进行qq邮箱验证。

然后，会接收一份qq邮件，提示你创建成功。

这时，我们可以使用github了。

我们此刻，再次打开 

https://www.iconfont.cn/

选择使用github账号登录

登录后，弹出

现在开始使用iconfont。

找到，资源管理--我的项目

新建项目,用于保存自己常用的图标

接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件。

下载到本地，会有一个demo_index.html文件，教你怎么使用iconfont字体

重点强调一次：把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

注意：调节字体图标的大小是通过元素的font-size属性来控制的。

搜索我们需要的图标，将其加入购物车。将我们需要的图标全部挑选完毕以后，点击购物车图标。