Configurer une icône de police pour utiliser une variable de thème pour définir sa couleur

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 3 minutes de lecture

    • Spécifiez la propriété personnalisée CSS d’un enregistrement sys_ux_theme pour définir la couleur d’une icône de police.

    Avant de commencer

    Vous devez connaître l’enregistrement sys_ux_theme de la variable de thème que vous souhaitez utiliser pour définir la couleur de votre icône de police. La valeur dont vous avez besoin pour la variable de thème est la propriété personnalisée CSS dans la table des propriétés sys_ux_theme.

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Les variables de thème ne peuvent être appliquées qu’aux icônes de police.

    Vous pouvez configurer une icône dans le flux de travail de configuration d’un écran ou vous pouvez configurer une icône en sélectionnant la catégorie Cartes et icônes dans le Générateur d'application mobile menu. Cette procédure utilise la catégorie Cartes et icônes .

    Procédure

    1. Accédez à la Tout > Mobile système > Mobile App Builder.
      Générateur d'application mobile s'ouvre dans un onglet de navigateur séparé et affiche l'écran de sélection du périmètre de l'application.
    2. Recherchez le périmètre de l'application dans lequel vous travaillez, puis sélectionnez le nom du périmètre de l'application.
      L'écran d'accueil des catégories Générateur d'application mobile s'affiche.
    3. Sélectionnez la catégorie Cartes et icônes , puis sélectionnez Nouveau.
    4. Dans la boîte de dialogue Créer une carte ou une icône, sélectionnez Icône, puis Continuer.
    5. Dans le formulaire Icône, entrez un nom pour l’icône.
      Assurez-vous de choisir un nom qui facilite l’identification de l’icône.
    6. Dans la liste déroulante Type, sélectionnez Police.
    7. Dans la section Définir l’apparence, entrez les informations suivantes dans les champs Style et Valeur pour configurer l’icône de police qui utilise une variable de thème pour définir sa couleur.

      Sélectionnez l’icône plus pour ajouter une ligne.

      Style Valeur
      Saisir le FontName

      Entrez l’une des familles de polices suivantes :

      • icônes now-mobile

        Ces icônes sont conçues pour être utilisées dans les écrans. Utilisez-les pour les listes et les destinations de section qui vont vers les écrans de liste et les écrans de navigateur. Utilisez ces icônes pour représenter un flux de travail ou un écran vers lequel vous souhaitez que les utilisateurs accèdent.

      • now-mobile-icons-cards

        Utilisez ces icônes dans le corps des cartes.

      • now-mobile-icons-buttons

        Ces icônes sont conçues pour être utilisées pour des fonctions. Ils peuvent être utilisés sur les boutons situés sur les cartes ou pour des actions rapides.

      • now-mobile-icons-ALPnavbar

        Ces icônes apparaissent dans le coin supérieur droit de l’écran de votre mobile et sont utilisées pour naviguer vers un autre écran.
      Saisir une valeur

      Entrez le code qui identifie l’icône dans la famille de polices que vous souhaitez utiliser. Par exemple, e903 est le code de l’icône de panier plein dans la now-mobile-icons-buttons famille de polices.

      Pour obtenir la liste des codes d’icônes des familles de polices, consultez [ajouter un lien vers les rubriques de référence].

      Entrez FontColorVariable pour spécifier une variable de thème pour la couleur de votre icône.

      Cette configuration est facultative. Si vous ne spécifiez pas de couleur, la couleur par défaut de l’icône est le noir. Si vous souhaitez utiliser un code de couleur hexadécimal, consultez [lien vers « Configurer les icônes de type de police »], qui contient des informations sur la configuration de la couleur de l’icône à l’aide de codes de couleur hexadécimaux.

      Entrez la variable de thème correspondant à la couleur que vous souhaitez utiliser. Par exemple, la propriété personnalisée CSS suivante :

      --now-accordéon-couleur
      Entrer un nom

      Saisissez le nom répertorié pour l’icône dans la famille de polices. Par exemple, si vous souhaitez utiliser l’icône du panier d’achats dans la now-mobile-icons famille, entrez Panier.

      Pour obtenir la liste des noms des icônes de famille de polices, reportez-vous à la Référence d’icône mobilesection .
    8. Sélectionnez Enregistrer.