ワイングラスのフォントアイコンの使い方とAwesomeのcontentの調べ方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
icomoon導入方法

 生まれ年ワインショップのワインのチャート表のワイングラスのアイコンはフォントアイコンです。そういえば、ハンバーガーメニューの初期設定もフォントアイコンだったのを覚えているでしょうか(⇒「1分でハンバーガーメニューをオリジナル画像に変える方法」)

 Awesomeは最初からwelcartに入っているフォントです。今回はこの使い方と、別のフォントアイコンであるicomoonの使い方について書きます。

目次

ワイングラスのフォントアイコンが欲しい!

 生まれ年ワインショップの商品ページにはワインの味わいのチャート表を作っているのですが、★マークもいいけど、ワインのグラスマークが使いたいなと思いました。

 画像のアイコンでなくフォントアイコンにするメリットは、いくつかあると思いますが、私がパッと思い浮かぶものは

  1. 文字列の中に他の文字と同じ大きさで自然に入る
  2. フォントなので大きさはCSSで調整できる
  3. フォントなので色もCSSで調整できる
  4. フォントなので、枠線、背景・・・同様^^

といったところです。

 では、このフォントアイコンの使い方はどうすれば、よいのでしょう。

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をクリック!

icomoon導入方法

続いて、Downloadをクリック!

ワイングラスのアイコンをダウンロード

 ダウンロードしたzipファイルを解凍します。いくつかフォルダやファイルがありますが、使うのは2つ!

  1. fontsフォルダ
  2. 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は初期設定で入っているので、このインストールも不要です。

 ずばり!

http://fontawesome.io/icons/

に行って、使いたいフォントを見つけたらクリック!

awesomeのglassをクリック

すると表示させるためのタグが書かれています。

fa-glass使用

実際にここで


を書いてみましょう^^

行きますよ・・・


どうですか?フォントなので、普通の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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください