数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在输入字段中放置 Font Awesome 图标？
在许多情况下，开发者需要在文本输入框或特定的 HTML 元素内放置图标。例如，我们正在创建一个包含多个输入框的表单。如果我们将与表单输入字段相关的图标放在输入框内，我们可以为应用程序创建一个更好的 UI 和更具吸引力的设计。
在本教程中，我们将使用 font-awesome 库在网页上添加图标。此外，我们将操作 CSS 代码以将图标放置在输入字段内。
语法
用户可以按照以下语法将图标放置在输入字段内。
input { padding-left: 40px; }
i { position: absolute; left: 0; top: 11px; }
在上述语法中，我们为输入字段设置了填充。之后，我们为图标设置了“absolute”位置并设置了顶部位置。此外，我们还可以根据需要设置图标的填充。
示例 1
在下面的示例中，我们创建了一个类名为“form”的 div。此外，我们为每个输入定义了 div 元素，并根据其包含的输入设置了不同的类名。我们在 div 元素内添加了标签、输入元素和 Font Awesome 图标。
在 CSS 中，我们为输入元素的父 div 设置样式。此外，我们为输入元素设置了 40px 的左填充，以将图标设置在该位置。用户可以根据图标大小设置填充。
之后，我们为图标设置了绝对位置。此外，我们根据输入元素的位置固定了顶部位置。此外，我们还为图标设置了填充并添加了 0.3 秒的过渡。
用户可以在输出中观察文本输入字段内的图标。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fileExtension, .filename { position: relative; display: flex; flex-direction: column; width: 300px; }
.fileExtension input, .filename input { padding-left: 40px; }
.fileExtension i, .filename i { position: absolute; left: 0; top: 11px; padding: 9px 8px; transition: 0.3s; }
</style>
</head>
<body>
<h3> Using the <i> CSS to place font Awesome </i> icons inside the input field </h3>
<div class="form">
<div class="filename">
<label> <b> filename </b> </label>
<input type="text" placeholder="Enter filename" name="filename" required>
<i class="fa fa-code"> </i>
</div> <br>
<div class="fileExtension">
<label> <b> File Extenssion </b> </label>
<input type="text" placeholder="Enter file extension" name="extension" required>
<i class="fa fa-code"> </i>
</div>
</div>
</html>
示例 2（使用 :after 伪类）
在这个示例中，我们使用了“:after”伪选择器在输入字段中设置图标。“:after”伪选择器会将 HTML 元素从网页的原始流中移除，并使其独立。
在这里，我们在 div 元素内添加了输入元素。在 CSS 中，我们设置了输入元素的“position: relative”。之后，我们使用了“:after”伪选择器，它将在输入元素之后放置图标。我们使用 CSS 的特定代码和“content”属性在输入元素之后添加了图标。此外，我们在为“position”属性设置“absolute”值后，为图标设置了右侧位置。
在输出中，我们可以看到图标放置在输入字段的右侧。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.input {
display: inline-block;
position: relative;
}
.input:after {
position: absolute;
right: 6px;
font-family: 'FontAwesome';
content: '\f274';
}
</style>
</head>
<body>
<h3> Using the <i> CSS to place font Awesome </i> icons inside the input field </h3>
<div class="input">
<input type="text" placeholder="Enter date" />
</div>
</html>
示例 3
在下面的示例中，我们在 HTML 中的输入元素上方的“span”中添加了图标。在 CSS 中，我们为输入元素设置了左填充。此外，我们为图标元素设置了绝对位置。之后，我们更改了图标元素的位置，以便我们可以将其放在输入元素内。
用户可以在输出中看到我们在输入元素内添加了错误图标。
<html>
<head>
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#input {
padding-left: 35px;
}
/* placing the icon */
.error {
position: absolute;
margin-top: 1.5px;
margin-left: 5px;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> CSS to place font Awesome </i> icons inside the input field </h2>
<span class = "fa fa-info-circle error"> </span>
<input name = "input" id = "input">
</html>
在本教程中，我们学习了如何在输入字段内设置图标。我们可以在用户名输入字段内设置用户图标，在电话号码输入字段内设置电话图标，在密码输入字段内设置密钥图标，在电子邮件输入字段内设置收件箱图标等。
开发者需要使用“absolute”位置和不同的定位属性来设置输入字段内的图标位置。
3K+ 浏览量
