HTML

CSS WEBアイコンフォントの使い方 Font Awesomeの活用

Sponsored Link

Sponsored Link

Font Awesomeを活用してアイコンを効果的に使うには

WEBアイコンを活用するにはFont Awesomeが便利です。

有料と無料が会って有料のほうが遥かにたくさんのアイコンを使うことができますが。

とりあえずは無料で試してみて。
そこから必要があれば有料版に移行すれば良いと思います。

有料版と言っても一回60ドル払えばずっと使えますので。
使用頻度が高い方には有料版のほうがおすすめ^^;

画像をクリックするとFont Awesomeのページに飛びます。

記事を書いているときのバージョンは5.8.2です。

それでトップページの上の方で無料か有料を選ぶことができますが。
英語で書かれているためにアイコンの場所がわかリにくいという方がいらっしゃったので。

簡単に説明しておきます。
アイコンにはいくつかのクリックする場所があるんですが。
とりあえず先の画像の一番下の下のバージョンが書かれている隣に1,515 Free Iconというところがありますので。
そこをクリックすると無料で使えるすべてのアイコンが表示してあるページに行くことができます。アイコンをよく使う方はこのページをブックマークしておくと良いです。
このページですね。
そこにあるアイコンのいずれかをクリックすると
例えば以下のような画面が出てきまして。


無料の場合は灰色のアイコンだけが取得可能です。

それでCSSには左上の以下の部分、アイコンのコードを貼り付けます。

<h1>
     	<i class="fab fa-500px"></i>インコは可愛いよ     
 </h1>

それともう一つ下準備がありますので。
それを行っていれば以下のように表示されます。

 

アイコンを貼り付けるための下準備

ただしこれが有効になるためには下準備が必要です。
アイコンをサーバーに直接読み込む方法と外部においてあるアイコンを呼び出すやり方があります。
一般に使われるのはCDNというもので。
外部の(ここではFont Awesome)専用のサーバー上にあるアイコンデータリンクを張って
自分のWebサイトに表示させる仕組みです。
これだとアイコンをダウンロードして自分のサーバーにアップロードしなくても使えますし。
アイコンが増えたからと言っていちいちダウンロードする必要がありませんので楽です。

今記事ではCDNでアイコンを表示させてみます。

その場合。
CSSのときと同じ様にアイコンを保存してある場所に対してリンクを貼らなくてはなりません。

リンクについてはFont Awesomeのサイトに指定しててありますのでそれをブログやWebサイトの<head>タグの中に貼り付けます。

先程のトップページのStart Using Freeのボタンをクリックすると以下のページが出てきます。

そこに置いてあるリンクをコピーし貼り付けるわけです。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

WordPressや無料ブログでは場所が決まっています。

例えばWordPressであれば
[ダッシュボード]⇒[外観]⇒[テーマエディター]

⇒右側のバーの[header.php]に行き<head>タグ内に貼り付けます。

今回は記事のhtml に直接貼り付けてみました。

その上でアイコンのコードを好きなところに貼り付けただけで

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
 <body>    
     <h1>
     	<i class="fab fa-500px"></i>インコは可愛いよ     
    </h1>    
   
</body>
</html>

こんなふうになるというわけです。

アイコンの大きさを変えたり色を変えたり、様々変化させる方法

アイコンは決まった色や大きさでなくてはいけないというわけではなく。
CSSを使って様々に変えていくことができます。

アイコンの大きさを変える

大きさを変えるには以下のコードをi class="〜"内に書きます。

定番

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

実際にたとえば爆弾のアイコンをHTMLに記述してみます。

<p><i class="fas fa-bomb fa-lg">1.333…倍</i></p>
<p><i class="fas fa-bomb fa-2x">2倍</i></p>
<p><i class="fas fa-bomb fa-3x"></i>3倍</p>
<p><i class="fas fa-bomb fa-4x"></i>4倍</p>
<p><i class="fas fa-bomb fa-5x"></i>5倍</p>

すると以下のようになります。

1.333…倍

2倍

3倍

4倍

5倍

大きさを自分で決める場合

上記に該当しない大きさのアイコンを設置したい場合には
fa-lgなどの代わりに自分で名前をつけてCSSでサイズを指定することができます。

例えばHTMLが以下のように記述されている場合。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
 <body>    
     <h1>
     	<i class="fas fa-crow big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow small"></i>でもうんちを所構わずするからそれが問題だね</p>     
   
</body>
</html>

その前に繰り返しになりますが。
headタグ内にアイコンが置いてある場所のリンクを貼る必要があります。
WordPressの場合は全体に効果が及ぶような場所にリンクを貼り付けましたが。
先程のHTML の記述はエディタに書き込んでいますので。直接そのページにリンクを貼っています。

その上でアイコンのコードの先ほどfa-2x などと記述した場所に自分で目印を付けます。

例えばclassにbig と small という名前を付けました。

<h1>
<i class=”fas fa-crow big“></i>インコは可愛いよ
</h1>
<p><i class=”fas fa-crow small“></i>でもうんちを所構わずするからそれが問題だね</p>

その上でCSSに以下のように記述をし。
アイコンの大きさを指定します。

大きいやつは文字標準の8倍、小さいものは2倍にしました。

.big{	  
	font-size:8em;
}
.small{
	font-size: 2em

}

すると以下のように表示されます。

アイコンの色を変える

アイコンの色を変えるときには大きさを決めるときと同じく。
iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。

先程の記述で大きさにプラスして色を指定してみます。

.big{	  
	
	color: red;
	font-size:8em;
}
.small{
	
	color: green;
	font-size: 2em;

}

すると以下のようにブラウザ表示されます。

表示角度を変えたり反転させたり線で囲う

表示角度を変える

fa-rotate-○を加えるだけです。
○には角度を入れます。

先ほどのHTMLにfa-rotate-○を加えてみます。

上のアイコンだけ90度回転するようにしてみました。

<h1>
     	<i class="fas fa-crow fa-rotate-90 big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow small"></i>でもうんちを所構わずするからそれが問題だね</p>

すると以下のようにブラウザ表示されます。

更に下の小さいアイコンを180度させると

  <h1>
     	<i class="fas fa-crow fa-rotate-90 big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow fa-rotate-180 small"></i>でもうんちを所構わずするからそれが問題だね</p>

以下のようにブラウザ表示されます。

反転させる

以下をiタグに加えるだけです。

fa-flip-horizontal:水平方向に反転
fa-flip-vertical:垂直方向に反転

先程の機銃の続きで大きいアイコンを水平方向に反転させてみます。

 <h1>
     	<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow fa-rotate-180 small"></i>でもうんちを所構わずするからそれが問題だね</p>

すると以下のようにブラウザ表示されます。

次に下の小さなアイコンは垂直反転させてみます。

<h1>
     	<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow fa-rotate-180 fa-flip-vertical small"></i>でもうんちを所構わずするからそれが問題だね</p>

ブラウザ表示は以下。

アイコンを線で囲う

fa-borderを足すだけです^^;

上の大きなアイコンだけ囲ってみます。

    <h1>
     	<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal fa-border big"></i>インコは可愛いよ     
    </h1>
    <p><i class="fas fa-crow fa-rotate-180 fa-flip-vertical small"></i>でもうんちを所構わずするからそれが問題だね</p>

ブラウザ表示は以下。

アイコンを重ね合わせる

divタグやspanタグで親の要素ブロックを作り。
それにidやclassでfa-stackと名前をつけます。

そしてその中にアイコンのコードを書き、
fa-stack-1xとかfa-stack-2xで順番を指定します。

例えば以下のような感じです。

りんごと鳥のアイコンでやってみました。

 <div class="fa-stack">
 	
    <i class="fas fa-apple-alt   fa-stack-1x big"></i>
    <i class="fas fa-crow fa-stack-2x small"></i> 
  
 
</div>

アイコンのコードに順番を決めるfa-stack-1xとかfa-stack-2xを加えます。
また色や大きさをCSSで指定したいのでそれぞれコードにbigとsmallという名前をつけました。

CSSは以下。

りんごのアイコンの色は朱、大きさを8em.

鳥の色は緑。起きさを4emとしました。

.big{	  
	
	color: red;
	font-size:8em;
}
.small{
	
    color: green;
    font-size:4em;

}

ブラウザ表示は以下。

ツイッターの鳥のアイコンを加えてfa-stack-2xと二番目に追加して加えてみると

 <div class="fa-stack">
 	
    <i class="fas fa-apple-alt   fa-stack-1x big"></i>
    <i class="fas fa-crow fa-stack-2x small"></i> 
    <i class="fab fa-twitter fa-stack-2x"></i>
 
</div>

こんな感じでブラウザ表示されました。

アイコンの間隔を空ける

5つアイコンを並べてみます。

HTMLは以下。

<p><i class="fab fa-500px"></i>インコは可愛い</p>

<p><i class="fas fa-adjust"></i>インコは可愛い</p>

<p><i class="fab fa-adn"></i>インコは可愛い</p>

<p><i class="fas fa-female"></i>インコは可愛い</p>

<p><i class="fab fa-adobe"></i>インコは可愛い</p>

この場合4番だけ不揃いですので。
その修正で一番簡単なのはアイコンコードの後に半角スペースを入れることです。

これでテキストは一直線に揃いました。

ただアイコンが端っこに寄っています。

きれいに並べるためには

fa-fw

というクラスを追加で記述するときれいにアイコンが真ん中にきます。

先程のように半角スペースは入れずに4番めアイコンのクラスに

fa-fw

を入れてみます。

<p><i class="fab fa-500px"></i>インコは可愛い</p>

<p><i class="fas fa-adjust"></i>インコは可愛い</p>

<p><i class="fab fa-adn"></i>インコは可愛い</p>

<p><i class="fas fa-female fa-fw"></i>インコは可愛い</p>

<p><i class="fab fa-adobe"></i>インコは可愛い</p>

すると以下のようにブラウザ表示されます。


4番目の水色の枠は見やすくするためにこちらで入れたもので、実際にブラウザに表示されているわけではありません^^;

アイコンをアニメーションで動かす

アニメーションの中にはコードにclass名を書き込むだけで動くものがあります。
例えばくるくると回転させる場合です。
fa-spin

というクラスを書き込むだけです。

先程のHTMLの一番上のアイコンコードにfa-spinを追加してみます。

<p><i class="fab fa-500px fa-spin"></i>インコは可愛い</p>

すると以下のようになります。

『Font Awesome Animation』という専用のスタイルシートを読み込むことで
他にもたくさんのアニメーション効果を表示ができる様になります。

以下をheadタグに加えます。
これをまずしないとanimatedで示されるclassが効きません

<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" />

これで動かせるアニメーションアイコンのclassには以下のようなものがあります。

これは

Font Awesome Animation

というページをキャプチャしてGIFにしたものなんですが

On DOM lordは常にアイコンが動いている状態を表します。

<i class=”fab fas fa-wrench faa-wrench animated“></i>

というようなコードで記述をします。

この例で行くとFont Awesome Animation

のwrenchアイコンの場所にあるコード

にアニメーションのclass名を加えたものです。

つまり

<i class=”fab fas fa-wrench  faa-wrench animated“></i>というふうに。
選んだアイコンコードの中に動き方を指定するために〇〇animatedというアニメーションのclassを付け加えます。
5倍の大きさで記述をし

<i class="fab fas fa-wrench faa-wrench animated fa-5x"></i>

表示してみると以下のようになります。

ずっと動き続けています。

On hoverはアイコンにカーソルを載せたときのみ動きます。

hoberは空中に停止する、という意味で、この場合on hoberはカーソルがアイコンの上にある状態を指します。

カーソルがアイコンの上にあるときだけアイコンが動く状態にするということです。

このようにするには先程のアニメーションをさせるためのclass,faa-wrench animatedなどの後ろにあるanimatedを

animated-hover

に変更するだけです。

先程のレンチに-hoverを加えてみます。

<i class=”fab fas fa-wrench faa-wrench animated-hover fa-5x“></i>

見やすいようにアイコンの大きさを5倍に指定してあります。
以下の↓アイコンにカーソルを当ててみてください。動き始めます。

 

On parent hoverは親要素にカーソルを合わせたときだけアイコンが動きます。

<p class="faa-parent animated-hover">
  <i class="fab fas fa-wrench faa-wrench fa-5x "></i> ここにカーソルを当てたときだけアイコンが動くよ^^;
</p>

ます親要素であるタグに以下のような記述を行います。

<タグ class=”faa-parent animated-hover”>

今回はpタグなので以下のようになります。

<p class=”faa-parent animated-hover”>

小要素のアイコンコードには動きを指定するclass を書き込みますが。
その際「faa-◯◯」というclass名だけ追加し、「animated」はつけません
例えばfaa-wrench animated というアニメーションの動きを指定するclassだと。
animatedを取って
<i class=”fab fas fa-wrench faa-wrench fa-5x “></i>
とします。

するとアイコンか「ここにカーソルを当てたときだけアイコンが動くよ^^;」という

テキストにカーソルを合わせるとアイコンが動きます。↓

ここにカーソルを当てたときだけアイコンが動くよ^^;

アイコンのアニメーションのまとめ

①くるくると回転させる場合にはアイコンコードにfa-spinを入れるだけで良かったんでしたね。

<p><i class="fab fa-adn fa-spin fa-5x "></i>fa-spinを入れるだけでアイコンが回転するよ</p>

fa-spinを入れるだけでアイコンが回転するよ

他のアニメーションで動かしたい場合にはまず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" />

そしてアニメーションには15種類3パターンが有るんでした。

常にアイコンのアニメーションが動いている状態にするには
選んだアイコンコードの中に動き方を指定するために〇〇animatedというアニメーションのclassを付け加えるんでした。

例えば

<p><i class="fab fa-adobe faa-wrench animated fa-5x"></i>インコは可愛い</p>

インコは可愛い
というふうに。

次にカーソルがアイコンの上に来たときだけアニメーションが動くようにするにはアニメーションのクラスに
-hover
を付ければ良いんでしたね。

<p><i class="fab fa-adobe faa-wrench animated-hover"></i>インコは可愛い</p>

するとアイコンにカーソルを置いた場合のみアイコンが動きます。

インコは可愛い
それからテキスト部分などにカーソルを当てるとアイコンが動くようにしたい場合には

親要素に以下のような記述をまず行い。

<タグ class=”faa-parent animated-hover”>

その上で小要素のアイコンコードにアニメーションのCSSのうちanimatedを取り除いたものを貼るんでしたね。

<p class="faa-parent animated-hover">
 <i class=" fab fa-adobe faa-wrench faa-wrench fa-5x "></i> ここにカーソルを当てたときだけアイコンが動くよ^^; 
</p>

ここにカーソルを当てたときだけアイコンが動くよ^^;

終わりに

その他CSSの疑似要素を使ってアイコンを表すやり方がありますが。
それだけでも膨大な情報になるのでは別途記事にしたいと思います。

CSS 擬似要素beforeとafter 使い方基本

今回はほぼHTMがメインの情報についてまとめてみました。

アイコンの使い方をマスターすればより表現豊かなサイトが作れます。

楽しいですしね。

 

 

Sponsored Link

Sponsored Link

関連記事

  1. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  2. HTMLで動画や画像を埋め込みする方法を詳説
  3. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  4. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  5. 知っておくと便利なセレクタまとめ
  6. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  7. HTML・CSSを実際に記事を作りながら覚えていこう
  8. HTMLとCSS 初歩的な文字装飾 基本まとめ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressエディタ「Gutenberg」の使い方 総まとめ
  2. サーバって何?どのレンタルサーバーを選べばよいのか?
  3. Windows10でブルーライトカットの設定 コントロールパネルの使い方
  4. WordPressのフォルダ構成とバックアップの仕方
  5. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  6. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  7. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  8. 【Basics of site construction】ワードプレスで日付を消す方法

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑨ミラー・画像ループ
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
AviUtlのすべてのエフェクトについての解説①色系エフェクト
AviUtlのすべてのエフェクトについての解説⑧ラスター・波紋・極座標変換・ディスプレイスメントマップ
AviUtil カメラ制御の基本の基本を詳しく解説
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlのすべてのエフェクトについての解説②発光・閃光・拡散光・グロー・ライト・シャドー(光と影)
AviUtlでMP3コーデックとして使えるLameLameACMを呼び出せるのインストール方法

ソフト・アプリの使い方

PAGE TOP