Awesome」のバージョン4.0.3をもとに書かれています。バージョンアップにより内容が変更されている場合もありますので、その際は公式サイトを確認してください。Awesome」とは、Web上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものです。利用頻度の高いアイコンをはじめ500以上ものアイコンフォントが用意されています。CSS3でアイコンフォントの装飾を設定できる機能も提供されており、フォントの大きさや回転アニメーション・角度指定・重ね表示など簡単に設定することができます。Awesome」を利用したサンプルになります。このように簡単に設定できる手軽さが魅力です。Awesome」の初期設定こちらでは、まずダウンロードの方法とアップデートについての注意点について解説しています。1以下のURLにアクセスして、トップページの「Download」をクリックします。Awesome公式サイト2ポップアップ画面が表示されたら、「Download」をクリックします。クリックするとZIP形式の圧縮された状態でダウンロードされるのでファイルを解凍します。ちなみにバージョン4.0.3の場合は「font-awesome-4.3.0.zip」でダウンロードされます。ファイルを解凍すると以下のような構成になっています。この中の「cssフォルダ」「fontフォルダ」をサーバーへアップロードします。Awesome」を利用しています。「CSSフォルダ」には「font-awesome.css」「font-awesome.min.css」の2つのファイルがありますが、「font-awesome.min.css」は圧縮した状態のファイルなので、特に問題がなければサイズが小さい「font-awesome.min.css」をアップロードしましょう。「CSSフォルダ」と「fontフォルダ」はデフォルトでは同じ階層にアップロードしますが、場合によっては他のディレクトリにアップロードしたい場合もあります。そのような場合は、cssファイル内で「fontフォルダ」のアイコンフォントを相対参照させている箇所があるので、こちらを変更します。normal;}変更する箇所は、CSS3の「@font-face」になります。こちらはWebフォントを指定するための@規則でフォントを指定しているURLを変更します。Awesome」の使い方ここからは、実際の設定方法について詳しく解説しています。1「font-awesome.min.css」を参照まずは、アイコンフォントを利用できるようにcssの設定をします。記述する場所はhead要素内でlink要素を利用してcssファイルを参照します。rel="stylesheet">...</head>これにより、先ほど「@font-face」で設定したアイコンフォントが参照されます。Awesome」のアイコンフォントの表示方法では、「:before擬似要素」を利用しています。「:before擬似要素」は、CSS2.1から実装された擬似要素でIE7・IE6には対応していません。Awesome」の古いバージョンには、IE7専用のCSSが用意されていますので、IE7にも対応したい場合は、そちらを導入します(バージョン4.0.3には含まれていません)。以下はIE7にも対応しているバージョン3.2.1になります。Awesomeのバージョン3.2.1IE7に対応したい場合は、以下のように「font-awesome-ie7.min.css」も併せて設定します。対応しているのはIE7だけでIE6以下には対応していません。Awesomeファイルを読み込むこともできます。こちらも同様にlink要素に以下のように設定します。次に利用するアイコンフォントを確認します。500以上のアイコンフォントが用意されていますが、全てのコードを把握するのは困難です。こちらでは、簡単にアイコンフォントを確認する方法を紹介します。Awesome」サイト上部メニューの「Icons」をクリックします。クリックすると、アイコンフォント一覧が表示されますので、利用したいアイコンフォントをクリックします。次にアイコンフォントの表示結果と利用方法が掲載されているページに移動します。そこに掲載されているHTMLソースのクラス名が特定のアイコンフォントの設定になります。こちらの例では「fa-gratipay」がハートアイコンのクラス名です。アイコンフォントギャラリーアイコンフォントの確認方法を紹介しましたが、これが以外とめんどうな作業です。流れとしては「アイコンフォント一覧表示→クリック→アイコンフォント詳細表示→コピー」ですが、実際にどのアイコンがサイトに合っているのか何度も設定変更することもあり手間になります。そこで、アイコンフォント一覧から簡単にHTMLソースをコピーできるページを作成しました。Awesomeのアイコンフォントギャラリー」にアクセスして、ほしいアイコンフォントのボタンをクリックするだけになります。3アイコンフォントを表示それでは、実際にアイコンフォントを表示させてみましょう。fa-gratipay"></i>」を設定してみると以下のように表示されます。ハートアイコンこちらでは、i要素にクラス名を設定することで簡単にアイコンを表示できました。fa-gratipay">ハートアイコン</i>公式サイトではi要素を空要素として利用していますが、以下のように他の要素にクラス名を設定して利用することもできます。fa-gratipay">ハートアイコン</p>アイコンフォントを簡単に表示させることはできましたが、実際にどのように表示されているのかクラスのスタイルを確認してみます。0);}クラス「fa」は、アイコンフォントの初期設定になります。こちらを基準にクラスを追加していくことで様々な機能を利用できます。"\f184";}クラス「fa-gratipay」には、「:before擬似要素」が設定されています。スタイルはcontentプロパティが設定されており、アイコンフォントのユニコードが指定されています。これにより要素の直前にcontentプロパティでアイコンフォントを表示させているのが分かります。他のアイコンフォントの設定も同様のスタイルが設定されており、以下のように「fa-****」の形式でクラスが割り振られています。"\f230";}ここまでが基本設定になります。次は、サイズの変更設定を解説していきます。参考書籍HTML5&CSS3デザインブックHTML5×CSS3でスマホとタブレットにほぼ完全に対応したレスポンシブデザインを本格的に学ぶことができる。Webページを制作していく上で、Font-Awesomeによるアイコンフォントの使い方など様々なテクニックがまとめられている。スマートフォンなど多様なデバイスに対応しており、使い勝手や見栄えを向上させるTipsをたくさん学べる。独自でアイコンフォントのクラスを設定する方法アイコンフォントギャラリーまとめITの壺とはITの壺とは僕のIT・Web知識の備忘録である。忘れることは当たり前と割り切る僕は、この壺に宝物を隠すかのように学んだ知識を詰め込んでいく。料理ファンレターを送るメッセージを送りたい方はこちらからお願いします。返信が必要な場合は、本文にメールアドレスを記載してください。返信するとは限りません。