EC-CUBE

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

2016-08-16

EC-CUBE3.0ではデフォルトでSVGアイコンが用意されています。デフォルトテンプレートをそのまま使うなら問題ないのですが、EC-CUBE3.0でショップのデザインをカスタマイズする際にもっと違うデザインのアイコンが欲しいこともあります。

そんな時はFontAwesomeがおすすめ。６００種類以上用意された膨大な量のアイコンから簡単な方法で使用することができます。

EC-CUBE3.0にFontAwesomeを入れてみる

FontAwesomeとは

FontAwesomeはアイコンフォントを使用できるようになるCSSフレームワーク。HTMLタグにclass名をつけるだけなので、画像を用意しなくてもアイコンを表示できます。

<i class=“fa fa-search”></i>

使えるアイコンの種類は６００以上と膨大な量が用意されており、その一覧は公式サイトで確認できます。
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が正しく導入できていれば結果は以下のようになります。