やったこと

webサービスを作るときに考えたことを垂れ流します

Font Awesomeを使ってツイッターのアイコンを作る!

いろんなWebアイコンフォントが無料で使える便利なライブラリ「Font Awesome」を使って、ツイッターの青い鳥のアイコンを作ってみましょう。

①ライブラリの読み込み!
まずはFont Awesomeのcssのライブラリを読み込みます。下記ページのCDNで提供されているものを利用してしまいましょう。
Quick Start · BootstrapCDN by StackPath

HTMLにこんな風に記述してcssを読み込みます。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">


②アイコン設置!
そしてアイコンを設置します。文章中にこんな風に記述すると、ツイッターの青い鳥の文字アイコンが表示されます。

<i class="fa fa-twitter" aria-hidden="true" style="color: #00aced;"></i>

簡単にできましたね、以上です!