阿里巴巴矢量图标库 iconfont图标的使用

谁借莪１个温暖的怀抱￠ 2022-02-02 11:13 503阅读 0赞

*  step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过;
 *  step 2:找到图标管理->我的项目->然后新建项目:右边点击新建项目,用于保存自己常用的图标;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 1]
 *  step 3:项目新建完成后,往项目里添加要想使用的图标,搜索一个想要的图标,然后添加到购物车;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 2]
 *  step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;自动跳转到对应的项目里了,如图:  
    ![在这里插入图片描述][20210304163251679.png_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 3]
 *  step 5: 下载至本地，并添加到你的项目中,在项目中引用文件中的iconfont.css文件;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 4]  
    ![在这里插入图片描述][20210304164132907.png_pic_center]

有三种方式引入图标在页面上：  
1）：Unicode  
2）：Font class(常用方式) iconwode是复制的图标代码

3）：Symbol

**注：刷新页面图标就会出现了，调字体图标的大小通过font-size属性来控制**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20220202/993712ffa4a74e3d8b6ee2010a22f178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220202/2225fdc62d2740029b361c77ad5af1a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220202/d6134f48a8e34e9d8c42445bad3130a7.png
[20210304163251679.png_pic_center]: /images/20220202/96a218a06c4e458e97e03c70feda4e37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220202/c45efc0afaef4011a09981e7ac991c9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220202/22a7d2c9e9ff440eb546c5648bc3bbe5.png
[20210304164132907.png_pic_center]: /images/20220202/648e7001ee794bd6a9c7318f8bd3e7c7.png