0%

前端项目中使用iconfont图标(使用阿里巴巴图标库)

阿里巴巴的字体图标库现在已经很完善了,体验了一把,记录下过程。

首先在阿里巴巴图标库网站上注册账号,阿里巴巴图标库地址:https://www.iconfont.cn/collections/index

然后新建一个我的项目,点击上传图标,上传你本地的svg图标即可。

alt

需要注意新建项目的时候需要更改图标的前缀,不要和平台默认的图标前缀一样,这个就是你上传图标后自动生成的前缀

alt

之后阿里巴巴有三种可以引入项目的方式,我本次使用的是font-class引用的方式,相对来说引用方式比较简单,兼容性相对较好。

首先复制项目中生成的代码,然后把代码引入到项目中去
alt

alt

使用的时候直接挑选好你需要的图标,在代码中引用即可

1
<i class="fs_a fs_a_icon_1"></i>