プレースホルダでFont Awesome Iconを使用できますか? HTMLがプレースホルダーで許可されていない場所を読みました。回避策はありますか?
placeholder="<i class='icon-search'></i>"
プレースホルダーの一部に別のフォントを適用することはできないため、アイコンとテキストを追加することはできませんが、アイコンだけで十分な場合は機能します。 FontAwesomeアイコンは、カスタムフォントを持つ文字です(content
ルールのエスケープされたUnicode文字の FontAwesome.css を見ることができます。以下のソースコードでは variables。 less 入力が空でないときに、フォントを交換することが課題になります。 this のようにjQueryと組み合わせてください。
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</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');
}
});
ただし、フォント間の移行はスムーズではありません。
FontAwesome 4.7
を使用している場合、これで十分です:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
16進コードのリストは Font Awesome cheatsheet にあります。ただし、最新のFontAwesome 5.0では、このメソッドは機能しません(更新されたfont-family
と組み合わせたCSSアプローチを使用しても)。
私はこの方法で解決しました:
CSSでは、このコードをfontAwesomeクラスに使用しました:
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
HTMLにfontawesomeクラスとfontawesomeアイコンコードを追加しましたプレースホルダー内:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
CodePen で確認できます。
サポートされている場合は、::input-placeholder
疑似セレクターを::before
と組み合わせて使用できます。
次の例を参照してください。
http://codepen.io/JonFabritius/pen/nHeJg
私はちょうどこれに取り組んでいて、この記事に出会ったので、この記事を修正しました:
Ember(バージョン1.7.1)を使用していますが、入力の値をバインドし、FontAwesomeアイコンであるプレースホルダーを用意する必要がありました。 Ember(私が知っている)の値をバインドする唯一の方法は、組み込みヘルパーを使用することです。しかし、これによりプレースホルダーがエスケープされ、「&#xF002」がテキストのように表示されます。
Emberを使用しているかどうかにかかわらず、入力のプレースホルダーのCSSをFontAwesomeのフォントファミリーに設定する必要があります。これはSCSSです( プレースホルダースタイリングのバーボン を使用):
input {
width:96%;
margin:5px 2%;
padding:0 8px;
border:1px solid #444;
border-radius: 14px;
background: #fff;
@include placeholder {
font-family: 'FontAwesome', $gotham;
}
}
前述のように、ハンドルバーを使用している場合は、htmlエンティティをプレースホルダーとして設定できます。
<input id="listFilter" placeholder="" type="text">
Emberを使用している場合は、Unicode値を持つコントローラープロパティにプレースホルダーをバインドします。
テンプレート内:
{{text-field
id="listFilter"
placeholder=listFilterPlaceholder
value=listFilter}}
コントローラー上:
listFilter: null,
listFilterPlaceholder: "\uf002"
そして、値のバインディングはうまく機能します!
入力にplaceholder=""
を使用します。 UnicodeはFontAwesomeページ http://fontawesome.io/icons/ で見つけることができます。ただし、入力にstyle="font-family: FontAwesome;"
を追加する必要があります。
Font Awesome 5の実装について疑問に思っている人:
一般的な「Font Awesome 5」フォントファミリを指定しないでください。作業しているアイコンのブランチで明確に終了する必要があります。ここでは、たとえば「Brands」というブランチを使用しています。
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
入力テキストにfa-placeholder
クラスを追加してこれを行います。
<input type="text" name="search" class="form-control" placeholder="" />
そのため、cssでこれを追加するだけです。
.fa-placholder { font-family: "FontAwesome"; }
それは私にとってはうまくいきます。
更新:
テキスト入力でユーザーが入力している間にフォントを変更するには、フォントの後にフォントを追加するだけです
.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }
JQueryを無視すると、これは入力要素の::placeholder
を使用して実行できます。
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</div>
</form>
CSS部分
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }
input.name{ font-family:[font family you want to specify] }
ベストパート:プレースホルダーとテキストに異なるフォントファミリを使用できます
私はこの質問が非常に古いことを知っています。しかし、私が使用したような単純な答えは見当たりませんでした。
fas
クラスを入力に追加し、有効なhexを追加する必要があります。この場合は
Font-Awesomeのグリフはここ<input type="text" class="fas" placeholder="" />
のようになります
各グリフのユニコードは、 公式Webはこちら にあります。
これは、cssやjavascriptを必要としない簡単な例です。
input {
padding: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
<div class="form-group">
<input type="text" class="fas" placeholder="" />
</div>
</form>
Bootstrapを使用できる/したい場合、解決策は入力グループになります。
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="-">
</div>
次のようになります: text-prependと検索記号を使用した入力
Jasonが提供する回答のフォントが変更されると、若干の遅延とジャンクがあります。 「キーアップ」の代わりに「変更」イベントを使用すると、この問題は解決します。
$('#iconified').on('change', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
プレースホルダーにテキストとアイコンの両方を追加しました。
placeholder="Edit "
CSS
font-family: FontAwesome,'Merriweather Sans', sans-serif;
Teocci solution はできる限り単純なので、CSSを追加する必要はありません。FontAwesome 5にはclass = "fas"を追加するだけです。適切なCSSフォント宣言を要素に追加するからです。
入力グループとプレースホルダーの両方に検索アイコンが追加されたBootstrap navbar内の検索ボックスの例を次に示します(もちろん、デモのために、両方を同時に使用することはありません)。画像:https://i.imgur.com/v4kQJ77.png ">コード:
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control fas text-right" placeholder="" aria-label="Search string">
<div class="input-group-append">
<button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
</div>
</div>
</form>
@Elliの答えはFontAwesome 5でも機能しますが、正しいフォント名を使用し、必要なバージョンの特定のCSSを使用する必要があります。たとえば、FA5 Freeを使用している場合、all.cssを含めると機能しませんでしたが、solid.cssを含めるとうまく機能しました。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
FA5 Proの場合、フォント名は「Font Awesome 5 Pro」です。
私はこの問題を少し違った方法で解決しましたが、それはHTMLコードを介してどのFAアイコンでも動作します。プレースホルダーに関するこれらすべての困難の代わりに、私のソリューションは次のとおりです。
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">
CSS
.block__icon {
position: absolute;
margin: some-corrections;
}
.block__input {
padding: some-corrections;
}
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder=" Some text">
CSS
.block__icon {
position: absolute;
z-index: 2; /* New line */
margin: some-corrections;
}
.block__input {
position: relative; /* New line */
z-index: 2; /* New line */
padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
z-index: 1;
}
それは以前考えていたよりも難しいですが、私はこれで誰かを助けたことを願っています。