阿里矢量图库使用

本是古典何须时尚 2021-09-23 09:16 407阅读 0赞

官方网址：[https://www.iconfont.cn/][https_www.iconfont.cn]  
先准备好github账号用来登录

对想要的图标点击**添加入库**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]  
点击右上的小车，点击加入项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]  
之后进入**我的项目**，点击生成代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]  
在**Font class**选项卡中，会生成css网址。这个css文件可以直接在项目中引用，也可以下载后使用。

点击复制代码可以获得相应字体图标的class  
![在这里插入图片描述][20191015150850941.jpg]  
完整html代码

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1458751_3c7uutqrmrj.css"/>
 	</head>
 	<body>
 		
 		
 		
 	</body>
 </html>

上面是在线使用方法，如果离线使用，需要点击**下载至本地**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]  
将下载后的zip解压后方法项目中，直接引用css文件  
示例

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<link rel="stylesheet" type="text/css" href="font_test/iconfont.css"/>
 	</head>
 	<body>
 		
 		
 		
 	</body>
 </html>

下载的文件中会有一个demo\_index.html文件，直接用浏览器打开，会看到相应文档，很方便。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 4]

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/ba0b6b52df2c400ca10da891a65af3b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/752747924d65411d85e5aada3cff1a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]: /images/20210923/8f4f6f067fa94a2a88163c6be1133bbc.png
[20191015150850941.jpg]: /images/20210923/224eac11ead2476e8a8c4047348bd849.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]: /images/20210923/c1a046acd9c44f56bbc24e3b57000fb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 4]: /images/20210923/5fd80981a06f4301aa98a112aa9c6382.png