資料結構
網路
關係資料庫管理系統 (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+ 瀏覽量
