fontawesomeで簡単にかっこいいアイコンを使おう!

Image

blogのデザインをもちょっとなんとかしよう、いつか…と思っています。デザインは素人ですのでなんとか手間をかけずにかっこよくしたいと考えました。

そこで、何度か聞いたことがある fontawesome を使って簡単にかっこよくできるのではないか?と挑戦してみました。fontawesome というのはフォントでアイコンを表してくれるアイコン集です。アイコンを統一したデザインにすることができ、そのことでちょっとかっこいいサイト、みたいに見えるのではないかな~と思いました。

使い方はとても簡単で、WordPressだけでなく、XOOPS CubeNetCommonsでも使えることが分かりましたのでそれについても書いてみました。

*ところでawesome(オーサム)って辞書で引いてもいまいち実際に使われてる用法と違う気がしてたんですが、このサイトを見て納得しました。
awesomeの意味 – ネイティブが説明します

WordPress、XOOPS Cube、NetCommonsでfontawesomeを使う準備

基本的には<head></head>の中に、fontawesomeのCSSをlinkするだけなのですが、どのファイルでそれをやるかということを書いてみます。

</head>の直前に

という行を挿入するだけで準備は完了です。
* 4.1.0というのは2014/05/22現在の最新バージョン番号なので、新しいバージョンが出たらここを新しい番号にすれば追加されたフォントが使えるようになります。

以下は、各CMSでどのファイルのの直前にに入れればいいかという、ファイル名です。

WordPress
使っているテーマのフォルダにある header.hpp

XOOPS Cube
使っているテーマのフォルダにある theme.html

NetCommons
html\webapp\templates\main\header.html
NetCommonsの場合、修正後に管理画面でモジュールの一括アップデートをしてください。

fontawesomeのアイコンを使うにはホームページからコードをコピペすればOK

fontawesomeのアイコンを使うにはホームページからコードをコピペすればすぐに使えるようになります。

Image

上記、fontawesome のページに行きます。

Image

上部にある Icons をクリックします。

Image

Iconが新着とカテゴリー別に表示されています。使ってみたいアイコンをクリックします。

Image

coffeeアイコンを表示してみたいと思います。クリックすると、

Image

coffeeアイコンのページに行きます。使用例と使用方法(コーディング)の組み合わせを見ることが出来ます。下にあるコード

をコピーして、CMSや通常のhtmlに貼り付けます。

  • NetCommonsの場合、内容が空のタグは削除されてしまうので、全角スペースの記号を入れてみました

それぞれの表示はこんな感じです。

WordPress
Image

XOOPS Cube
Image

NetCommons
Image

どれも同じようにアイコンが表示されました!

fontawesomeで色々なIconを表示する

最初は上記のようにコピペしますが、使い方が分かるのでいちいちそうする必要もなさそうです。

上記の fa-coffee の部分に、Iconページで見つけた好きなアイコンの名前を入れれば表示されます。

例えば

と書けば、

についてblogを書いたら、一息ついて でも飲みますか♪

と、表示されます。

大きさを指定する

fontawesomeは様々な使い方が出来るようです。

Examples

に、色々な使い方が掲載されています。

一番使うかな~と思う、大きさの指定はこんな感じでした。

Image

通常の大きさより、5段階まで大きくなるようです。

のように大きさを指定すると、

についてblogを書いたら、一息ついて でも飲みますか♪

と表示されました。

あと、フォントなので、

こんな風に指定すれば、

についてblogを書いたら、一息ついて でも飲みますか♪

色も変わりますね!

fontawesomeを使ってblogをかっこよくする!

色々試すために、通常の投稿でばかりfontawesomeを使いましたが、本来は「blogのデザインをかっこよくしたい!」というのが目的でした(色々楽しくてちょっと忘れていました(^_^;)。

もくろみとしては h2タグやh3タグの装飾や、左ブロックのサブメニューの頭に付けたりして視覚的に分かりやすくしたいと思っています。

使い方は分かったので、近いうちにちょっとずつデザインを変更していく予定です♪

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] fontawesomeで簡単にかっこいいアイコンを使おう!(ゆうそうと) […]

トップへ戻る