Add an Icon
Remarque
Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.
Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.
Ce que vous allez faire
- Ajouter une icône à l’en-tête de la page
Étape 1 : Ajout d’un avatar
Remplacez le code entre les commentaires <!-- HEADING AREA --> par le suivant :
<!-- 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 --> Étape 2 : Prévisualiser
Enregistrez votre page, puis cliquez sur le bouton Preview (Aperçu).
Ressources
Le site Design System contient une documentation et des exemples supplémentaires.
