モバイルボタンのFont awesomeに色づけする：wordpress+cocoon-hibizip

ブログを運営していて面白いのはカスタマイズなのではないでしょうか？

実は、日々、色々と試行錯誤して弄っているのです。あまり、このサイトは弄っていませんが、他のサイトを毎日のように弄っています。

HTMLもCSS、PHPも良く分からないながら、ネットで検索しながら少しづつ勉強しています。

そして、この間気付いたこと、発見したことがあったので記事にします。

Font awesomeはいろいろなところに使える。

マークのようなフォントのfont awesome

こんな感じのマークを見たことあると思います。いろいろなところで使っていますよね。絵のようですが、フォントで作られているので、拡大しても絵がボケたりしないんです。これがフォンアイコンのすごいところです。

拡大してもキレイですよね。

そして、色付けなんですが、フォントなので基本黒です。

cssでclass指定してあげると、色が付きます。

<i class="fas fa-home home fa-3x"></i>/*style.cssでこのように設定します。*/.homeicon {color:orange}

フォントでもこうすると簡単に色が付けられます。

でも、モバイル用のメニューボタンに使用すると、色が付きません。

色々と調べて、フォントアイコンのベースの色は変える事が出来ました。
その下にある文字も直接書き込んで色指定できました。

やり方は、みんなが紹介しているように、

classを指定してstyle.cssでclassを設定する。

これではダメでした。

class指定せず。そのまま、style.cssでclass設定したらどうかなって思ってやってみた。

結果は、完璧。

思い描いたように出来ました。

方法は簡単です。

font awesomeで指定された。

<i class="fas fa-home"></i>このfa-homeが家のフォントを呼び出しているみたいなので、これをclassとして設定してみまた。

こんな感じで直接書き込んでみたら、問題なく表示されました。

だれも、そんな風にやっていないし、基本的方法ではないのかもしれませんが、出来たのでいいとします。

誰かの参考になったらと思います。