FontAwesomeのアイコンにリンクを付ける方法とリンクの先頭やお尻、両側にアイコンを付ける方法のまとめ。

FontAwesomeアイコンリンク_eyecatch

FontAwesomeのアイコンを使ってリンクの横にアイコンを付けたり、アイコン自体をリンクにする方法です。

aタグ内にアイコンを設置するとアイコン自体が青色になってしまったり、下線が付いてしまったりするのでcssの編集が必要になります。

各リンクに別のクラスを指定してもできますが、ここでは疑似要素を使った方法をまとめています。

FontAwesomeを使ったリンクの作り方

・アイコン自体のリンク化
・リンクの先頭にアイコンを付ける
・リンクの後ろにアイコンを付ける
・リンクの左右にアイコンを付ける

以上の方法をそれぞれご紹介します。

今回の例ではFontAwesome5を使っていますが、クラス名を「fa」に変更すればFontAwesome4でも同じようにできます。

FontAwesomeのアイコンにリンクを付ける

テキストを付けずにFontAwesomeのアイコンだけでリンクを作成する方法です。
FontAwesomeのアイコンを表示するには「iタグ」を使用します。

(例)<i class="fas fa-home"></i>

FontAwesomeアイコンリンク_001iタグの中にアイコンのクラス名を指定すればそのアイコンが表示されます。

アイコン自体をリンクとして機能させたい場合は、「iタグ」の代わりに「aタグ」を使用すればOKです。

(例)<a class="fas fa-home" href="リンク先URL"></a>

FontAwesomeアイコンリンク_002

ただ「aタグ」はリンクタグですので、環境によってはアイコン自体が青色で表示されてしまうことがあります。

アイコンリンクの色変更と下線の削除

リンク特有の青色から色を変更したい場合はCSSを調整する必要があります。

FontAwesomeのアイコンは疑似要素を使ってスタイルの変更が可能です。

.fa-home::before{
  color: black;
}

FontAwesomeアイコンリンク_003aタグ内にアイコンが設置されているため、この方法ではリンクの下線が残ります。

アイコンをリンク化しつつ、アイコン下の下線も消すにはaタグにスタイルを当てる必要があります。

a.fa-home{
  color: black;
  text-decoration: none;
}

FontAwesomeアイコンリンク_004「text-decoration: none;」を使ってアイコンの下線を消すことが出来ます。

アイコンにテキストリンクを付ける

aタグ内にFontAwesomeのアイコンが入っているので、アイコン横にテキストを付けるのは簡単です。

(例)<a class="fas fa-home" href="リンク先URL">リンクテキスト</a>

FontAwesomeアイコンリンク_005同じaタグ内なので、文字の大きさに合わせてアイコンも大きくなります。

アイコンとリンク文字を別々の色にする

FontAwesomeを使っているとアイコンの色とリンク文字の色を分けたい時があると思います。

そんな時は、アイコンの色は疑似要素の「::before」で決め、テキストリンクの色は「a.fa-home」とクラス名で決めます。

こうすることでアイコンの色とリンク文字を別々の色で指定することが出来ます。

.fa-home::before{
  color: red;
}
a.fa-home{
  color: green;
  text-decoration: none;
}

FontAwesomeアイコンリンク_006こんな感じです。
クリックできる箇所は「アイコン+テキスト」の領域となりますので色のチョイスには少し注意が必要かもしれません。

リンクの先頭にアイコンを付ける

先ほどの方法ではクリックできる箇所は「アイコン+テキスト」でした。
アイコンを表示するiタグとリンク用のaタグを分けることによって、クリックできる範囲を「テキストのみ」にすることもできます。

(例)<i class="fas fa-home"></i><a href="URL">テキスト</a>

FontAwesomeアイコンリンク_007iタグの括りをaタグの外に出しています。
ただ注意点があり、aタグ内のテキストの文字にアイコンの大きさは連動しません。
FontAwesomeアイコンリンク_008アイコンの大きさをテキストに合わせる必要があります。
クリック箇所は「アイコン+テキスト」の方が分かりやすいのであまり使えません。

リンクの先頭にアイコンを付けたい場合は先ほどのaタグ内にアイコンを入れる方法が良いです。

リンクの後ろにアイコンを付ける

リンクの後ろにつける場合は先ほどのアイコン用のiタグの記述をaタグの後ろに持ってくればOKです。

(例)<a href="URL">テキスト</a><i class="fas fa-home"></i>

FontAwesomeアイコンリンク_009先ほどと同様で、アイコンの大きさとリンクテキストの大きさは連動しません。

CSSの疑似要素を使ってリンクの後ろにアイコンを追加する方法もあります。

a::after{
  font-family: FontAwesome;
  content: '\f015';
}

FontAwesomeアイコンリンク_010

ただし、この方法では全てのリンクに適用されてしまいます。

サイトに合わせて適宜CSSセレクターを調整する必要がありますので、このままでは使えません。
自サイト内、外部サイトのみなど色々分けることが出来ますが、長くなりますので分け方は割愛します。

リンクの両側にアイコンを表示する

最後にリンクの左右にアイコンを表示する方法です。
今まで記述した内容を少し応用すればできます。

まずHTMLにてテキストリンクの頭にアイコンを付けておきます。

(例)<a class="fas fa-home" href="リンク先URL">リンクテキスト</a>

続いてCSSの疑似要素を使用してお尻にもアイコンを付けてやります。

.fa-home:after {
  font-family: FontAwesome;
  content: '\f015';
}

セレクターにaタグではなく、頭についているアイコンのクラス名を使用しているため、同じアイコンを複数使っている場合はその個所全てに反映する点に注意が必要です。
FontAwesomeアイコンリンク_011一か所だけで使いたい場合は、任意のクラスでリンクを囲みそのクラスに同様のスタイルを当てればOKです。

まとめ

FontAwesomeのアイコンを使ったリンクの作成方法でした。

FontAwesomeを筆頭にWebフォントが普及してから、テキストリンクだけというリンク方法が少なくなってきているように思います。

適宜テキストリンクにアイコンを入れることで閲覧者も見やすくなります。
すこ~しだけサイトが重くなるはずですが、使わない手はありません・w・

大きさの変更など、アイコン自体のカスタムはコチラ。
【関連記事】FontAwesomeカスタム!アイコンサイズを変更したり回転させたり… FontAwesomeの加工方法とサンプル集。

-サイト構築
-

© 2021 ソロ学