[解決済み] Font Awesome のアイコンをテキスト入力要素内に配置する

質問

ユーザー名入力フィールドにユーザーアイコンを挿入しようとしています。

私は、以下のソリューションのいずれかを試してみました。 同様の質問 それを知っている background-image プロパティは機能しないので フォント・オーサム はフォントだからです。

以下は私のやり方ですが、アイコンが表示されません。

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

デフォルトのfont awesome cssでfont faceを宣言しているので、上にfont-familyを追加するのが正しい方法なのかどうかわかりませんでした。

 @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');
 }

どのように解決するのですか？

その通りです。:before と :after の擬似コンテンツは、次のような置換されたコンテンツに対して機能するようには意図されていません。 img と input という要素で構成されています。wrapping要素を追加し、font-familyを宣言することは、背景画像を使用することと同様に、可能性の1つです。あるいは、html5のプレースホルダーテキストがあなたのニーズに合うかもしれません。

<input name="username" placeholder="&#61447;">

placeholder属性に対応していないブラウザは、単に無視されます。

最新情報

beforeコンテンツセレクタで入力を選択します。 input[type="text"]:before . ラッパーを選択する必要があります。 .wrapper:before . 参照 http://jsfiddle.net/allcaps/gA4rx/ . また、ラッパーが冗長な場所にはプレースホルダーの提案を追加しました。

.wrapper input[type="text"] {
        position: relative; 
    }
    
    input { font-family: 'FontAwesome'; } /* This is for the placeholder */
    
    .wrapper:before {
        font-family: 'FontAwesome';
        color:red;
        position: relative;
        left: -5px;
        content: "\f007";
    }

    
    <p class="wrapper"><input placeholder="&#61447; Username"></p>

フォールバック

Font Awesome は Unicode Private Use Area (PUA) を使ってアイコンを保存しています。その他の文字は存在せず、ブラウザのデフォルトにフォールバックします。それは他の入力と同じであるべきです。入力要素にフォントを定義している場合は、アイコンを使用する場合のフォールバックとして同じフォントを供給します。このように。

input { font-family: 'FontAwesome', YourFont; }