Font Awesomeのアイコン（WEBフォント）をフォームのボタンに使用する方法

2017/05/29 2017/05/31

WEBアイコンフォントで有名な「font-awesome」のアイコンを、をフォームのボタンに使用する方法を備忘録としてポストします。

CSS と UNICODE (ユニコード)を使う

<input type="button" value="&#xf0a8; 前画面に戻る" class="sample-back-btn" name="back">

1	<input type="button" value=" 前画面に戻る" class="sample-back-btn" name="back">

.sample-back-btn {
    font-family: FontAwesome;
}

.sample-back-btn {

font-family: FontAwesome;

}

ボタンの value に「」の様なコードを記述する事でアイコンを表示するのですが、これは使いたいアイコンフォントの詳細画面に書かれている UNICODE (ユニコード)です。

&# に続けて x、そして指定のコードを記述という形となります。

↑ ここに載っています。

なお、コードの一覧はこちらのページから確認することが可能です。

: wp-flickr-pressを使ってWordPressとFlickrを連携する方法

カメラで撮影した画像をせっせと写真用ストレージサービスのFlickrへアップロードしているのですが、ブログと連携してしまえば画像の貼り付けが楽になる上、サーバの容量も取らなくて済むではないかと気づいたので、WordpressとFlickrを連携する方法をご紹介。

なお、Flickrのアカウント取得については以前のポストを御覧ください。

: 【CSS】ラジオボタンの背景色を選択肢によって変更する方法

今までも何度か登場していますが、ラジオボタンの背景色。今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

: 「Chromユーザの皆様 Chromeユーザ調査」というフィッシングサイトに遭遇した

Google Chromeを使ってブラウジングしていると、突然、アンケートに答えるとプレゼントが当たる、というポップアップが表示される（恐らく）詐欺サイトに遭遇しました。

: HTML5のFile APIを使って、複数(の画像)ファイルをサーバにアップロードする方法。

HTML5のFile APIを使うと、複数ファイルのアップロードが簡単に出来るそうなので、試してみました。
対象のブラウザがモダンブラウザに限定されるようなのですが、妙に簡単に出来たのが印象的。

ちなみに、CakePHP2（2.3.6）でも動きました。