阿里矢量图标

在我们经常见到的天猫,京东等网站中,我们会发现有这样的小图标:
其实可以用图片来实现,但是如果我们使用阿里矢量图标的话,可以减少请求数量哦~

阿里矢量图图标的使用:
1.搜索阿里矢量图标:
2.登录
3.
在图标库中选择你想使用的图标:(下面以天猫购物车为例)
官方图标库—找到并打开
找到
添加入库
打开

然后下载并解压

新建一个文件夹 —把杠杠的iconfont文件夹放进去

阿里矢量图标

第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>

如下:
阿里矢量图标

你学会使用阿里矢量图标了吗~

阿里矢量图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阿里图标</title>
</head>
<link rel="stylesheet" href="iconfont/iconfont.css">
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .nav {
        width: 200px;
        /* height: 540px; */
        margin: 80px auto 0;
    }
    
    .nav>h3 {
        height: 42px;
        background-color: red;
        line-height: 42px;
    }
    
    .nav>h3 i {
        margin-left: 20px;
        margin-left: 5px;
    }
    
    .nav ul {
        list-style-type: none;
    }
    
    .nav ul li {
        height: 30px;
        background-color: #696969;
        line-height: 30px;
        text-indent: 15px;
    }
    
    .nav ul li a {
        text-decoration: none;
        color: #fff;
        font-size: 14px;
    }
    
    .nav ul li i {
        color: #b4b4b4;
    }
</style>


<body>
    <div class="nav">
        <h3>
            <i class="iconfont icon-liebiao"></i>
            <span>商品分类</span>
        </h3>
        <ul>
            <li>
                <i class="iconfont icon-nvzhuangneiyi"></i>
                <a href="#">女装/内衣</a>
            </li>
            <li>
                <i class="iconfont icon-nanzhuang"></i>
                <a href="#">男装/运动户外</a>
            </li>
            <li>
                <i class="iconfont icon-xie"></i>
                <a href="#">女鞋/男鞋/箱包</a>
            </li>
            <li>
                <i class="iconfont icon-huazhuangpin"></i><a href="#">美妆/个人护理</a>
            </li>
            <li>
                <i class="iconfont icon-zhubaoshipin"></i>
                <a href="#">腕表/眼镜/珠宝饰品</a>
            </li>
            <li>
                <i class="iconfont icon-shumashouji"></i>
                <a href="#">手机/数码/电脑办公</a>
            </li>
            <li>
                <i class="iconfont icon-muyingwanju"> </i>
                <a href="#">母婴玩具</a></li>
            <li>
                <i class="iconfont icon-jujia"></i>
                <a href="#">零食/茶酒/进口食品</a>
            </li>
            <li>
                <i class="iconfont icon-shengxianshuiguo"></i>
                <a href="#">生鲜水果</a>
            </li>
            <li>
                <i class="iconfont icon-jiayongdianqi"></i>
                <a href="#">大家电/生活电器</a>
            </li>
            <li>
                <i class="iconfont icon-jiajujiancai"></i>
                <a href="#">家具建材</a>
            </li>
            <li>
                <i class="iconfont icon-qichepeijian"></i>
                <a href="#">汽车/配件/用品</a>
            </li>
            <li>
                <i class="iconfont icon-jiafangjiashi"></i>
                <a href="#">家纺/家饰/鲜花</a>
            </li>
            <li>
                <i class="iconfont icon-yiyaobaojian"></i>
                <a href="#">医药保健</a>
            </li>
            <li>
                <i class="iconfont icon-jiafang"></i>
                <a href="#">家具/收纳/宠物</a>
            </li>
            <li>
                <i class="iconfont icon-tushuyinxiang"></i>
                <a href="#">图书音影</a>
            </li>
        </ul>
    </div>
</body>

</html>

相关推荐