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

在参考小米官网写页面时,会发现小米中有很多的矢量图标,小米的图标或许是自己的,但是我们写页面时要用到矢量图标时怎么办,可以使用阿里提供的图标库

阿里矢量图标库网址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a  注册一个账号就可以免费的使用了。

使用方法如下:

阿里巴巴矢量图标库的使用_第1张图片

 

第二步

 阿里巴巴矢量图标库的使用_第2张图片

 

第三步

 阿里巴巴矢量图标库的使用_第3张图片

添加购物车

阿里巴巴矢量图标库的使用_第4张图片

 

 代码下载后会有一个如下的文件夹,复制到自己的项目中

阿里巴巴矢量图标库的使用_第5张图片

 

 阿里巴巴矢量图标库的使用_第6张图片

 

 下面简单的使用一下:

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        
        <link rel="stylesheet" type="text/css" href="font_fupby3jjl5e/iconfont.css"/>
    head>
    <body>
        <span class="iconfont icon-sousuokuang" style="color: #0086B3;">span>  
        <span class="icon iconfont">span>  
        
    body>
html>

阿里巴巴矢量图标库的使用_第7张图片

 

 矢量图标就相当于文本一般,它可以使用文本的属性比如修改颜色,改变字体大小,字体居中等属性,所以在处理矢量图标时比图片更加的方便简洁。

个人学习,内容简略。

你可能感兴趣的:(阿里巴巴矢量图标库的使用)