EC-CUBE3.0にFontAwesomeを導入する方法

Pocket

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を導入する方法-01

EC-CUBE3.0にFontAwesomeを入れる方法

まずはFontAwesomeのデータをダウンロードし、EC-CUBE3で使用しているテンプレートのCSSフォルダにcssファイルを入れます。

ファイルはFontAwesomeのGet Startedページからダウンロードしてください。ダウンロードボタンを押した後に出てくるポップアップで「No Thanks…」を選べばダウンロードできます。
EC-CUBE3.0にFontAwesomeを導入する方法-02

必要なファイルはcssフォルダにあるfont-awesome.min.cssと、fontsフォルダ全て。これをEC-CUBEのテンプレートにアップロードします。
EC-CUBE3.0にFontAwesomeを導入する方法-03

アップロード先は、html/template/使用中のテンプレート名/。この中にあるcssフォルダにcssファイルを、fontsフォルダはcssフォルダと同じ階層に配置します。
EC-CUBE3.0にFontAwesomeを導入する方法-04

フォルダを配置できたら、テンプレートの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が正しく導入できていれば結果は以下のようになります。
EC-CUBE3.0にFontAwesomeを導入する方法-05

その他のアイコンも同様の方法で変更可能です。アイコンの種類はたくさんあるので色々試してみましょう。