プレースホルダーで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で見ることができます。