Webページの作成をする上で、最近欠かせなくなってきているのが、Fontawesomeのフォントアイコンです。
画像のアイコンを使用するより、拡大縮小の劣化に影響されないし、カラーの変更も簡単なので本当に重宝しています。
フォントアイコン
これはもう、使い始めたら楽すぎてちまちまアイコンなんか作ってられません！
私が好きなのは
fontawesome
基本的なアイコンはこれで揃うんじゃないでしょうか。
メニュー用のアイコンだけでなく各種SNSのアイコン始め様々なアイコンが揃っています。
アイコン一覧はこちら
[su_button url=”http://fontawesome.io/” style=”flat” background=”#ED1E79″ size=”5″ text_shadow=”0px 0px 0px #ffffff”]fontawesomeアイコン一覧[/su_button]
fontawesomeをページ内で使用する方法
fontawesomeをhtmlページ内で使用する場合を解説します。
ダウンロード
まずダウンロードページから必要な一式を丸々ダウンロードします。
こちらからダウンロードすることができます。
[su_button url=”http://fontawesome.io/” style=”flat” background=”#ED1E79″ size=”5″ text_shadow=”0px 0px 0px #ffffff”]ダウンロードページへ[/su_button]
設定方法
本家サイトではこちらから確認することができます。
Get Started
worldpressでは、プラグインが出ていますので、そちらをインストールするだけでアイコンを使用することができます。
CDNでの利用も可能です。
CDNはBootstrap CDNで提供されています。
Bootstrap CDN
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
ダウンロードファイルを使用する場合
<!--fontawesome-->
<link href="css/font-awesome.min.css" rel="stylesheet"><head> ... </head> 内に下記を記述します。
フォルダに入れる場合は、ダウンロードしたものを私はそのまま入れています。
Version 4.7.0
- css
- font-awesome.min.css
- scss
- _animated.scss
- _bordered-pulled.scss
- _core.scss
- _fixed-width.scss
- _icons.scss
- _larger.scss
- _list.scss
- _mixins.scss
- _path.scss
- _rotated-flipped.scss
- _screen-reader.scss
- _stacked.scss
- _variables.scss
- font-awesome.scss
- less
- animated.less
- bordered-pulled.less
- core.less
- fixed-width.less
- font-awesome.less
- icons.less
- larger.less
- list.less
- mixins.less
- path.less
- rotated-flipped.less
- screen-reader.less
- stacked.less
- variables.less
- fonts
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
- fontawesome-webfont.woff2
アイコン表示方法
アイコンを表示させたいところにタグを挿入します。
挿入タグ
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
こちらはアイコン一覧で挿入したいアイコンをクリックすると、コードが確認できます。 私はコピペしてそのまま入れていることが多いです。
worldpressでは、もっと楽にエディターで使えるものなどもありますので、ぜひ活用してみてください。
アイコンは様々な使用方法もありますので、
fontawesome Example
こちらのページもぜひチェックしてみてください。