Font Awesomeの使い方-初心者でも使えるwebアイコンフォント

スポンサーリンク

Font AwesomeはブログやWEBサービスでアイコンを表示させることが出来るサービスです。

ブログを書く上でデザイン性は重要です。パッとみて読み手も楽しく読める点がおすすめです。初心者には少し設定が難しく感じるかもしれませんが、導入して損はないと断言できます。

それでは説明していきます。

Font Awesomeとは?

先ほどアイコンを表示出来るサービスと説明しましたが初心者にはイメージしにくいと思うので導入すると、どのようなことが出来るか見本を作成します。

このようなアイコンを簡単に作成できるサービスがFont Awesomeです。

CDN(コンテンツデリバリーネット)を使う

CDNとはダウンロードとは違いサーバー上に設置されたもの自身のサイトで使うことができるサービスです。ダウンロードが必要ないのでAddQuicktagに登録していればすぐに使えます。

AddQuicktag使い方-記事作成の効率がアップするwordPressプラグイン

2017年7月16日

CDN使用準備

アイコンを使用するには指定のコードを<head>〜</head>の間にコードを埋め込む必要があります。

下記コード又は下記URLからコードをコピーして下さい。

BootstrapCDN

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

 

<head>〜</head>タグに貼り付ける

外観→テーマ編集→header.phpまで行き<head>タグを探します。

<head>タグの直後に貼り付ければ完了となります。あとはアイコンを使うだけになります。

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
ここに貼ればOKです!
a
a
a
a
</head>

Font Awesome使ってみよう!

準備は整ったのでアイコンを選んでみましょう!

The Icons

上記リンクからアイコンを選びます。

リンクをクリックするとアイコンが表示されるので選んでみましょう。

アイコンを選択するとコード表示されるのでコピーします。

スポンサーリンク

これがこのアイコンを使用するコードになります。ワードプレスで使う場合投稿画面の「ビジュアル」と「テキスト」の2種類があるのでテキストで入力してください。

<i class="fa fa-android" aria-hidden="true">文章入れる場所</i>

サイズを調整する

デフォルトの場合だと小さくなるので大きくしてみましょう。

大きくするには下記のように入力します。

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

<i class="fa fa-android" aria-hidden="true"></i>





色を変更する

デフォルトは黒っぽく地味な色なので色を変えてみましょう。

<i class="fa fa-android" aria-hidden="true">これはデフォルトです</i>
<i class="fa fa-android fa-4x blue" aria-hidden="true">青</i>
 <i class="fa fa-android fa-4x red" aria-hidden="true">赤</i> 
<i class="fa fa-android fa-4x green" aria-hidden="true">緑</i>

このように色の指定コードを入れてあげれば色の変更が可能になります。

動きを付ける

動きを付けるアニメーションに必要なタグのコードはこちらです。

先ほどと同じように<head>〜</head>の場所に貼り付けてください。このタグを貼り付ければアニメーションアイコンが使えるようになります。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css' type='text/css' media='all' />

アニメーションのクラス名

下記の例の場所にクラス名を入力してください。

<i class="fa fa-twitter 動きを付けるクラス名を記載"></i>

fa-spin

faa-wrench animated

スポンサーリンク

faa-ring animated

faa-horizontal animated

faa-vertical animated

faa-flash animated

faa-bounce animated

faa-spin animated

faa-float animated

faa-pulse animated

faa-shake animated

faa-tada animated

faa-passing animated

faa-passing-reverse animated

faa-burst animated

角度を変えるクラス名はこちらです。

fa-rotate-90:90度傾ける fa-rotate-180:180度傾ける fa-rotate-270:270度傾ける fa-flip-horizontal:水平方向に反転 fa-flip-vertical:垂直方向に反転

マウスオンの時だけ動かす

親要素に「faa-parent animated-hover」というclass名を追加

アイコンには「faa-◯◯」というclass名だけ追加(「animated」はつけない)

マウスオンの時だけ動かす

<p class="faa-parent animated-hover">
<i class="fa fa-android fa-4x green faa-wrench"></i> マウスオン</p>

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です