EC-CUBE3.0ではデフォルトでSVGアイコンが用意されています。デフォルトテンプレートをそのまま使うなら問題ないのですが、EC-CUBE3.0でショップのデザインをカスタマイズする際にもっと違うデザインのアイコンが欲しいこともあります。
そんな時はFontAwesomeがおすすめ。600種類以上用意された膨大な量のアイコンから簡単な方法で使用することができます。
EC-CUBE3.0にFontAwesomeを入れてみる
FontAwesomeとは
FontAwesomeはアイコンフォントを使用できるようになるCSSフレームワーク。HTMLタグにclass名をつけるだけなので、画像を用意しなくてもアイコンを表示できます。
<i class=“fa fa-search”></i>
使えるアイコンの種類は600以上と膨大な量が用意されており、その一覧は公式サイトで確認できます。
FontAwesomeのアイコン一覧
EC-CUBE3.0にFontAwesomeを入れる方法
まずはFontAwesomeのデータをダウンロードし、EC-CUBE3で使用しているテンプレートのCSSフォルダにcssファイルを入れます。
ファイルはFontAwesomeのGet Startedページからダウンロードしてください。ダウンロードボタンを押した後に出てくるポップアップで「No Thanks…」を選べばダウンロードできます。
必要なファイルはcssフォルダにあるfont-awesome.min.css
と、fontsフォルダ全て。これをEC-CUBEのテンプレートにアップロードします。
アップロード先は、html/template/使用中のテンプレート名/
。この中にあるcssフォルダにcssファイルを、fontsフォルダはcssフォルダと同じ階層に配置します。
フォルダを配置できたら、テンプレートのheadタグ内にFontAwesomeを読み込むリンクを追加。デフォルトテンプレートの場合は、default_frame.twig
になります。
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/font-awesome.min.css">
EC-CUBE3.0でFontAwesomeを使ってみる
ログインリンクではデフォルトでSVGアイコンが使われているので、これをFontAwesomeに変えてみましょう。ログインブロックの編集画面で、SVGアイコンの部分をFontAwesomeに変えるだけです。
<ul class="member_link">
<li>
<a href="{{ url('entry') }}">
<i class="fa fa-user fa-fw"></i>新規会員登録
</a>
</li>
{% if BaseInfo.option_favorite_product == 1 %}
<li>
<a href="{{ url('mypage_favorite') }}">
<i class="fa fa-heart fa-fw"></i>お気に入り
</a>
</li>
{% endif %}
<li>
<a href="{{ url('mypage_login') }}">
<i class="fa fa-lock fa-fw"></i>ログイン
</a>
</li>
</ul>
FontAwesomeが正しく導入できていれば結果は以下のようになります。
その他のアイコンも同様の方法で変更可能です。アイコンの種類はたくさんあるので色々試してみましょう。