アイコンの追加

操作内容

  • ページヘッダーにアイコンを追加する

ステップ 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 (プレビュー)] ボタンをクリックします。

アバターをページヘッダーに追加後の Visualforce ページのプレビュー

リソース

Design System サイトに、他のドキュメントや例が掲載されています。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる