平凡エンジニアによる平凡ブログ

平凡インフラエンジニアがスキルアップを目指してプログラミングやクラウドやサーバといったインフラのアウトプットをしていきます!

【html】FontAwesomeの使用について

最近あらゆるWEBアプリケーションでtwiiter,facebook,instagramなどのアイコンがあり、そのアイコンをクリックすると実際に公式アカウントにリンクが飛んだりする機能があると思います。

htmlでアイコンを作成するにはどうすればいいか調べたところ「FontAwesome」というサイトからコードをコピーするだけで使えます。

例えばtwitterのアイコンをhtmlで作成してみる。
公式サイト: https://fontawesome.com/

公式サイトからtwitterで検索すると簡単に見つかります。
該当のアイコンでコードが記載されているので、それをコピーして使用すれば簡単に作成することができます。

<i class="fab fa-twitter-square"></i>

リンクをつけます。ここでは#にしておきます。実際に世に出ているアプリケーションではリンク先に公式サイトのリンクをつけているかと思われます。

<a href="#"><i class="fab fa-twitter-square"></i></a>

railsで使うためには、専用のgemを使うようなのでまたそれについてはまとめます。