Symbole

Sie können jedem Text auf einer DevSite-Seite Symbole hinzufügen, indem Sie die vorinstallierte Material Icon Font verwenden . Sie können auch Schaltflächensymbole verwenden, wenn Sie auf eine Schaltfläche Bezug nehmen.

Material Design-Symbole

So fügen Sie auf einer DevSite-Seite ein Materialsymbol inline in den Text ein:

  1. Rufen Sie https://fonts.google.com/icons auf (nicht go/icons).
  2. Suchen Sie im Feld Material Icons suchen nach dem gewünschten Symbol.
  3. Klicken Sie auf das Symbol, um Nutzungsinformationen aufzurufen.
  4. Kopieren Sie im Bereich „Symbolschriftart“ des Bereichs mit den Nutzungsinformationen den Namen des Symbols aus dem zweiten Codeblock.

  5. Fügen Sie den folgenden Code in den Text ein, um das Symbol einzufügen:

    <span class="material-icons">ICON_NAME</span>

  6. Wenn Sie die Farbe (oder bei Bedarf die Größe) des Symbols ändern möchten, verwenden Sie ein style-Attribut.

Beispiel

Der folgende Code führt zum Text „Klicken Sie auf den Erweiterungspfeil , um Details zu einem bestimmten Ereignis aufzurufen.“

To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.

Sie können <i> anstelle von <span> verwenden. Beide Tags funktionieren, „span“ ist jedoch semantisch genauer. Für „Klicken Sie auf  Löschen Löschen“ können Sie beispielsweise den folgenden Code verwenden:

Click <i class="material-icons">delete</i> <b>Delete</b>.

Für jedes Element mit class="material-icons" fügt DevSite die Attribute aria-hidden="true" und translate="no" hinzu. Dadurch wird die Nutzerfreundlichkeit für Screenreader verbessert, da unnötige Elemente aus dem Zugänglichkeitsbaum entfernt werden. Außerdem wird verhindert, dass der Name des Symbols fälschlicherweise übersetzt wird.

Schaltflächensymbole

Wenn Sie eine Anleitung mit einem Schaltflächensymbol dokumentieren, fügen Sie dem <img>-Tag class="inline-icon" hinzu. Weitere Informationen finden Sie im Styleguide für Schaltflächen und Symbole.

Beispiel

Der folgende Code führt zum Text „Klicken Sie auf Projekt erstellen“.

Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.