0

This question already has an answer here:

In my VF page i have header .I want to display info icon before my text (before Note).

Vf Code

<div class="slds-page-header">
    <apex:outputpanel rendered="{!isSuccess}">
        <span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
            <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
            </svg>
            <span class="slds-assistive-text">Description of icon when needed</span>
        </span>
        <span style="font-family: sans-serif;font-size: 16px;"> <center><i><b>Note:</b> Please view the Records</i></center></span>
    </apex:outputpanel>
</div>

marked as duplicate by sfdcfox visualforce Feb 12 at 14:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Assuming you've already setup the page for SLDS styling (trailhead link), then you're likely looking for this code snippet (taken from the SLDS page on icons):

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>
  <span class="slds-assistive-text">Description of icon when needed</span>
</span>

For more information on what icons are available, you can check out the full list here!

  • I have updated my code with the line you provided .But no luck..The icon is not visible after adding the code – jessy Feb 12 at 11:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.