HTML

FontAwesomeでSNSのロゴを手に入れよう

どうも、こんにちは鹿せんべいです。

WEBサイトを自分で作り始めたら誰もが通るであろう、SNSのロゴのお手軽な実装の仕方をお伝えします。

SNSのロゴって？

SNSのロゴというのはWEBサイトなどでよく見るリンクのついたロゴマークですね。

Shikasen_toppage

実はこのブログにも使われています！
右上の方にありますが、スマホなどでは確認できないかもしれません。

そんなキャッチーなロゴが非常に簡単に自分のサイトでも使えます！

FontAwesome

FontAwesomeとは

様々なロゴを提供しているのがFontAwesomeというサイトです。

フォントオーサムと読みます。

awesomeというのは形容詞で「畏敬の念を抱かせる」という意味です。

転じて、まじすごい、神だわ、くらいのテンションで使われたりするそうです。

FontAwesomeにアクセス

1.https://fontawesome.com/ にアクセス
2.headタグ内にコードを記述
3.使いたいロゴのHTMLをbodyタグ内に記述

まずはFontAwesomeにアクセス。

特にログインとかも必要ないです。

するとこんな画面になるのでStartをクリック。

コードをコピー

するとページの真ん中の方にコードがあるのでコピー。

FontAwesome_code

headの中に記述

自分のHTMLのファイルのheadの中に記述

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

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

  </head>

 

好きなロゴ、アイコンを探す

exsample

いいのが見つかったらクリックしてコードをコピー。

bodyに記述

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

iでもdivでもspanでもいいです。使いたいところに貼りつけましょう。

（CSSで値を変更）

そのままでもいいですが小さかったりするので、CSSを当てます。

.fab {
  font-size: 36px;
}

i {
  color: #55caee;
}

div {
  color: #315096;
}

span {
  color: #cd201f;
}

これはあくまで例です。

logo_example

このような形で表示されているはずです。

わからない部分とかがあればツイッターでリプかブログのコンタクトフォームからご連絡ください。
余裕があればご回答します！

FontAwesomeにはたくさんのロゴがあるので、
好きなものを探してみてください！

今度はこのFontたちにリンクを貼る方法もまとめたいと思います。

FontAwesomeにlinkをつける奈良公園で鹿にあげる鹿せんべいはヒトも食べられます。 でも全然美味しくないですよね。 そんな鹿になりたい人間のために "ヒト用...

Conclusion

まとめ

1.https://fontawesome.com/ にアクセス
2.headタグ内にコードを記述
3.使いたいロゴのHTMLをbodyタグ内に記述
4.CSSを記述する

FontAwesome、まじ神だわ

関連記事