阿里巴巴字体图标iconfont使用

我会带着你远行 2023-06-27 05:31 17阅读 0赞

以前很早用过，中间很久没用了，最近项目需要，扒拉一下记忆，关于字体图标的好处就不赘述了，[阿里巴巴矢量图标库入口][Link 1]，他官网上的三种用法：  
![在这里插入图片描述][20200103152647949.png]  
也不多说了，网上大把的说明，就说我用的安逸的地方：  
1，可以使用图片  
找到需要的图标加入购物车，点开购物车，有个下载素材，点击有几个选项，大小，颜色，文件格式，选好就可以下载成img：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
2，使用活的链接  
选好图标放进购物车，第1步那个按钮上面有一个‘添加至项目’，如果你没有项目，新建一个，然后进入：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
在你使用方法为Font class/Symbol时，那个小眼睛点一下生成一个链接，然后在项目引入就能用了，我选择的是Font class这个方法，所以生成一个后缀.css的cdn地址，在项目里使用方法自然也要用Font class的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
如果你选择Symbol这个方法，那它会生成一个后缀.js的cdn地址，在项目里用script标签引入：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]  
那使用方法自然也要用Symbol的：  
![在这里插入图片描述][20200103154400625.png]  
3，成员合作  
事实上，开发项目合作来的，不能各自下载一堆文件啊，这里可以邀请成员，大家用同一个：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]  
注意，成员每次新加入图标都会重新成功新的cdn链接地址，及时更新就行了。

话说第一批90后30岁了啊，艾西吧

[Link 1]: https://www.iconfont.cn/manage/index
[20200103152647949.png]: https://img-blog.csdnimg.cn/20200103152647949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103153246468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200103153656893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200103154038268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200103154224948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20200103154400625.png]: https://img-blog.csdnimg.cn/20200103154400625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020010315461889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70