阿里图标库使用

阿里图标图库地址

https://www.iconfont.cn/search

使用阿里在线图标库

1、查找需要使用的图标,如:电话,添加至购物车
2、新建一个项目,将购物车内的图标“添加至项目”
3、点击生成代码
在这里插入图片描述

4、将生成的代码连接地址复制到需要使用的代码中引用图标

使用例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2379634_x0zo2tf4wlf.css">
    <style>
        .iconfont{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-dianhua"></i>
</body>
</html>

阿里图标下载至本地使用

1、查找需要使用的图标,如:电话,添加至购物车
2、新建一个项目,将购物车内的图标“添加至项目”
3、点击生成代码
4、将图标下载至本地
在这里插入图片描述

使用例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
    <style>
        .iconfont{
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-dianhua"></i>
</body>
</html>

建议

建议使用阿里官方图标库,并且是同一系列的图标,同一风格样式在这里插入图片描述

编辑图标

1、查找需要使用的图标,如:电话,添加至购物车
2、新建一个项目,将购物车内的图标“添加至项目”
3、点击生成代码
4、编辑图标方向等
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_39218464/article/details/113918448