IcoMoonはオリジナルのアイコンフォントが作成できるサービスです. このサイトではメニューのアイコンに使っています. 非常に便利なのですがFontAwesomeとは違い, アイコンのサイズの変更や回転の設定ができなかったので, そのやり方をご紹介します.
cssの編集
style.cssに次のコードを挿入してください. 挿入する場所はfb-android:before {content: "\e94a";}といったアイコンのコードが書かれている直前がおすすめです. このコードはFontAwesomeで使われているものと同じです. このコードによってIcomoonで作ったフォントでも, FontAwesomeのように細かな設定をすることができます.fbは僕が作っているフォント用のprefixなのでこれはご自身がお使いのものに置換してください.
なお, 今回使用しているフォント(FontBotamochi)は次の設定で書き出しています.
Larger Icons
FontAwesomeと同じようにサイズ変更用のクラスを追加することで大きさを変更できます.
Font Awesome Examples
Font Awesome, the iconic font and CSS framework
fontawesome.com
<i class="fa fa-camera"></i>
<i class="fa fa-camera fa-lg"></i>
<i class="fa fa-camera fa-2x"></i>
<i class="fa fa-camera fa-3x"></i>
<i class="fa fa-camera fa-5x"></i>
<span class="fb fb-backpack"></span>
<span class="fb fb-backpack fb-lg"></span>
<span class="fb fb-backpack fb-2x"></span>
<span class="fb fb-backpack fb-3x"></span>
<span class="fb fb-backpack fb-5x"></span>
コメント