Inclure une icône de police dans un seul widget

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 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 garde l’icône incluse 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 pour la définition font-icon.

      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

    Une 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 dans l’exemple du widget, avec un cercle de coche 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.