プレースホルダーでFontAwesomeアイコンを使用する
Use Font Awesome Icon Placeholder
解決:
使用している場合FontAwesome4.7これで十分です。
16進コードのリストは、FontAwesomeのチートシートにあります。ただし、最新のFontAwesome 5.0では、この方法は機能しません(CSSアプローチを更新されたものと組み合わせて使用した場合でも)フォントファミリー)。
プレースホルダーの一部に別のフォントを適用できないため、アイコンとテキストを追加することはできませんが、アイコンだけで満足している場合は機能します。 FontAwesomeアイコンは、カスタムフォントを使用した単なる文字です(FontAwesomeチートシートで、エスケープされたUnicode文字を確認できます。コンテンツルール。少ないソースコードでは、variables.lessにあります。課題は、入力が空でないときにフォントを交換することです。このようにjQueryと組み合わせてください。
このCSSで:
input.empty {font-family:FontAwesome;フォントスタイル:通常;フォントの太さ:通常;テキスト装飾:継承; }そしてこの(単純な)jQuery
$( '#iconified')。on( 'keyup'、function(){var input = $(this); if(input.val()。length === 0){input.addClass( 'empty'); } else {input.removeClass( 'empty');}});ただし、フォント間の移行はスムーズではありません。
私はこの方法で解決しました:
CSSでは、このコードを fontAwesomeクラス :
.fontAwesome {font-family: 'Helvetica'、FontAwesome、sans-serif; }HTMLに追加しました fontawesomeクラス そしてその fontawesomeアイコンコード プレースホルダー内:
あなたはCodePenで見ることができます。