Add an Icon
Hinweis
Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Vergewissern Sie sich, dass Sie in Ihrem Trailhead-Playground (1) das Gebietsschema auf USA und (2) die Sprache auf Englisch festgelegt haben. (3) Verwenden Sie zum Kopieren und Einfügen nur die englischen Werte. Die zugehörigen Anweisungen finden Sie hier.
Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".
Ihre Aufgaben
- Fügen Sie ein Symbol zum Kopf (head) der Seite hinzu.
Schritt 1: Hinzufügen eines Avatars
Ersetzen Sie den Code zwischen den <!-- HEADING AREA -->-Kommentaren durch folgenden:
<!-- HEADING AREA --> <!-- MEDIA OBJECT = FIGURE + BODY --> <div class="slds-media slds-no-space slds-grow"> <div class="slds-media__figure"> <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use> </svg> </div> <div class="slds-media__body"> <p class="slds-text-title_caps slds-line-height_reset">Contacts</p> <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My Contacts</h1> </div> </div> <!-- / MEDIA OBJECT --> <!-- /HEADING AREA --> Schritt 2: Vorschau
Speichern Sie die Seite und klicken Sie auf die Schaltfläche "Preview (Vorschau)".
Ressourcen
Auf der Design System-Website finden Sie weitere Dokumentation und Beispiele.
