html中的“添加文本”图标

顺晟科技

2022-09-15 20:51:29

184

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>

上一篇：Html美化|自举链接整理下一篇：HTML CSS Day10实例