上へ戻る

1分でCSSから簡単にアイコン表示!font awesomeが素晴らしい!

Pocket

20150410_1
ウェブサイトをデザインするときにメニュー部分に使うことが多いアイコン。

このアイコンをデータ量にすると大きくはないのですが、いちいち配置したりスライスしたりするのって結構面倒くさいですよね。

もしアイコンをただタグ置くだけで簡単に表現できるとしたら?しかも今のCSSをいじらずにただタグつけるだけだとしたら?

そんな魅力的な方法、font awesomeであれば解決できます。

使い方もとても簡単!font awesomeの使い方


font awesomeとはタグを設置すると、そのタグから読み込んだURLでアイコンを設定できるツールキットです。

使い方はとても簡単で、CSS読み込んでタグを設置するだけでできます。
参考リンク:Font Awesome, the iconic font and CSS toolkit


普通のCSSであればまずは下記のタグをhead間に入れて


アイコンを置きたい場所に

など使いたいアイコンのタグを入れるだけでOK。


例:←レトロカメラアイコン

アイコンの種類もバージョンが新しくなるほど増えてきており、先日あったアップデートでは更に40種類のアイコンが追加されました。


使用頻度が高そうなアイコン

ホームのアイコン
カメラのアイコン
コメントのアイコン
デスクトップのアイコン
メールのアイコン
フォルダのアイコン
skype


探せば探すほど「これ使いたかったやつ!」という感じで種類が豊富ですし、簡単ですし素晴らしい。

これまでPhotoshopでアイコン設置してスライスしていた方も画面サイズによる劣化もないのでぜひお試しあれ(劣化がないというのが一番の強みかも。)。

あわせて読みたいお勧め記事


    Fatal error: Uncaught Error: Call to undefined function split() in /home/japanese2017/start-now.link/public_html/100/wp-content/themes/basetheme/single.php:74 Stack trace: #0 /home/japanese2017/start-now.link/public_html/100/wp-includes/template-loader.php(74): include() #1 /home/japanese2017/start-now.link/public_html/100/wp-blog-header.php(19): require_once('/home/japanese2...') #2 /home/japanese2017/start-now.link/public_html/100/index.php(17): require('/home/japanese2...') #3 {main} thrown in /home/japanese2017/start-now.link/public_html/100/wp-content/themes/basetheme/single.php on line 74