121

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

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

18 に答える 18

256

これを使用している場合は、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)。

于 2014-06-17T04:17:51.417 に答える
65

プレースホルダーの一部に別のフォントを適用できないため、アイコンとテキストを追加することはできませんが、アイコンだけで満足している場合は機能します。FontAwesome アイコンは、カスタム フォントを使用した単なる文字です (ルールでエスケープされた Unicode 文字については、 FontAwesome Cheatsheetcontentを参照してください。少ないソース コードでは、variables.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');
    }
});

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

于 2013-10-13T21:12:41.923 に答える
21

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

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

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

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

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

CodePenで確認できます。

于 2016-03-29T14:43:37.903 に答える
10

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

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

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

私はこれに取り組んでいて、この記事に出くわしました。そこから、この内容を変更しました。

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

于 2013-10-20T21:29:33.647 に答える
8

I am using Ember (version 1.7.1) and I needed to both bind the value of the input and have a placeholder that was a FontAwesome icon. The only way to bind the value in Ember (that I know of) is to use the built in helper. But that causes the placeholder to be escaped, "&#xF002" just shows up just like that, text.

If you are using Ember or not, you need to set the CSS of the input's placeholder to have a font-family of FontAwesome. This is SCSS (using Bourbon for the placeholder styling):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

If you are just using handlebars, as has been mentioned before you can just set the html entity as the placeholder:

<input id="listFilter" placeholder="&#xF002;" type="text">

If you are using Ember bind the placeholder to a controller property that has the unicode value.

in the template:

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

on the controller:

listFilter: null,
listFilterPlaceholder: "\uf002"

And the value binding works fine!

placeholder example

placeholder gif

于 2014-11-21T19:06:13.557 に答える
3

jQuery を無視して::placeholder、input 要素を使用してこれを行うことができます。

<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] }

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

于 2017-08-02T13:53:29.347 に答える
2

私は問題を少し違った方法で解決しました.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;
}

前に思っていたより難しいですが、これで誰かの役に立てば幸いです。

コードペン: https://codepen.io/dzakh/pen/YzKqJvy

于 2019-08-15T20:19:07.633 に答える
1

Jason が提供する回答のフォントが変わるため、わずかな遅延とジャンクがあります。「keyup」の代わりに「change」イベントを使用すると、この問題が解決します。

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});
于 2016-07-06T21:55:29.313 に答える
0 
<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>

.form-group {
  position: relative;
}
i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
input {
  padding-left: 1rem;
}
于 2021-10-04T10:22:32.047 に答える