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

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

步骤一:进入Iconfont官网:

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

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

步骤二:点击顶部图标库,选择图标库并选择

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

步骤三:选择其中一个图标,并加入购物车web项目如何使用Iconfont阿里图标库

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

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

方式一:通过下载本地文件方式(生产上推荐,开发测试上不推荐,不够灵活)

步骤五:将项目下载至本地
web项目如何使用Iconfont阿里图标库下载完成后打开文件,如图所示
web项目如何使用Iconfont阿里图标库注意iconfont.css文件,我们就是通过这个文件把图标引到页面中

步骤六:把iconfont.css复制到项目中去,并在页面中引入该cssweb项目如何使用Iconfont阿里图标库

方式二:通过引用在线链接的方式(开发测试上推荐)

步骤五:点击查看在线链接,复制该链接
web项目如何使用Iconfont阿里图标库
步骤六:在项目中引入该链接:
web项目如何使用Iconfont阿里图标库
可以对图标修改样式,如颜色,大小等