テーマを「SANGO」に変更しました。

【STINGER5】検索ボタンをアイコンフォントに変更する方法

eyecatch-customize-searchbutton-stinger5

どうも、(@nekonotesou)です。

STINGER5の検索ボタンを、画像からアイコンフォントに変更しました。

customize-searchbutton-stinger5

searchform.phpの編集

<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search.png" alt="検索" id="searchsubmit"  value="<?php _e('Search', 'kubrick'); ?>" />

上のコードを、以下のコードに書き換えます。

<input type="submit" id="searchsubmit" value="&#xf002;"  />

 

style.cssの編集

以下のコードを追加。

input#searchsubmit {
font-family: FontAwesome;
}

 

検索ボタンのデザインを変更する

/*--------------------------------
検索フォーム
--------------------------------*/
aside #search {
	padding-bottom: 0px;
	position: relative;
	width: 100%;
}
#s {
	height: 33px;
	color: #333;
	font-size: 14px;
	border-radius: 0;
	border : #333 solid 1px ;
	background-color: #fff;
	z-index: 10;
	padding: 5px 65px 5px 5px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
}
#searchsubmit {
	border-radius: 0;
	background: none;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50px;
	height: 33px;
	z-index: 20;
	border: solid 1px #333;
}
*:first-child + html #searchsubmit {
	top: 1px;
}

さいごに、サイトのデザインに合わせてcssを編集。

 

コメントを残す