92

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>
4

8 に答える 8

117

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

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

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

クイックCSS :

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

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

少しスタイルを良くして、イベント機能を i オブジェクトに追加でき<button type="submit">ますi。

ボタンのソリューションは次のようになります。

<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。これが、FontAwesome を通常の方法で使用しても では機能しない理由inputです。

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

CSS:

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

HTML:

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

valueグリフは、属性の値として渡すことができます。個々の文字/アイコンの ascii コードは FontAwesome css ファイルにあります。これらを HTML の ascii 番号に変更するだけで\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 のコメントと更新されたフィドルへのリンクを参照してください。ありがとう！

于 2013-04-13T13:49:26.890 に答える
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;
}

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

于 2013-04-13T14:02:41.593 に答える