---
sourceDocument: オーストラリアのモバイル構成とナビゲーション
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/mobile
Release :
- australia
ft:locale :
- ja-JP
ft:publication_title :
- オーストラリアのモバイル構成とナビゲーション
ft:clusterId :
- mobile
bundleId :
- mobile
workflow :
- Development, Data and Analytics
---
# テーマ変数でフォントアイコンの色を定義します
# テーマ変数を使用して色を定義するようにフォントアイコンを構成する {#ariaid-title1}
* リリースバージョン: Australia
*
* 更新日 2026年03月12日
*
*  所要時間：3分
sys_ux_themeレコードの CSS カスタムプロパティを指定して、フォントアイコンの色を定義します。
## 始める前に
フォントアイコンの色を定義するテーマ変数のsys_ux_themeレコードを知っている必要があります。テーマ変数に必要な値は、sys_ux_themeプロパティテーブルの CSS カスタムプロパティです。
必要なロール：admin
## このタスクについて
テーマ変数はフォントアイコンにのみ適用できます。
画面を構成するワークフロー内でアイコンを構成するか、\[モバイルアプリビルダー\] メニューから \[カードとアイコン\] カテゴリを選択してアイコンを構成できます。この手順では、\[ カード \& アイコン \] カテゴリを使用します。
## 手順
1. 移動先 すべてシステムモバイルモバイルアプリビルダー.
モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
モバイルアプリビルダー カテゴリのホーム画面が表示されます。
3. \[カード \& アイコン\] カテゴリを選択し、\[新規\] を選択します。
4. \[カードまたはアイコンの作成\] ダイアログ ボックスで、\[ アイコン\] を選択し、\[ 続行\] を選択します。
5. アイコンフォームで、 アイコンの名前を入力します 。
アイコンを識別しやすい名前を選択してください。
6. \[タイプ\] ドロップダウンリストから \[フォント\] を選択します。
7. \[外観の設定\] セクションで、\[ スタイル \] フィールドと \[値 \] フィールドに次の情報を入力し、テーマ変数を使用して色を定義するフォントアイコンを構成します。
プラスアイコンを選択して行を追加します。
{#config-font-icon-to-use-color-theme-var__table_mzt_jgj_vwb__entry__2}
| スタイル | 値 |
|-|-|
| フォント名を入力 | 次のいずれかのフォントファミリーを入力します。 * now-mobile-icons これらのアイコンは、画面で使用するように設計されています。リスト画面とブラウザー画面に移動するリストとセクションの宛先に使用します。これらのアイコンを使用して、ユーザーに移動してもらいたいワークフローまたは画面を表します。 * now-mobile-icons-cards これらのアイコンは、カードの本文で使用します。 * now-mobile-icons-buttons これらのアイコンは、機能に使用するように設計されています。カードにあるボタンやクイックアクションに使用できます。 * now-mobile-icons-ALPnavbar これらのアイコンはモバイル画面の右上隅に表示され、別の画面へのナビゲーションとして使用されます。 {#config-font-icon-to-use-color-theme-var__ul_vbq_mgj_vwb} |
| 値を入力 | 使用するフォントファミリーのアイコンを識別するコードを入力します。たとえば、 e903 は、 now-mobile-icons-buttons フォントファミリーのソリッドカートアイコンのコードです。 フォントファミリーのアイコンコードのリストについては、\[参照トピックへのリンクを追加\]を参照してください。 |
| 「 FontColorVariable 」と入力して、アイコンの色のテーマ変数を指定します。 この構成はオプションです。色を指定しない場合、デフォルトのアイコンの色は黒です。16 進数のカラーコードを使用する場合は、16 進数のカラーコードを使用したアイコンの色の設定に関する情報が記載されている \[「フォントタイプアイコンの設定」へのリンク\] を参照してください。 | 使用する色のテーマ変数を入力します。たとえば、次の CSS カスタムプロパティです。 --now-accordion-color |
| 名前を入力してください | フォントファミリーのアイコンにリストされている名前を入力します。たとえば、 now-mobile-icons ファミリーで買い物かごアイコンを使用する場合は、「 買い物かご」と入力します。 フォントファミリのアイコン名のリストについては、 [モバイルアイコンの参照](https://servicenow-prod.fluidtopics.net/sEPYgQ4d3lNXRhUVkDztCw "モバイルアプリビルダーを使用して、これらのアイコンをモバイルアプリに挿入します。")を参照してください。 |
[ ]
{#config-font-icon-to-use-color-theme-var__table_mzt_jgj_vwb}
8. \[Save (保存)\] を選択します。