web-dev-qa-db-ja.com

Font Awesomeアイコンを入力フィールドに追加するにはどうすればよいですか？

Font Awesomeに含まれる検索アイコンを入力に使用するにはどうすればよいですか？私のサイトには（PHPmotionに基づいた）検索機能があり、それを検索に使用します。

コードは次のとおりです。

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>
htmlcsshtml5css3font-awesome
79
user2275855

inputの代わりに別のタグを使用して、FontAwesomeを通常の方法で適用できます。

タイプinputのimageの代わりに、これを使用できます。

<i class="icon-search icon-2x"></i>

クイックCSS：

.icon-search {
    color:white;
    background-color:black;
}

ここに簡単なフィドルがあります： DEMO

スタイルを少し改善し、iオブジェクトにイベント機能を追加できます。これは、iの代わりに<button type="submit">オブジェクトを使用するか、javascriptを使用して実行できます。

ボタンの解決策は次のようになります。

<button type="submit" class="icon-search icon-large"></button>

そしてCSS：

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

私のフィドルはiではなくボタンで更新されています： DEMO

更新：任意のタグでのFontAwesomeの使用

FontAwsomeの問題は、スタイルシートが:before疑似要素を使用して要素にアイコンを追加することです。また、input要素では疑似要素が機能しない/許可されません。これが、inputでFontAwesomeを通常の方法で使用できない理由です。

しかし、解決策があります-FontAwesomeを通常のフォントとして使用できます：

CSS：

input[type="submit"] {
    font-family: FontAwesome;
}

HTML：

<input type="submit" class="search" value="&#xf002;" />

グリフはvalue属性の値として渡すことができます。個々の文字/アイコンのASCIIコードはFontAwesome cssファイルで見つけることができます。それらを\f002から&#xf002;のようなHTML ASCII番号に変更するだけで機能します。

FontAwesomeasciiコードへのリンク（cheatsheet）： fortawesome.github.io/Font-Awesome/cheatsheet

アイコンのサイズはfont-sizeで簡単に調整できます。

Jsfiddeでinput要素を使用した上記の例を参照してください。

DEMO

アップデート：FontAwesome 5

FontAwesomeバージョン5では、このソリューションに必要なCSSが変更されました-フォントファミリ名が変更され、フォントの太さを指定する必要があります。

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

@WillFastieのコメントと更新されたフィドルへのリンクを参照してください。ありがとう！

101
Martin Turjak

以下は、シンプルなCSSと標準フォントの素晴らしい構文、Unicode値などの必要なしで動作するソリューションです。

  1. <input>タグを作成し、その後に必要なアイコンを含む標準の<i>タグを作成します。

  2. 相対的な位置付けとより高いレイヤー次数（z-index）を使用し、アイコンを入力フィールドの上および上に移動します。

  3. （オプション）標準のJSを介して、おそらくデータを送信するために、アイコンをアクティブにすることができます。

HTML/CSS/JSについては、以下の3つのコードスニペットを参照してください。

またはここのJSFiddleでも同じ：例： http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
40
ethanpil

FontAwesomeアイコンをdrupal入力に取得する方法を知りたい場合は、最初に次のようにdecode_entitiesをデコードする必要があります。

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);
10
Tom Appleseed

入力をボタン要素に変更すると、その要素でFont Awesomeクラスを使用できます。グリフの配置はデモでは素晴らしいものではありませんが、アイデアは得られます。

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

ここでの利点は、ボタンではなく、1つのように見える要素のイベントハンドラーを追加することなく、フォームが完全に機能することです。

4
cimmanon
.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>
0
dxpkumar