1.通过iconfont找到阿里巴巴矢量图标库

  •  图标都是通过Unicode编码直接对应的像素块,所以可以直接可以当成文字修改;

  •  

  • 使用步骤:

    • 第一步:引入项目下的生成的fontclass代码;
    • <link rel="stylesheet" type="text/css" href="./iconfont.css">

       

    • 第二步:挑选相应的图标并获取类名,应用于页面;
    • <i class="iconfont icon-xxx"></i>

       

在form表单中的应用<!DOCTYPE html><html lang=”en”>

<head>
    <meta charset="UTF-8">
    <title>jj</title>
    <style>
        .c1{
            float: right;
        }
        input[type = \'text\']:focus{
            outline:none;
            border:0.3px solid rgba(0,0,0,0.2);
        }
        input[type = \'text\']:hover{
            border:0.3px solid rgba(0,0,0,0.05);
        }
    </style>
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
　　#这是第一种
    <i class="iconfont icon-huo c1" style="background-color: red"></i>
    <form action="">
        <input type="text" value="">
　　　　　　#这是第二种
        <input type="submit" class="iconfont icon-huo" value="">
    </form>
</body>
</html>

 

版权声明：本文为0627zhou原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/0627zhou/articles/9588333.html