アイコンフォント、Font Awesomeを使う理由
2017年10月2日
スマートフォンでウェブサイトを見ることが多くなった今では、狭い面積でより多くの情報を伝えるためにアイコンが多く使われ、利用者もアイコンの形で意味を共有するようになりました。クラウドフォントの普及と相まって、今後もアイコンフォントを使う機会は増えるでしょう。
筆者はFont Awesomeをよく使います。
Font Awesomeを使う理由
実装が簡単
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
この1行だけ。この1行を<head>内に記述します。何もダウンロードする必要はありません。何もアップロードする必要もありません。Font Awesome用の特別なCSSもありません。たったこれだけです。だから、何かと競合することもありません。
日本語テキストとの親和性
Font Awesomeなら日本語のテキストと同じサイズで並べたとき「これホントに同じサイズ?」「縦方向が微妙にズレる」といったことがありません。サイズも位置も違和感なく横に並んでくれます。ほかのアイコンフォントで調整に苦労された方は是非一度Font Awesomeをお試しください。
デザインが良い
Font Awesomeは他のアイコンフォントよりデザインがカワイイと思いますが、これはまったくの主観です。
HTMLで使う
<head>内に、1行追加したら、Font Awesome Iconsにアクセスし、使いたいアイコンを検索します。適当に入力すると候補がいくつか表示されるので英語が苦手でも大丈夫。

候補から使いたいアイコンをクリックし、そのアイコンのページに行きます。

表示されている<i>タグをコピーし、入力したい場所に
<i class="fa fa-refresh" aria-hidden="true"></i> 再読み込み
と書くと次のような表示になります。
再読み込み
以上が基本の使い方ですが、以下のページに等倍やアニメーションなどさまざまな使い方が紹介されています。
http://fontawesome.io/examples/
CSSで使う
さて、HTML内に書く方法はわかりましたが、Font AwesomeをCSSの中で使いたいときはどうすれば良いでしょうか?例えばリストマーカーにしたいときなどです。CSS内でタグは使えませんね。、
そんなときはUnicodeを使います。Unicodeは当該アイコンのページのグレーのエリアに表示されている4桁のコードです。上のrefreshアイコンなら「f021」になります。これをcontentに記述しますが、Unicodeの前にバックスラッシュが必要です。(ソースは¥マークが表示されても大丈夫)
ul li:before{ content: '\f021'; font-family: FontAwesome; }
最近の記事
- 【WooCommerce】と【LINE Pay】の連動(2020年5月6日)
- 【LINE Pay】Channel IdとChannel Secret Keyはどこにある?(2020年5月5日)
- 【WooCommerce】ログインはこちらから/クーポンコード入力はこちらから(2020年4月23日)
- 【WooCommerce】自作テーマが参照するテンプレートは?(2020年4月2日)
- 【WooCommerce】パンくずリストの設置とカスタマイズ[超簡単](2020年3月29日)
Business News
- 神戸市の株式会社寺内鉄工所様ウェブサイト(2020年8月7日)
- 【開花堂】蒔絵ピンバッヂ販売開始(2020年7月31日)
- てんまる抱きまくら(2019年4月5日)
- 都会からの移住を考えるクリエイター・エンジニア必見in松山(2018年11月24日)
- 実践!WoocommerceでECサイト構築~Woocommerceってホンマのとこどうなん?~(2018年11月13日)