webアイコンフォントを色違い、サイズ違いで表示

1つのwebアイコンフォント（以下：アイコンフォント）を同じページ内で色違いやサイズ違いで使う方法です。

 

 

プログラミング1年生 21時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編 と
22時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編までの解説ですと同じページ内ではaというアイコンは1つの決まった色、1つの決まったサイズしか使えませんでした。（他の条件も付けられます）

 

 

「飯ごうa」と「飯ごうb」を2つ用意しないと黒とグレーで同時に表示できなかったのです。

「飯ごうa」は黒で80px（サイズ）と決めたら、このページ内では何個表示してもずっと黒、80pxです。なのでグレーも欲しいと思ったらもう１つグレー用の「飯ごうb」を用意する必要がありました。

 

形状が違うならまだしも同じ形状なら色違い、サイズ違は1つのアイコンを使い回せる方が便利ですよね。色数が増えてもすぐに対応できます◎

 

 

 

 

1. webアイコンフォントを色違いで使う方法

 

1つのアイコンを色違いで表示します。

 

IcoMoonのページへ行き、カーソルを合わせると出てくる Get Code をクリックします。

ここまではプログラミング1年生の21時限、22時限をご参照ください。

 

 

HTMLとCSSのコードを少し書き換えます

 

小窓が出てきます。HTMLとCSSのコードを使います。

 

 

まずはHTMLから。WPの投稿画面はテキストに切り替えます。

”ダークブルー”の左右に分けてコピペします。”新色ダークグリーン〜”も同じようにします。

 

 

好きな名前のclassを追加します

ここポイントです。
「icon-hango_a」と言う1つのアイコンフォントに別々の名前blue、greenを追加する事で
「icon-hango_a blue」と「icon-hango_a green」2つのアイコンフォントが出来ました。

 

これをプログラミング用語で”classを追加する”と言います

名前（class）は半角英数なら何でもいいんだよね

そうよ。でも後々分かり易い方が良いわよ

 

 

CSSを書きます

次はこれに対して”こんな色にして”と指示するためのCSSを書きます。

Get codeのCSSをWP投稿画面のカスタムCSSの欄にコピペします。（2つペーストしてください）

 

カスタムCSSの欄が無い場合はプラグインで入れます。→CSSコードが書けるプラグインを入れる

 

 

「.icon-hango_a」の部分を先程名前を付けた「.blue」と「.green」にそれぞれ書き換えます。

頭に付く「.」も忘れずに！

そして好きな色のコードcolor: #125180;など書き加えます。

色のコードは調べればたくさん出てきます◎

原色大辞典など。

WPを保存します。色違い完成です。

 

 

 

webアイコンフォントをサイズ違いで使う方法

 

色違いが出来たらサイズ違いもほぼ同じですが復習のつもりで◎

 

 

IcoMoonのGet codeを押してHTMLをコピペ。それぞれsmall、largeなど識別しやすい名前（class）を付けます。

 

それに対応するCSSを書きます。

コピペして.small  .largeにそれぞれ書き換えfont-size: 90px; など好みの大きさを書き加えます。
保存してサイズ違いも完成です。

 

 

応用：色違い、サイズ違いを同時に

 

CSSには複数の指示を書く事が出来るのでもちろん色、サイズも同時に書けます。

例えばこの2つのアイコンフォントのCSSは以下です。

 

名前は分かり易く.blue-small .green-large としました。（テキストにコピペしたHTMLの方も blue-small 、green-largeを追加しています）

 

ここまでで解説したサイズ、色の他に「アイコンフォントの右側を10px空ける」「アイコンフォントと文字の横ラインを中央で合わせる」の指示もしています。

 

---

 

webアイコンフォント制作します

無料・有料のアイコンやWebフォントは便利で私も使っています。 でも、デザインや見易さにこだわればこだわるほど御社独自の製品、サービスのアイコン が欲しいと感じませんか。

 

スキルのオンラインマーケットcoconala（ココナラ）にて4つで17,000円で承ります。ご相談ください◎