[Bootstrap]FontAwesomeを使ってアイコンを一瞬で手に入れよう!

プログラミング

こんにちは、タカフミです!

今回は

『Bootstrapを使用してFontAwesomeからアイコンを手に入れる方法』

というテーマで書いていきます。

ブログらやウェブサイトを作るときtwitterだったりfacebookなどのアイコンが必要になる時ありますよね。

そんな時にBootstrapを使えば簡単にアイコンが手に入るのでその方法を解説していきます!

FontAwesomeとは

そもそもFontAwesomeって初めて聞いたーっていう人向けに使い方の解説からいきますね。

まず最初にgoogleからFontAwesomeの公式サイトに飛びます。

以下のリンクから飛べます。

https://fontawesome.com/

このような画面に飛んだと思います。

中央にあるStart for Freeを押して開始します。

初めての方はここでメアドの登録をすると思いますが簡単なためスキップします。

次にこの画面に飛んだら中央上の検索を使用します。

今回はtwitterのアイコンを使用します。

twitterで検索したら10種類のアイコンが出てきました。この中でいつものやつをクリックすると

こんな感じで拡大されるので『このアイコンを使い始める』をクリックしてください

最後にコードをコピーしたらFontAwesomeでやることは終了です。

これをHTMLに貼れば解決なのですがBootstrapの設定もしないといけないのでそのコードも書いていきます。

Bootstrap

FontAwesomeでBootstrapを使用するためには以下のコードをhtmlに書いてください。

コピペ用に書いておきます。

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.5.0/css/all.css”integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU” crossorigin=”anonymous”>

<script src=”https://kit.fontawesome.com/6b65e275a4.js”crossorigin=”anonymous”></script>

これらを書くことで準備ができました。

では先ほどFontAwesomeでコピーしたリンクを貼っていきましょう。

HTML

上記のようにaタグで挟むやり方が多いと思います。

クリックすると飛べます。アイコンがある方がわかりやすいですね!

まとめ

  • FontAwesomeからリンクをゲット
  • Bootstrapのコードを書く

今回はこんな感じで終わりにします。

最後まで読んでいただきありがとうございました!!