Fügen Sie ein Zeichensymbol in einem einzelnen Widget ein

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 1 Minute Lesedauer

    • Wenn nur ein Widget Zugriff auf ein Zeichensymbol haben soll, schließen Sie das Zeichensymbol in ein einzelnes Widget ein.

    Vorbereitungen

    Erforderliche Rolle: admin oder sp_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Durch das Hinzufügen eines Symbols zu einem bestimmten Widget wird das Symbol beibehalten und verhindert, dass andere CSS auf der Seite beeinträchtigt werden.

    Prozedur

    1. Navigieren Sie in der Plattform-UI zu Serviceportal > Widgets, Klicken Sie dann auf das Widget, dem Sie ein Symbol hinzufügen möchten.
    2. Hängen Sie die einzelne Symboldatei an den Widget-Datensatz an.
    3. Fügen Sie in die HTML-Vorlage etwa Folgendes ein: 
      <div>
<i class='font-family'>icon_name</i> you did it!
</div>

      Stellen Sie sicher, dass die Klasse genau mit der Schriftartfamilie identisch ist, die im CSS genannt wird. Beispiel: <i class='material-icons'>Muss mit identisch sein .Material-Symbole Enthalten in CSS. Der Symbolname sollte mit dem Namen der angehängten Datei übereinstimmen.

    4. Fügen Sie im CSS-Feld für das Widget das CSS für die Definition des Zeichensatzes hinzu.

      Die meisten Zeichensatz-Icons enthalten eine CSS-Datei, die den Material-Icons ähnlich ist, die unten verwendet werden. Verwenden Sie die sys_id des Anhangs als src in der CSS. Zum Beispiel:

      /* 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';
}

    Ergebnisse

    Ein Symbol, das Sie in der Widget- oder Widget-Instanz auswählen können. Zum Beispiel:

    Beispielsymbol, das mit dem HTML-Code im Widget-Beispiel übereinstimmt - mit einem Kontrollkreis der sagt „Sie haben es geschafft!“

    Nächste Maßnahme

    Um benutzerdefinierte Zeichensymbole für Widgets zu verwenden, fügen Sie das Symbol einer Seite hinzu oder machen Sie es zu einer Widgetabhängigkeit.