Font Awesome アイコンをテキスト入力要素に追加する方法

テキスト入力要素に Font Awesome アイコンを追加する

入力フィールドにアイコンを挿入すると、視覚的な手がかりが提供され、ユーザー エクスペリエンスが向上します。 Font Awesome アイコンを使用してこれを実現する方法は次のとおりです。

方法 1: 絶対配置

このアプローチでは、入力フィールド内の絶対配置要素としてアイコンを配置します。 .

HTML:

<input type="text">

CSS:

#username {
  position: relative;
}

#username:before {
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 5px;
  content: "\f007";
}

FontAwesome フォント フェイスが宣言されていることを確認します。

メソッド 2: インライン ブロック ラッパー

このメソッドでは、入力フィールドを div でラップし、::after 疑似要素を使用して追加します。アイコン。

HTML:

<div>

CSS:

.input-wrapper {
  display: inline-block;
  position: relative;
}

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

どちらの方法でも、FontAwesome CSS が必要です。あなたのプロジェクトに含めてください。設計要件に最も適したアプローチを選択してください。

以上がFont Awesome アイコンをテキスト入力要素に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。