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

89

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>
html  css  font-awesome 
— ユーザー2275855
ソース

回答:

112

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

あなたのinputwithタイプの代わりにimageこれを使うことができます：

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

クイックCSS：

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

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

スタイルを少し良くして、イベント機能をiオブジェクトに追加できます。これ<button type="submit">はi、の代わりにオブジェクトを使用するか、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の代わりにボタンで更新されています： デモ

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

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

しかし、解決策があります。FontAwesomeを次のように通常のフォントとして使用できます。

CSS：

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

HTML：

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

グリフはvalue属性の値として渡すことができます。個々の文字のASCIIコードは/アイコンはFontAwesome CSSファイルで見つけることができ、あなただけのようなHTML形式のアスキー番号にそれらを変更する必要がある\f002と&#xf002;、それが動作するはずです。

FontAwesome ASCIIコード（チートシート）へのリンク：fortawesome.github.io/Font-Awesome/cheatsheet

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

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

デモ

更新：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のコメントを参照してください。ありがとう！

— マーティントゥルジャック
ソース
2
@HTMLDeveloper問題は、FontAwesomeの通常の適用方法です...使用する:beforeため、inputまたはimgタグで機能しないためです...しかし、簡単な解決策があります。つまり、通常のフォントとしてFontAwesomeを使用します...更新された解決策を参照してください上記。私は投票を獲得できることを願っています;-)
— Martin Turjak 2014
11
@HTMLDeveloperのBooについて...彼は回答（すべての編集において、私はチェックしました）で、Font Awesomeスタイルを入力タグに適用できないことを明確に述べました。次に、いくつかの異なるソリューションを投稿し、そのうちの1つだけがボタンの使用を含みました。それからあなたは自分の正確な答えを自分で使い始めました。悪い形。
— o_O 2014年
1
ASCIIコード（チートシート）へのリンク：fortawesome.github.io/Font-Awesome/cheatsheet
— Vadorequest
1
@Vadorequestありがとう！良い考え...回答へのリンクを追加しました^ _ ^
— Martin Turjak 14
2
+1 fkn巨大トリック!! ありがとう、なぜ＆＃xf002; font-family：FontAwesomeを追加することであることがわかったため、入力に表示されませんでした。あなたは私を救った：D
— itsme
44

これは、シンプルな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>
スニペットを展開

— エサンピル
ソース
10

FontAwesomeアイコンをdrupal入力に変換する方法を知りたい場合は、最初に次のようにdecode_entitiesを実行する必要があります。

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);
— トム・アップルシード
ソース
4

入力をボタン要素に変更すると、その要素で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;
}

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

— Cimmanon
ソース
1

上の回答と同様に、HTMLのvalue =セクションでUnicode文字を使用し、その入力要素のフォントファミリーとしてFontAwesomeを呼び出しました。一番上の答えがカバーしていないことを付け加えておきますが、私のvalue要素にはアイコンの後にテキストが含まれているため、フォントファミリーをFontAwesomeに変更すると、通常のテキストの見栄えが悪くなりました。解決策は、CSSを変更して代替フォントを含めることです。

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

このようにして、FontAwesomeはアイコンを取得しますが、アイコン以外のすべてのテキストには目的のフォントが適用されます。

— ジェフ・トラビラ
ソース
0 
.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>
— dxpkumar
ソース
0

素晴らしい新しいフォントのためのシンプルな方法 

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>
— アリ
ソース
-4

これをunicodeまたはfontawesomeで動作させるには、以下のようなクラスを含むスパンを追加する必要があります。これは、入力タグが：afterなどの疑似クラスをサポートしていないためです。これは直接的な解決策ではありません

HTML：

   <span class="button1 search"></span>
<input name="username">

CSSで：

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;   

}
— ウェブデザイナー兼プロモーター
ソース
7
あなたが
— スパンタグ
実際、ボタンの代わりにテキスト入力に適用することに関する唯一の答えは+1です。
— BorisOkunskiy 2014年
1
@incarnate実際には、この回答はスタイルを入力フィールドではなくスパンに適用しますが、MartinTurjakは上記の彼の回答で完全なソリューション（および追加の選択肢）を提供します。
— BobbyZ 2014
私は本当に意味のテキスト主体の状態ので、ここで入力し«私は、入力フィールドにフォント恐ろしいアイコンを追加するにはどうすればよいです？» —ボタンについては何も触れられていません。MartinTurjakは、テキストフィールドではなくボタンのスタイルを設定するための優れた方法を説明しています。
— BorisOkunskiy 2014年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.