スポンサーリンク
Font AwesomeはブログやWEBサービスでアイコンを表示させることが出来るサービスです。
ブログを書く上でデザイン性は重要です。パッとみて読み手も楽しく読める点がおすすめです。初心者には少し設定が難しく感じるかもしれませんが、導入して損はないと断言できます。
それでは説明していきます。
Font Awesomeとは？
先ほどアイコンを表示出来るサービスと説明しましたが初心者にはイメージしにくいと思うので導入すると、どのようなことが出来るか見本を作成します。
このようなアイコンを簡単に作成できるサービスがFont Awesomeです。
CDN（コンテンツデリバリーネット）を使う
CDNとはダウンロードとは違いサーバー上に設置されたもの自身のサイトで使うことができるサービスです。ダウンロードが必要ないのでAddQuicktagに登録していればすぐに使えます。
CDN使用準備
アイコンを使用するには指定のコードを<head>〜</head>の間にコードを埋め込む必要があります。
下記コード又は下記URLからコードをコピーして下さい。
|
1 |
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css |
<head>〜</head>タグに貼り付ける
外観→テーマ編集→header.phpまで行き＜head＞タグを探します。
＜head＞タグの直後に貼り付ければ完了となります。あとはアイコンを使うだけになります。
|
1 2 3 4 5 6 7 8 |
<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使ってみよう！
準備は整ったのでアイコンを選んでみましょう！
上記リンクからアイコンを選びます。
リンクをクリックするとアイコンが表示されるので選んでみましょう。
アイコンを選択するとコード表示されるのでコピーします。
これがこのアイコンを使用するコードになります。ワードプレスで使う場合投稿画面の「ビジュアル」と「テキスト」の２種類があるのでテキストで入力してください。
スポンサーリンク
|
1 |
<i class="fa fa-android" aria-hidden="true">文章入れる場所</i> |
貼り付けるとこのように表示されます。
サイズを調整する
デフォルトの場合だと小さくなるので大きくしてみましょう。
大きくするには下記のように入力します。
fa-lg（１．３３３倍）fa-2x（２倍） fa-3x（３倍） fa-4x（４倍） fa-5x（５倍）
|
1 2 3 4 5 6 |
<i class="fa fa-android" aria-hidden="true"></i> <i class="fa fa-android fa-lg" aria-hidden="true">１．３３３倍</i> <i class="fa fa-android fa-2x" aria-hidden="true">２倍</i> <i class="fa fa-android fa-3x" aria-hidden="true">３倍</i> <i class="fa fa-android fa-4x" aria-hidden="true">４倍</i> <i class="fa fa-android fa-5x" aria-hidden="true">５倍</i> |
１．３３３倍 ２倍 ３倍 ４倍 ５倍
色を変更する
デフォルトは黒っぽく地味な色なので色を変えてみましょう。
|
1 |
<i class="fa fa-android" aria-hidden="true">これはデフォルトです</i> |
|
1 2 3 |
<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>の場所に貼り付けてください。このタグを貼り付ければアニメーションアイコンが使えるようになります。
|
1 |
<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' /> |
アニメーションのクラス名
下記の例の場所にクラス名を入力してください。
|
1 |
<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」はつけない）
マウスオンの時だけ動かす
|
1 2 |
<p class="faa-parent animated-hover"> <i class="fa fa-android fa-4x green faa-wrench"></i> マウスオン</p> |
スポンサーリンク
コメントを残す