Font Awesome アイコンをテキスト入力フィールドに統合するにはどうすればよいですか?

テキスト入力要素内に Font Awesome アイコンを配置する

Font Awesome アイコンをテキスト入力フィールドに統合すると、ユーザー エクスペリエンスが向上します。ただし、Font Awesome のフォントとしての性質により、これを実現するには慎重な検討が必要です。

この例で採用された背景画像を利用する最初のアプローチは、Font Awesome が画像ではなく表示を使用するため、適切ではありません。文字をテキストとして。代わりに、代替アプローチを実装する必要があります。

解決策:

テキスト入力フィールド内にアイコンを挿入するには、次の 2 つの方法を使用できます:

1. Span 要素の使用:

このメソッドは、入力フィールドに隣接して配置された Span 要素を利用し、以下を使用して戦略的に配置されます。 CSS.

HTML:

<input name="txtName">

CSS:

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

2. After 擬似要素の使用:

または、after 擬似要素を使用して同じ効果を実現し、テキスト入力内にインライン配置することもできます。 field.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.input-wrapper {
    display:inline-block;
    position: relative
}
.input-wrapper:after {
    font-family: 'FontAwesome';
    content: '\f274';
    position: absolute;
    right: 6px;
}

これらのアプローチにより、フォントのシームレスな統合が可能になります。テキスト入力要素内の素晴らしいアイコンにより、追加の視覚的手がかりが提供され、ユーザー インタラクションが向上します。