CS-Cartにおいて
・アイコンフォント
を利用する方法を説明します。
【アイコンフォントの利用方法】
手順.1 アイコンフォントの読み込み
アイコンフォントもWebフォントと同様にサーバーへアップロードして読み込ませることが可能ですが、CDNサービスが利用できるWebフォントもあります。今回利用するアイコンフォント(Font Awesome)はCNDサービスに対応しているため導入が簡単です。
以下のファイルにアイコンフォントを読み込むリンクタグを追記します。
CS-Cartインストールディレクトリ/design/themes/利用中のテーマディレクトリ/templates/addons/localization_jp/hooks/index/styles.post.tpl
追記するリンクタグは上記Font Awesomeのページに記載されています。
※)2015/09/01現在のタグは以下のとおりです。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
上記リンクタグをファイルに追記してサーバーにアップロードします。
手順.2 アイコンフォントの表示
既にアイコンフォントを利用する準備はできています。
例としてトップページにアイコンフォントをHTMLブロックにより表示します。
管理画面 > デザイン > レイアウト > トップページ(タブ)
コンテンツグリッド内にあるメインコンテンツブロックが収納されている
グリッド(グリッド16)の右下「+」 アイコンをクリックしてブロックの追加を選択します。
ポップアップウインドウで「ブロックの追加」(タブ)をクリックし「HTMLブロックを選択します。
一般タブにブロックの名前を入力しコンテンツタブよりHTMLを入力します。
<i class="fa fa-camera-retro fa-4x"></> カメラアイコン<br /> <i class="fa fa-home fa-4x"></> ホームアイコン<br /> <i class="fa fa-coffee fa-4x"></> コーヒーカップアイコン<br /> <i class="fa fa-rss fa-4x"></> RSSアイコン<br />