既存のフォント・アイコンの置換

既存のフォント・アイコンを置き換えるには、以下の手順を実行します。

1. カスタム・アイコン・フォントを生成します。 カスタム・イメージからアイコン・フォントを生成できます。
   注: 各カスタム・イメージの名前が、アプリケーションで置換する対応するアイコンの名前と同じであることを確認してください。
2. 生成されたすべてのフォント・フォーマット (.ttf, .svg, .eot, .woff) を <RUNTIME>/theme/fonts フォルダーにコピーします。
3. 生成されたアイコン・フォントの CSS を「extn-app-store.scss」ファイルにコピーし、CSS 内のフォント URL が (.ttf, .svg, .eot, .woff) フォント・ファイルの場所を指していることを確認します。
   注:

   • フォントの生成時に使用されるアイコン名はアプリケーション内のアイコン名と同じであるため、新しいアイコンを選択する必要があるカスタム font-family を使用して CSS を更新することが重要です。
   • CSS 内のデフォルトの font-family は、デフォルトのアプリケーション・フォント・アイコンに置き換わるため、カスタムの font-family に置き換えないでください。
4. カスタマイズをテストします。

既存のフォント・アイコンを置き換えるサンプル・コード・スニペット:

/* Specifying the custom icon font details */
   @font-face {
    font-family: 'custom-glyphicons';
    src: url('../fonts/custom-glyphicons.eot?uxyslh');
    src: url('../fonts/custom-glyphicons.eot?uxyslh#iefix') format('embedded-opentype'),
    url('../fonts/custom-glyphicons.ttf?uxyslh') format('truetype'),
    url('../fonts/custom-glyphicons.woff?uxyslh') format('woff'),
    url('../fonts/custom-glyphicons.svg?uxyslh#custom-glyphicons') format('svg');
    font-weight: normal;
    font-style: normal;
    }
/* Specifying the font-family to display the icons */ 
    .app-icon-findProducts_generic_02:before{
    content: "\e900";
    font-family: 'custom-glyphicons' !important;
    }