Warning: count(): Parameter must be an array or an object that implements Countable in /home/zonodesign/zono-design.com/public_html/wp-includes/post-template.php on line 284
便利ツール

Font Awesomeの使い方

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

Font Awesomeとは?

Font Awesomeは、ネット上で公開されている様々なアイコンを、Webフォントとして利用することができます。
アイコンをフォントとして使えるため、CSSで調整することで、簡単に色や大きさを変更することができます。
画像ではないので、いちいち用意しなくてすむので楽になります。

使い方

wordpressでの使い方です。

1.header.phpに下記のコードを追加する

コードのcssが古いと表示されないアイコンがでてくるので、cssが最新かを確認してから追加しましょう!

2.アイコンを選んでコードをコピー&ペースト

Font Awesomeのサイトへ行き、iconsのページへいきます。
するとアイコンがずらりと並んでいますので、使いたいアイコンを選びます。クリックするとコードが書いてあるページへ飛ぶので、そこに書いてあるコードをコピーして、自分のサイトの使いたい場所へペーストします。

3.大きさの変更の仕方

fa-lg (1.333…倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)

fa-◯xの数字の部分を変更するだけで大きさが変えられるようになっています。便利ですね。

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

ホームページ制作ならzono design千葉

打ち合わせを通して、単にカッコイイサイトだけでなくユーザーに快適に使って頂ける最適なオリジナルのホームページを作成致します。
お客様の用途に合わせて考えていきます。
テンプレートでは作成できない自由なデザインが可能となっておりますので、ホームページ製作の際にはご要望をお伝え下さい。

ホームページ作成、WEB製作、WEB集客でお困りの方はお気軽にご相談下さい。

メールでのお問い合わせはこちら