プレースホルダーで素晴らしいフォントアイコンを使用する


111

プレースホルダーでFont Awesome Iconを使用することはできますか?プレースホルダーでHTMLが許可されていない場所を読みました。回避策はありますか?

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

回答:


61

プレースホルダーの一部に別のフォントを適用することはできないため、アイコンとテキストを追加することはできませんが、アイコンだけで十分であれば問題なく機能します。FontAwesomeアイコンは、カスタムフォントのある単なる文字です(FontAwesomeチートシートで、contentルール内のエスケープされたUnicode文字を確認できます。ソースコードが少ない場合は、変数に含まれます。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');
    }
});

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


4
FontAwesomeは、すべての非Unicodeシンボルに対して通常の文字を表示します。私にとっては、Unicodeエンティティの挿入は機能しませんが、シンボルへの貼り付けは機能します:placeholder = "Hello"
DanielKhan

FontAwesome 5では、font-familyを使用します。FontAwesome \ 5 Free; 代わりに。
アンドリューシュルツ

1
@AndrewSchultz、font-family: Font Awesome\ 5 Free;動作しません。私はちょうど使用しなければなりませんでしたfont-family: FontAwesome;
kanlukasz

実際には、さまざまなフォントを入力に適用できます。私はFA5 Proをインストールしてこれを実行しfont-family: 'Font Awesome 5 Pro', 'Montserrat';、検索フィールドに適用しました。
ジェフW

229

これを使用している場合は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="&#xF002; Search" style="font-family:Arial, FontAwesome" />

16進コードのリストは、Font Awesomeチートシートにあります。ただし、最新のFontAwesome 5.0では、この方法は機能しません(CSSアプローチと更新されたを組み合わせた場合でもfont-family)。


8
どこで&#xF002;価値を得ましたか?どうやってあなたはどこicon-searchへ行くの&#xF002ですか?
ІгарЦімошка

2
あなたはid="iconified"ちょうど追加する必要はなく、class="fa"素晴らしいフォントがCSSを処理します。
Pedro Hoehl Carvalho

8
フォントの順序を変更して機能させる必要がありました<input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">。それ以外の場合は、「fl」を含む記号が表示されました。
Guillaume Renoult、2015年

4
@ІгарЦімошка16進コードはすべてチートシートfortawesome.github.io/Font-Awesome/cheatsheetに
Liam George Betsworth


20

私はこの方法で解決しました:

CSSでは、fontAwesomeクラスに次のコードを使用しました。

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

HTMLでは、fontholderクラスfontawesomeアイコンコードをプレースホルダー内に追加しました。

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

CodePenで確認できます。


これはFA5 Proでも機能しますinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB

10

@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="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

FA5 Proの場合、フォント名は「Font Awesome 5 Pro」です。


9

サポートされている場合、::input-placeholderと組み合わせた疑似セレクターを使用できます::before

次の例を参照してください。

http://codepen.io/JonFabritius/pen/nHeJg

私はこれに取り組んでいて、この記事に出くわしました、そこから私はこのものを修正しました:

http://davidwalsh.name/html5-placeholder-css


3
これは、Firefox 27ではうまく機能しません。理解できなかったので、もう一度確認してください。
Noitidart 2014年

8

私はEmber(バージョン1.7.1)を使用していて、入力の値をバインドする必要があり、FontAwesomeアイコンであるプレースホルダーを持っている必要があります。(私が知っている)Emberで値をバインドする唯一の方法は、組み込みヘルパーを使用することです。しかし、これによりプレースホルダーがエスケープされます。 "&#xF002"は、テキストと同じように表示されます。

Emberを使用しているかどうかにかかわらず、FontAwesomeのfont-familyを持つように入力のプレースホルダーのCSSを設定する必要があります。これは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="&#xF002;" type="text">

Emberを使用している場合は、プレースホルダーをUnicode値を持つコントローラープロパティにバインドします。

テンプレート内:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

コントローラ上:

listFilter: null,
listFilterPlaceholder: "\uf002"

そして、値バインディングは正常に機能します!

プレースホルダーの例

プレースホルダーgif


これはEmber 1.7.1を使用しています
RustyToms 2014年

他のWebテクノロジーを使用している人のための素晴らしい投稿。
L84 2014年

1
どうもありがとう!頭をかなり掻きました。ソリューションを詳しく説明してくれてありがとう!
Moe Tsao


4

これを行うにはfa-placeholder、入力テキストにクラスを追加します。

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

だから、CSSでこれを追加するだけです:

.fa-placholder { font-family: "FontAwesome"; }

それは私にはうまくいきます。

更新:

ユーザーがテキスト入力を入力しているときにフォントを変更するには、フォントawesomeの後にフォントを追加するだけです

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }


4

Font Awesome 5の実装について不思議に思う人:

一般的な「Font Awesome 5」フォントファミリーを指定しないでください。使用しているアイコンのブランチで具体的に終了する必要があります。ここでは、たとえば「Brands」というブランチを使用しています。

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

より詳細入力プレースホルダーテキストでFont Awesome(5)アイコンを使用


3

jQueryを無視して、これは::placeholderinput要素を使用して実行できます。

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </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] }

最良の部分:プレースホルダーとテキストに異なるフォントファミリーを設定できます


3

この質問は非常に古いことを知っています。しかし、私が以前使っていたような簡単な答えは見つかりませんでした。

この場合、fasクラスを入力に追加し、有効な16進数を配置するだけです。&#xf002はFont-Awesomeのグリフに対して<input type="text" class="fas" placeholder="&#xf002" />

各グリフのユニコードは、公式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="&#xf002" />
  </div>
</form>


これがFont Awesome 5の答えです。ありがとうございます。
laviex

1

Jasonが提供する回答のフォントが変更されるため、若干の遅延とジャンクがあります。「キーアップ」の代わりに「変更」イベントを使用すると、この問題が解決します。

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

1

テキストとアイコンの両方をプレースホルダーに一緒に追加しました。

placeholder="Edit &nbsp; &#xf040;"

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;


1

私は少し異なる方法で問題を解決しましたが、htmlコードを介してFAアイコンで動作します。プレースホルダーに関するこれらすべての困難の代わりに、私の解決策は次のとおりです。

  1. 通常の方法でアイコンを配置するには
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;
}
  1. 次に、プレースホルダーのテキストを調整します(私の場合、アイコンはテキストの直前にあります)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...
  1. これは、アイコンが入力の上にあり、カーソルがクリックできないようにブロックしているため、CSSに1行追加する必要があるという問題です。
CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}
  1. ただし、アイコンはプレースホルダーと一緒に消えないため、修正する必要があります。そしてこれも私のソリューションの最終バージョンです:
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;
}

思ったより難しいですが、これで誰かを助けられたらいいのにと思います。

Codepen:https ://codepen.io/dzakh/pen/YzKqJvy


0

Teocci ソリューションは可能な限りシンプルであり、CSSを追加する必要はありません。適切なCSSフォント宣言を要素に追加するため、Font Awesome 5にclass = "fas"を追加するだけです。

以下は、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="&#xf002;" 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>

0

以下のトリックを使用できる場合、何よりも、特に、目覚めないで答えます

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.