要在输入元素中添加图标, 通常使用 < i > 标签和 < span > 标签在 web 网页上添加图标. 要在网页或某些特定区域添加任何图标, 需要在 head 标签中使用 link 标签添加 Font Awesome 链接. Font Awesome 图标需要通过在图标名称前使用 fa 前缀来放置.
Font Awesome 链接: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/CSS/font-awesome.min.css
注: 不需要下载或安装, 直接使用使用 link 标签添加 Font Awesome 链接即可.
Font Awesome 到哪查询呢? 它有官网 (https://fontawesome.com/), 在这里我们可以看到它的真正的最新版, 还可以查看各种图标.
示例 1:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <style>
- .input-icons i { position: absolute; } .input-icons { width: 100%; margin-bottom:
- 10px; } .icon { padding: 10px; min-width: 40px; } .input-field { width:
- 100%; padding: 10px; text-align: center; }
- </style>
- </head>
- <body>
- <h3>
- Input 元素内的图标
- </h3>
- <div style="max-width:400px;margin:auto">
- <div class="input-icons">
- <i class="fa fa-user icon">
- </i>
- <input class="input-field" type="text">
- <i class="fa fa-instagram icon">
- </i>
- <input class="input-field" type="text">
- <i class="fa fa-envelope icon">
- </i>
- <input class="input-field" type="text">
- <i class="fa fa-venus-mars icon">
- </i>
- <input class="input-field" type="text">
- <i class="fa fa-android icon">
- </i>
- <input class="input-field" type="text">
- </div>
- </div>
- </body>
- </HTML>
效果图:
示例 2:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <style>
- .input-icons i { position: absolute; } .input-icons { width: 100%; margin-bottom:
- 10px; } .icon { padding: 10px; color: red; min-width: 50px; text-align:
- center; } .input-field { width: 100%; padding: 10px; text-align: center;
- } h2 { color: red; }
- </style>
- </head>
- <body>
- <center>
- <form style="max-width:450px;margin:auto">
- <h2>
- 登录
- </h2>
- <div class="input-icons">
- <i class="fa fa-user icon">
- </i>
- <input class="input-field" type="text" placeholder="Username">
- </div>
- <div class="input-icons">
- <i class="fa fa-envelope icon">
- </i>
- <input class="input-field" type="text" placeholder="Email">
- </div>
- <div class="input-icons">
- <i class="fa fa-key icon">
- </i>
- <input class="input-field" type="password" placeholder="Password">
- </div>
- </form>
- </center>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10456.html