FontAwesomeにlinkをつける

目次

リンクは必須

以前FontAwesomeの導入方法はお伝えしましたが、

20181209-1.png

こんな感じで表示されているだけでしたね。 これを見たらユーザーはリンクだと勘違いしてしまうかもしれません。

その際にリンクが貼られていなかった場合、著しくusabilityが低下します。

人間はリンクだと思ってクリックした際にそれがリンクではなかった場合、非常に不快に感じるそうです。

なので今回はユーザビリティをのために FontAwesomeにリンクをつけていきたいと思います。

FontAwesomeへのリンクの付け方

前回 FontAwesomeでSNSのロゴを手に入れよう で使ったコードを使用していきます。

下にソースコードも載せてます。

これですね。 20181209-1.png

よければコピーして使ってください。

sample.html

<!doctype html>
<html lang="ja">
  <head>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" type="text/css" href="sample.css">

  </head>
  <body>
    <i class="fab fa-twitter"></i>
    <span class="fab fa-youtube">
  </body>

sample.css

.fab {
  font-size: 36px;
}

i {
  color: #55caee;
  -webkit-font-smoothing: antialiased;
}

div {
  color: #315096;
}

span {
  color: #cd201f;

リンクをつける

このFontAwesomeのアイコンたちにリンクをつけるのは非常に簡単です。

aタグにしてlinkを記述するだけですね。

やって見ましょう。

sample.html

〜省略
    <a class="fab fa-twitter" href="https://twitter.com"></a>
    <a class="fab fa-facebook" href="https://www.facebook.com/"></a>
    <a class="fab fa-youtube" href="https://www.youtube.com"></a>

このように書き直して

どんっ

20181209-3.png

これじゃあとてもイマイチなので CSSも書き直します。

リンクのカラー

色をつけます。

sample.css

.fa-twitter {
  color: #55caee;
}

.fa-facebook {
  color: #315096;
}

.fa-youtube {
  color: #cd201f;
}

このようにそれぞれのクラスに色を当てます。

リンクの下線を消す

text-decoration:は他にも取り消し線がつけれたりするので、調べて見てください。

text-decoration: none;は ３つ全てに当てたいので、共通しているfabクラスに記入します。

sample.css

.fab {
  font-size: 36px;
  text-decoration: none;
}

これで色とリンクが思い通りになったわけですが、 あと一歩足りない気がしますよね。

マウスカーソルが乗っかった時に白っぽくなるように変更してみましょう。

カーソルが乗った時に白っぽくする

もう少しちゃんというと、 マウスオーバーした際に 透明度を下げるように変更しましょう。

opacityの値は0.0〜1.0の間で設定します。 0に近づくほど透明に近づきます。

sample.css

.fab:hover {
  opacity: 0.6;
}

0.6くらいで設定しました。

fontawesome_opacity

※スクリーンショットの関係上マウスカーソルが表示されてませんが、 youtubeのアイコンがちょっと白っぽくなっています。

このようにカーソルが乗った時に白っぽくなり、よりlinkらしくなりました。

ぜひこれを活用してオシャレにSNSへのリンクをつけましょう♪

今回のコード

sample.html

<!doctype html>
<html lang="ja">
  <head>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" type="text/css" href="sample.css">

  </head>
  <body>
    <a class="fab fa-twitter" href="https://twitter.com"></a>
    <a class="fab fa-facebook" href="https://www.facebook.com/"></a>
    <a class="fab fa-youtube" href="https://www.youtube.com"></a>
  </body>

sample.css

.fab {
  font-size: 36px;
  text-decoration: none;
}

.fab:hover {
  opacity: 0.6;
}

.fa-twitter {
  color: #55caee;
}

.fa-facebook {
  color: #315096;
}

.fa-youtube {
  color: #cd201f;
}

Conclusion

  • リンクをつけるのはaタグにしてhref="#"
  • 下線を消すのはtext-decoration: none;
  • 透明度はopacity:値；