アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

1. メールアドレスでアカウントを取得する
2. アイコンを利用するためのキット番号を取得
   • アカウント取得後は”Manage Kitのリンク先で確認できる
3. アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
4. Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
5.  アイコンを利用する場所にコピーしたタグを張り付ける
6. 必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

CSS

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

1. サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
2. そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

また、表示させるテキストも自由に設定できる。