AWESOME(チートシートも)の使い方とその魅力を解説「CSSでアイコンを簡単に設置できる!」WEBって進化しているなあ、俺は退化していっているのに...。AWESOMEもその1つ。本サイトを見てみてください。AWESOMEの本サイトhttp://fortawesome.github.io/Font-Awesome/すごいですねえ。偉い!そう思ったのは使い方が解ってから...。最初はわけわからず、使い方もよくわからず、使ってみたがアイコン出てこないしで、何度かあきらめてました。使い方が解ってしまうと簡単。チートシートの使い方も解ればその使える幅は数倍にもなります。辛抱ですが、ここで覚えてしまいましょう。startedこのページに使い方は書かれています。頑張って解読すれば書かれていることはなんていうことはないとても簡単なものですが、一緒にやってみましょう。http://fortawesome.github.io/Font-Awesome/get-started/スクリーンショットにもあるように、以下のタグを<head>~</head>内に貼り付けるだけで、スタンバイOKです。href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">他にもやり方がありますが、わずらわしいのでこの一行で済ませてしまいましょう。※他のやり方というのは、フォント自体をダウンロードしてきて、自分のサイトにアップして使うことですが、別段すごいメリットがあるわけではないので、公開サーバーからリンクするだけで使える便利な方を選ぶのが得策です。使いたいところに以下のようなコードをとりあえず貼ってみましょう。fa-camera-retro"></i>ブラウジングして「」こんなアイコンが出てくれば、成功。使いたいフォントがあるでしょう。このコード内の「fa-camera-retro」を変更すればご所望のアイコンを表示させることができるんです。使いたいアイコンの探し方です。このページに行ってみてください。Iconshttp://fortawesome.github.io/Font-Awesome/icons/はい、盛りだくさんなアイコンたちを目にしたことでしょう。このアイコンたちが使いたい放題なんですね。世界中で使われているのでますます公共性の高いアイコンとなっていくでしょう。このスクリーンショットではページ内にある検索で「arrow」と打って「矢印」系のアイコンを探してみたところです。英語で探さなくちゃならないんですが、それくらいはへっちゃらですよね。使いたいアイコンをクリックすると、各アイコンの詳細ページへいけます。そこにタグが表示されていますので、それをコピーするだけ。このスクリーンショットの一番下に表示されているのがタグですね。fa-arrow-down"></i>通常の使い方は、たったこれだけです。classの値を変えるだけでアイコンが出るようになっているんですねえ。「fa-arrow-down」だったら下向き矢印。「fa-camera-retro」だったらレトロなカメラに。この値はアイコンごとに決まっているので、アイコン一覧画面で好きなアイコンを見つけたら、その先の詳細ページで見つけてね。一発で出来るってこともなかなかないわけで...。解らなかったらオラにコメントで質問でもしてくれよな!(野沢雅子風に)他にも使い方があります。以下に解説していきます。fa-5xアイコンの大きさをclassに「fa-2x」などと与えることで変えることができます。CSSでフォントサイズを変えてあげてもいいですが、classに記述するだけでいいので、ブログの更新などで使うときにはお手軽な方法ですね。アイコンの幅を揃えるリスト表示などに使うときには、「fa-fw」をclassに与えると使いやすいですよ、とも提示してくれています。ひとつひとつのアイコンの幅はすべて揃っているわけではないので、「fa-fw」をclassに与えると縦に並んだときにがたつくのを防ぐために幅を調整してくれるようになります。こんな感じになるよ、と例を出してくれています。http://fortawesome.github.io/Font-Awesome/examples/たしかにデザインやってるとこれには遭遇します。非常に行き届いてますね。アイコンを罫囲いする「fa-border」をclassに与えるだけで罫線で囲えます。アイコンを動かすもうこんなことまで出来るんですね。