アイコンフォントの使い方

カテゴリー : デザイン
2014年06月09日 (月)

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を入力します。

  今回追加する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 />