Inclure une icône de police dans un widget unique

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 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 services > Widgets, 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';
}

    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.