テーマ変数を使用して色を定義するフォントアイコンを構成します
sys_ux_themeレコードの CSS カスタムプロパティを指定して、フォントアイコンの色を定義します。
始める前に
フォントアイコンの色を定義するテーマ変数のsys_ux_themeレコードを知っている必要があります。テーマ変数に必要な値は、sys_ux_themeプロパティテーブルの CSS カスタムプロパティです。
必要なロール：アドミン
このタスクについて
テーマ変数はフォントアイコンにのみ適用できます。
画面を構成するワークフロー内でアイコンを構成するか、[モバイルアプリビルダー] メニューから [カードとアイコン] カテゴリを選択してアイコンを構成できます。この手順では、[ カード & アイコン ] カテゴリを使用します。
手順
-
移動先 すべて > システムモバイル > モバイルアプリビルダー.
モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
-
作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
モバイルアプリビルダー カテゴリのホーム画面が表示されます。
- [カード & アイコン] カテゴリを選択し、[新規] を選択します。
- [カードまたはアイコンの作成] ダイアログ ボックスで、[ アイコン] を選択し、[ 続行] を選択します。
-
アイコンフォームで、 アイコンの名前を入力します 。
アイコンを識別しやすい名前を選択してください。
- [タイプ] ドロップダウンリストから [フォント] を選択します。
-
[外観の設定] セクションで、[ スタイル ] フィールドと [値 ] フィールドに次の情報を入力し、テーマ変数を使用して色を定義するフォントアイコンを構成します。
プラスアイコンを選択して行を追加します。
スタイル 値 フォント名を入力 次のいずれかのフォントファミリーを入力します。
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 ファミリーで買い物かごアイコンを使用する場合は、「 買い物かご」と入力します。
フォントファミリのアイコン名のリストについては、 モバイルアイコンの参照を参照してください。
- [保存] をクリックします。