Single Post
Webアイコンフォントの使い方
| Web
このサイトでも使っているicon fontの使い方を記載します。icon fontは、幾つかありますが今回説明させて頂くのは【Font Awesome】で、Bootstrap のアイコンをもっと使いやすくするために、Webフォント として利用できるようにしたのです。
2種類の使用方法
head要素内に下記コードを入れることでCDNでFont Awesomeを利用できます。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Font Awesomeのサイトからフォルダをダウンロードして設置します。ダウンロードファイルは、Font Awesomeサイトのトップ画面に【Download】というボタンが有りますので、そこからファイルをダウンロードしてhead要素内に設置してください。
<link href="your/path/font-awesome/css/font-awesome.min.css" rel="stylesheet">
「your/path」のところはご自身で書き変えてください。
アイコンの表示方法
まず、サイト上部のメニューの中からIconsを選択して移動します。すると多くのアイコンが表示されている画面が出てくると思います。その中から使いたいアイコンを選択しクリックすると次のページ下記の様なコードが表示されます。
<i class="fa fa-angle-right"></i>
上記は、右矢印のアイコンです。後は、これを自身のサイトの使いたい箇所へコピーペーストすれば完成です。
右矢印フォント
右矢印フォント
右矢印フォント
この様な感じでとても簡単に設置できました。CSSで大きさや色も変更できますのでトライしてみください。
