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>
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
FontAwsomeの問題は、スタイルシートが:before
疑似要素を使用して要素にアイコンを追加することです。また、input
要素では疑似要素が機能しない/許可されません。これが、input
でFontAwesomeを通常の方法で使用できない理由です。
しかし、解決策があります-FontAwesomeを通常のフォントとして使用できます:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
グリフはvalue
属性の値として渡すことができます。個々の文字/アイコンのASCIIコードはFontAwesome cssファイルで見つけることができます。それらを\f002
から
のようなHTML ASCII番号に変更するだけで機能します。
FontAwesomeasciiコードへのリンク(cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
アイコンのサイズはfont-size
で簡単に調整できます。
Jsfiddeでinput
要素を使用した上記の例を参照してください。
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のコメントと更新されたフィドルへのリンクを参照してください。ありがとう!
以下は、シンプルなCSSと標準フォントの素晴らしい構文、Unicode値などの必要なしで動作するソリューションです。
<input>
タグを作成し、その後に必要なアイコンを含む標準の<i>
タグを作成します。
相対的な位置付けとより高いレイヤー次数(z-index)を使用し、アイコンを入力フィールドの上および上に移動します。
(オプション)標準の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>
FontAwesomeアイコンをdrupal入力に取得する方法を知りたい場合は、最初に次のようにdecode_entitiesをデコードする必要があります。
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
入力をボタン要素に変更すると、その要素でFont Awesomeクラスを使用できます。グリフの配置はデモでは素晴らしいものではありませんが、アイデアは得られます。
<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つのように見える要素のイベントハンドラーを追加することなく、フォームが完全に機能することです。
.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>