如何將 Font Awesome 圖示整合到文字輸入欄位中？

文字輸入欄位中的Font Awesome 圖示整合

要在使用者名稱輸入欄位中嵌入Font Awesome 圖示，您可以考慮使用下列CSS /HTML 方法：

第一種方法：

HTML:

<input name="txtName">

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

<

此方法利用:after 偽元素將圖示定位在輸入欄位中。

第二種方法：

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

HTML:

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

CSS:

此方法利用容器div 相對於輸入欄位定位圖示。

@font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

其他注意事項：確保您已根據提供的程式碼片段正確聲明了 Font Awesome CSS：

以上是如何將 Font Awesome 圖示整合到文字輸入欄位中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！