Fügen Sie ein Zeichensymbol in einem einzelnen Widget ein

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 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, und 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 im CSS angegebenen Schriftartfamilie identisch ist. Zum Beispiel sollte <i class='material-icons'> mit den im CSS enthaltenen .material-icons identisch sein. 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. 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. 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.