web项目如何使用Iconfont阿里图标库
web项目如何使用Iconfont阿里图标库
步骤一:进入Iconfont官网:
Iconfont阿里图标库官网:https://www.iconfont.cn/
步骤二:点击顶部图标库,选择图标库并选择
步骤三:选择其中一个图标,并加入购物车
步骤四:点击顶部的购物车,展开购物车后,点击“添加至项目”
此时要登录,有GitHub的选择GitHub登录登陆后,创建一个项目,把图标添加到项目中来,如创建项目demo
接着会跳转到你的项目页面来,
这里选择“Font class”,通过在页面中以class类名把图标引进来。
如图所示:我们看到图标时会发现,图标下有两个英文,上面是图标名称,下面是图标的class类名
方式一:通过下载本地文件方式(生产上推荐,开发测试上不推荐,不够灵活)
步骤五:将项目下载至本地下载完成后打开文件,如图所示
注意iconfont.css文件,我们就是通过这个文件把图标引到页面中
步骤六:把iconfont.css复制到项目中去,并在页面中引入该css
方式二:通过引用在线链接的方式(开发测试上推荐)
步骤五:点击查看在线链接,复制该链接
步骤六:在项目中引入该链接:
可以对图标修改样式,如颜色,大小等