html之添加文字图标

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="&#xe66c;">
    </form>
</body>
</html>

 

posted @ 2018-09-04 20:33  pythonZhou  阅读(978)  评论(0)    收藏  举报