如何為輸入元素新增 Font Awesome 圖示？-css教學-PHP中文網

如何為輸入元素新增 Font Awesome 圖示？

Linda Hamilton

發布： 2024-11-15 06:44:02

原創

448 人瀏覽過

How to Add Font Awesome Icons to Input Elements?

新增 Font Awesome 圖示

將圖示合併到輸入欄位中可以增強使用者體驗並有效傳達訊息。雖然背景圖像似乎是一種直覺的方法，但此技術對於 Font Awesome 圖示來說無效，因為它們依賴字體渲染。

要克服此限制，請考慮以下HTML 和CSS 解：

方法1：

<input name="txtName">

登入後複製

.errspan {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;
}

登入後複製

此方法使用來定位圖示。具有 fa-info-circle 類別的元素。 CSS 應用適當的邊距和位置。

方法2：

<div class="input-wrapper">
     <input type="text" />
</div>

登入後複製

.input-wrapper {
    display:inline-block;
    position: relative
}
.input-wrapper:after {
    font-family: 'FontAwesome';
    content: '\f274';
    position: absolute;
    right: 6px;
}

登入後複製

在此方法中，使用偽元素新增圖示（： :after) 附加到輸入容器(

)。 content 屬性指定圖標字符，並透過絕對定位實現定位。

這些技術提供了將 Font Awesome 圖示合併到輸入元素中的有效方法，增強了表單的美觀性和可用性。

以上是如何為輸入元素新增 Font Awesome 圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！