テーマ変数を使用してその色を定義するようにフォントアイコンを構成する

sys_ux_themeレコードの CSS カスタムプロパティを指定して、フォントアイコンの色を定義します。

始める前に

フォントアイコンの色を定義するために使用するテーマ変数のsys_ux_themeレコードを知っている必要があります。テーマ変数に必要な値は、sys_ux_themeプロパティテーブルの CSS カスタムプロパティです。

必要なロール：admin

このタスクについて

テーマ変数は、フォントアイコンにのみ適用できます。

画面構成のワークフロー内でアイコンを構成するか、メニューから [カードとアイコン ] カテゴリ モバイルアプリビルダー を選択してアイコンを構成することができます。この手順では、[ カードとアイコン ] カテゴリを使用します。

手順

1. 移動先 すべて > システムモバイル > Mobile App Builder.
   モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
   モバイルアプリビルダー カテゴリのホーム画面が表示されます。
3. [カードとアイコン] カテゴリを選択し、[新規] を選択します。
4. カードまたはアイコンの作成 ダイアログ ボックスで、 アイコン を選択し、 続行 を選択します。
5. [アイコン] フォームで、アイコン の [名前 ] を入力します。
   アイコンを簡単に識別できる名前を選択してください。
6. 「タイプ」ドロップダウンリストから、「 フォント」を選択します。
7. [外観の設定] セクションで、[ スタイル] フィールドと [値 ] フィールドに次の情報を入力し、テーマ変数を使用して色を定義するフォント アイコンを構成します。

   プラスアイコンを選択して行を追加します。

   スタイル	値
   フォント名を入力	次のいずれかのフォントファミリを入力します。 now-mobile-icons これらのアイコンは、画面で使用するように設計されています。リスト画面やブラウザー画面に移動するリストやセクションの宛先に使用します。これらのアイコンを使用して、ユーザーが移動するワークフローまたは画面を表します。 now-mobile-icons-cards カードの本文でこれらのアイコンを使用します。 now-mobile-icons-buttons これらのアイコンは、機能に使用するように設計されています。カードにあるボタンやクイックアクションで使用できます。 now-mobile-icons-ALPnavbar これらのアイコンはモバイル画面の右上隅に表示され、別の画面へのナビゲーションとして使用されます。
   値を入力	使用するフォントファミリーのアイコンを識別するコードを入力します。たとえば、 e903 はフォント ファミリの now-mobile-icons-buttons 単色の買い物かごアイコンのコードです。 フォント ファミリのアイコン コードの一覧については、[参照トピックへのリンクを追加] を参照してください。
   「FontColorVariable」と入力して、アイコンの色のテーマ変数を指定します。 この構成はオプションです。色を指定しない場合、デフォルトのアイコンの色は黒です。16 進数のカラーコードを使用する場合は、16 進数のカラーコードを使用したアイコンの色の構成に関する情報が記載されている [「フォントタイプアイコンの構成」へのリンク] を参照してください。	使用する色のテーマ変数を入力します。たとえば、次の CSS カスタムプロパティがあるとします。 --now-accordion-color
   名前を入力	フォントファミリのアイコンにリストされている名前を入力します。たとえば、ファミリで now-mobile-icons 買い物かごアイコンを使用する場合は、「 買い物かご」と入力します。 フォントファミリのアイコン名のリストについては、「」 モバイルアイコン参照を参照してください。

8. [Save (保存)] を選択します。