FontAwesomeのアイコンにリンクを付ける方法とリンクの先頭や後ろ、両側にアイコンを付ける方法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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