
生まれ年ワインショップのワインのチャート表のワイングラスのアイコンはフォントアイコンです。そういえば、ハンバーガーメニューの初期設定もフォントアイコンだったのを覚えているでしょうか(⇒「1分でハンバーガーメニューをオリジナル画像に変える方法」)
Awesomeは最初からwelcartに入っているフォントです。今回はこの使い方と、別のフォントアイコンであるicomoonの使い方について書きます。
目次
ワイングラスのフォントアイコンが欲しい!
生まれ年ワインショップの商品ページにはワインの味わいのチャート表を作っているのですが、★マークもいいけど、ワインのグラスマークが使いたいなと思いました。
画像のアイコンでなくフォントアイコンにするメリットは、いくつかあると思いますが、私がパッと思い浮かぶものは
- 文字列の中に他の文字と同じ大きさで自然に入る
- フォントなので大きさはCSSで調整できる
- フォントなので色もCSSで調整できる
- フォントなので、枠線、背景・・・同様^^
といったところです。
では、このフォントアイコンの使い方はどうすれば、よいのでしょう。
IcoMoonでワイングラスのフォントアイコンを発見!
フォントアイコンを探してみます。なかなか検索ではひっからない・・・目視で探します(笑)!
そしてやっとの思いで、IcoMoonというフォントアイコンの中にワイングラスのフォントを見つけました!!
https://icomoon.io/app/#/select
IcoMoon-Freeというフォントアイコン一覧の161番目(2017年5月)にグラスが^^
これをサイトに入れればOKです♪
今回は必要ありませんんが、念の為、IcoMoon-Free以外のフォントをこのリストに入れる方法も書いておきます。
※ワイングラスで十分な方は次を飛ばして、サイトへの導入方法へおすすみください。
1.IcoMoon-Freeの一番下までスクロールさせたところの、「Add Icons From Library… 」をクリック!
2.フォントアイコンの一覧があるので、リストに加えたいものは「+Add」で入れる
3.入れたものに良いフォントがない場合は、もう一度「Add Icons From Library… 」をクリック
4.チェック付きのリストに入れたフォントで「Remove」をクリックで外す
といった感じです。

加える場合と外す場合

新しいフォントアイコンが入った
サイトへの導入方法
早速、サイトで使えるようにしてみます。まずは、グラスアイコンをクリックして選択し、そのまま下へスクロールしてGenerate Fontをクリック!
続いて、Downloadをクリック!
ダウンロードしたzipファイルを解凍します。いくつかフォルダやファイルがありますが、使うのは2つ!
- fontsフォルダ
- style.css
だけです。
fontsフォルダ
fontsフォルダをフォルダごと、welcartの子テーマの中に入れます(正確には今使っているテーマのstyle.cssがあるフォルダに入れる)。これだけでオッケー^^
style.css
style.cssを開いて、全てを選択してコピーします。それを、子テーマ内のstyle.cssにペーストします。
生まれ年ワインショップでは、ワインの色によってチャートのワイングラスの色を変えたいので、ここで色も指定しておきます。
以上で、完了!このようになりました♪♪
実際のコードを公開しておきます
いつものように、当店で使っている実際のコードを載せておきます。
/* -- ワインのフォントアイコン -- */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?mj8ro3');
src: url('fonts/icomoon.eot?mj8ro3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?mj8ro3') format('truetype'),
url('fonts/icomoon.woff?mj8ro3') format('woff'),
url('fonts/icomoon.svg?mj8ro3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-glass:before {
content: "\e9a0";
color:grey;
}
.icon-glass-dry:before {
content: "\e9a0";
color:green;
}
.icon-glass-sweet:before {
content: "\e9a0";
color:orange;
}
.icon-glass-red:before {
content: "\e9a0";
color:red;
}
.icon-glass-champagne:before {
content: "\e9a0";
color:blue;
}
.icon-glass-rose:before {
content: "\e9a0";
color:#e95464;
}
/* -- ワインのフォントアイコン(終了) -- */
皆さんもコピーしてやってみてください^^
Awesomeのcontentの調べ方
さて、今日はもう1つ。初期設定で入っているフォントアイコンのAwesomeですが、これのCSSでの使い方。
HTMLでの使用方法はよく説明がある
検索するとすぐ出てきますし、その説明にはAwesomeのインストール方法が書いているのですが、Welcartは初期設定で入っているので、このインストールも不要です。
ずばり!
に行って、使いたいフォントを見つけたらクリック!
すると表示させるためのタグが書かれています。
実際にここで
を書いてみましょう^^
行きますよ・・・
↑
どうですか?フォントなので、普通の1文字サイズで、もったいぶったわりに小さくて驚きがないですかね(笑)
じゃ、CSSで色を変えてみましょう。style.cssでよく使う色は設定しておけば良いですが、ここでは、
としてみますね(*^_^*)
CSSでフォントをAwesomeにしアイコンをContenで指定する方法
はい。
上で盛り上がり過ぎましたが、さっきのは検索すればどこでも書いてあります。じゃ、次。
ハンバーガーメニューの初期設定もフォントアイコンで、それはstyle.sccで指定されていました。(⇒「1分でハンバーガーメニューをオリジナル画像に変える方法」)
ここで、
初期設定では、FontAwesomeというフォント(フォントアイコンというデザイン用のフォント)の『\f03a』という文字で表記されています。
と書きました。
これは、style.cssで
#site-navigation label span:before {
content: "\f03a";
display: block;
color: #fff;
font-family: FontAwesome;
font-size: 1.5714em;
vertical-align: text-bottom;
}
と書かれてあります。重要なのは
#site-navigation label span:before {
content: "\f03a";
font-family: FontAwesome;
}
だけ。
「#site-navigation の前に(:before)、font-family: FontAwesome;でハンバーガーメニューのアイコン(content: "\f03a";)を書くよ」
ってこと。
簡単・・・だけど、さっきのHTMLと違って、このcontentに書く『\f03a』の部分が分からなければ、スタイルシートでボタンとしてテーマのデザインとして(例えばh1の装飾に使うとか)使用できません。
でも・・・さっきのサイトでは分からない><
調べると、それを書いて下さっているサイトを発見!
『MORIAWASE(モリアワセ)』https://moriawase.net/さん!!
このサイトの中の、『アイコンフォント「Font Awesome」をCSSで使う方法。』に書いてくれているのですが、盲点ですよ・・・
font-awesome.cssを見れば良い
なるほど~。早速、
親テーマ(welcart basic)のフォルダ>「font-awesome」フォルダ>font-awesome.css
とクリックしていってfont-awesome.cssファイルを開き、さっきのfa-glassを検索。簡単に見つけられました。
いかがですか!
お役に立てたでしょうか^^
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m