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

テキスト入力フィールド内の Font Awesome アイコンの統合

ユーザー名入力フィールド内に Font Awesome アイコンを埋め込むには、次の CSS を検討してください。 /HTML アプローチ:

最初アプローチ:

HTML:

<input name="txtName">

CSS:

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

このアプローチでは、以下を利用します。疑似要素の後に入力内にアイコンを配置しますフィールド。

2 番目のアプローチ:

HTML:

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

CSS:

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

このアプローチでは、コンテナー div を利用して配置します。入力フィールドに関連するアイコン。

追加の考慮事項:

提供されたコード スニペットに従って、Font Awesome CSS が適切に宣言されていることを確認してください:

@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 Icons をテキスト入力フィールドに統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。