しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

アイコンフォントを使ってWEBページにアイコンを簡単表示

アイコンフォントを使ってWEBページにアイコンを表示してみました。
利用したバージョンはFontAwesomeの4系です。

まずはindex.htmlを作成してテキストを表示します。

<div id="test">
  テキストテキスト
</div>

次にアイコン表示の為のCSSをファイルに追加します。
今回は下のアイコンを表示する事にしました。

f:id:llcc:20180513163844p:plain

下のようにCDNへのリンクと疑似要素へのCSS追加を行いました。

<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
      #test:before {
        font-family : FontAwesome;
        content: "\f105";
      }
    </style>
  </head>
  <body>
    <div id="test">
      テキストテキスト
    </div>
  </body>
</html>

ブラウザで確認するとしっかり矢印が入っている事が分かります。

f:id:llcc:20180513164011p:plain