[解決済み] Font Awesome アイコンをプレースホルダーで使用する

質問

Font Awesome Iconをプレースホルダーで使用することは可能ですか？プレースホルダーにHTMLは使えないと書いてありました。回避策はありますか？

placeholder="<i class='icon-search'></i>"

解決方法は？

プレースホルダーの一部に別のフォントを適用することはできないので、アイコンとテキストを追加することはできませんが、アイコンのみで満足できるのであれば、それはそれで有効です。FontAwesomeのアイコンは、カスタムフォントを使用した文字だけです( FontAwesome Cheatsheet でエスケープされたユニコード文字については content ルールがあります。lessのソースコードでは、それは 変数.less 課題は、入力が空でないときにフォントを入れ替えることでしょう。jQueryと組み合わせて、次のようにします。 これ .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

このCSSで

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

そして、この（簡単な）jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

ただし、フォント間の移行はスムーズではありません。