web项目如何使用Iconfont阿里图标库

web项目如何使用Iconfont阿里图标库

步骤一：进入Iconfont官网：

Iconfont阿里图标库官网：https://www.iconfont.cn/

步骤二：点击顶部图标库，选择图标库并选择

步骤三：选择其中一个图标，并加入购物车

步骤四：点击顶部的购物车，展开购物车后，点击“添加至项目”

此时要登录，有GitHub的选择GitHub登录
登陆后，创建一个项目，把图标添加到项目中来，如创建项目demo
接着会跳转到你的项目页面来，
这里选择“Font class”，通过在页面中以class类名把图标引进来。
如图所示：我们看到图标时会发现，图标下有两个英文，上面是图标名称，下面是图标的class类名

方式一：通过下载本地文件方式（生产上推荐，开发测试上不推荐，不够灵活）

步骤五：将项目下载至本地
下载完成后打开文件，如图所示
注意iconfont.css文件，我们就是通过这个文件把图标引到页面中

步骤六：把iconfont.css复制到项目中去，并在页面中引入该css

方式二：通过引用在线链接的方式（开发测试上推荐）

步骤五：点击查看在线链接，复制该链接

步骤六：在项目中引入该链接：

可以对图标修改样式，如颜色，大小等