阿里巴巴矢量图标库的使用细节

之前都在用iconmoon，今天在更换一个按键图标时用了阿里巴巴矢量图标库，因此记录一下不同和细节

 

准备工作

1. 登录
2. 选择图标库
3. 在创作者的icon中选择

    （如需要可以加入自己仓库/收藏/下载）

4. 在顶部菜单栏找到：帮助/代码应用/web端使用（认真阅读）重要哦！！

 

 使用方式

iconfont的web端使用指南提供了四种方式

• icon 单个使用（下载图标使用）
• unicode引用（下个段落对比与iconmoon的异同点）
• font-class引用（后两种自行阅读）
• symbol引用

 

使用异同（unicode引用）

1. 阿里需要先加入项目（在仓库添加），添加到项目后可以：修改/下载/复制代码等操作
2. 下载好图标库后，将项目压缩包里的font文件夹复制到html文件的根目录：两种图标库的文件夹名称不同，不予理会
3. 字体声明：拷贝项目生成的font-face：下载图标压缩包中的ccs文件，这里字体声明的url里需要在开头加上font文件夹路径（因为默认没加路径），比如：

   src: url('font_8viwxqtb7v5/iconfont.ttf?t=1665134932112') format('truetype');）

4. 定义使用iconfont的样式：同样在css文件中有
5. 在自己下载的项目里挑选相应的图标并获取字体编码（也可用浏览器打开在压缩包中的html文件获取），代码如下

       <i class="iconfont">&#x33;</i>

   tip：可直接导入css文件模块化比较方便（注意文件夹路径）

 

疑问

1. 在csdn看到有使用url为'http://~~'的用法，自己却没成功，不知到底能不能获取图标

 

总结

细心细心再细心！！！(oﾟvﾟ)ノ