WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「アイコン」での検索

Font AwesomeのWEBフォントをフォームのボタンに使用する

Font AwesomeのWEBフォントをフォームのボタンに使用するには以下のようにします。

● 1. Font Awesomeのインストール

http://fortawesome.github.io/Font-Awesome/ からダウンロードしてきてサーバにアップロードします。

HTML(ヘッダ)

<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">

で読み込ませます(ディレクトリは適宜書き換えてください。)

フォームのHTML

<input type="button" class="fontawesome_submit" value="&#xf002; ボタンのテスト">

フォームのCSS

.fontawesome_submit{
    font-family: FontAwesome;
}

以上でOKです。簡単ですね。

&#xf002;

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。

●2. Font Awesomeのコード確認表

http://fortawesome.github.io/Font-Awesome/cheatsheet/

No.942
05/23 13:06

edit

Bootstrap
アイコン

No.244
05/18 18:41

edit

アイコン