Add an Icon
操作内容
- ページヘッダーにアイコンを追加する
ステップ 1: アバターを追加する
<!-- HEADING AREA -->
コメントの間のコードを次のコードに置き換えます。
<!-- 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 -->
ステップ 2: プレビューする
ページを保存して、[Preview (プレビュー)] ボタンをクリックします。
リソース
Design System サイトに、他のドキュメントや例が掲載されています。