---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Inclure une icône de police dans un widget unique

# Inclure une icône de police dans un widget unique {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Si vous souhaitez qu'un seul widget ait accès à une icône de police, incluez l'icône de police dans un seul widget.

## Avant de commencer

Rôle requis : admin ou sp_admin

## Pourquoi et quand exécuter cette tâche

L'ajout d'une icône à un widget spécifique permet de conserver l'icône dans le champ d'application et l'empêche d'interférer avec d'autres CSS de la page.

## Procédure

1. Dans l'interface utilisateur de la plateforme, accédez à Portail de servicesWidgets, puis cliquez sur le widget auquel vous souhaitez ajouter une icône.
2. Joignez le fichier d'icône individuel à l'enregistrement de widget.
3. Dans le modèle HTML, incluez quelque chose comme ce qui suit :  

       <div>
       <i class='font-family'>icon_name</i> you did it!
       </div>

   Assurez-vous que la classe est exactement la même que la famille de polices appelée dans le CSS. Par exemple, `<i class='material-icons'>` doit être identique aux `icônes .material-incluses` dans le CSS. Le `icon_name` doit correspondre au nom du fichier que vous avez joint.
4. Dans le champ CSS du widget, ajoutez le CSS de la définition d'icône de police.  
   La plupart des jeux d'icônes de police incluent un fichier CSS similaire aux icônes de matériau utilisées ci-dessous. Utilisez le sys_id de la pièce jointe en tant que `src` dans le CSS. Par exemple :

       /* fallback */
       @font-face {
         font-family: 'Material Icons';
         font-style: normal;
         font-weight: 400;
         src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
       }

       .material-icons {
         font-family: 'Material Icons';
         font-weight: normal;
         font-style: normal;
         font-size: 24px;  /* Preferred icon size */
         display: inline-block;
         line-height: 1;
         text-transform: none;
         letter-spacing: normal;
         word-wrap: normal;
         white-space: nowrap;
         direction: ltr;

         /* Support for all WebKit browsers. */
         -webkit-font-smoothing: antialiased;
         /* Support for Safari and Chrome. */
         text-rendering: optimizeLegibility;

         /* Support for Firefox. */
         -moz-osx-font-smoothing: grayscale;

         /* Support for IE. */
         font-feature-settings: 'liga';
       }

{#include-widget-icon__ol_tyy_n13_qy}

## Résultats

Icône que vous pouvez sélectionner dans le widget ou l'instance de widget. Par exemple :

![Exemple d’icône qui correspond au code HTML de l’exemple de widget, avec un cercle de vérification indiquant « vous l’avez fait ! ».]()

## Que faire ensuite

Pour utiliser des icônes de police personnalisées dans les widgets, ajoutez l'icône à une page ou faites-en une dépendance de widget.
**Tâches associées**   

* [Inclure des icônes de police sur une page](https://servicenow-prod.fluidtopics.net/57axVLFXZcK0n_U2Qwfjdg#include-font-icons-on-page "Incluez des icônes de police sur une page afin que tous les widgets de la page aient accès à l’ensemble d’icônes de police.")
* [Inclure les icônes de police en tant que dépendance de widget](https://servicenow-prod.fluidtopics.net/d2WVdM0dTSYUVmHORiGGGw "Vous pouvez inclure des icônes de police partout où un widget est chargé en les incluant en tant que dépendance de widget.")