1

I need a navigation in salesforce classic and I use the lightning components to create a navigation. So far so good, but how can I use the icons, if I add the code below to my visualforce the icons doesn't appear. How can I show the icon?

Is it possible to change the color of the section header?

The code below is the sample from the designsystem. 

<div class="demo-only" style="width: 320px;">
<nav class="slds-nav-vertical" aria-label="Sub page">
<div class="slds-nav-vertical__section">
<h2 id="entity-header" class="slds-nav-vertical__title slds-text-title_caps">Reports</h2>
<ul>
<li class="slds-nav-vertical__item slds-is-active"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header" aria-current="page">Recent</a></li>
<li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header">Created by Me</a></li>
<li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header">Private Reports</a></li>
<li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header">Public Reports</a></li>
<li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header">All Reports</a></li>
</ul>
</div>
<div class="slds-nav-vertical__section">
<h2 id="folder-header" class="slds-nav-vertical__title slds-text-title_caps">Folders</h2>
<ul>
<li class="slds-nav-vertical__item">
<a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="folder-header">
<span class="slds-icon_container slds-icon-utility-open_folder slds-line-height_reset" title="Description of icon when needed">
<svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#open_folder" />
</svg>
<span class="slds-assistive-text">Folder</span>
</span>Created by Me</a>
</li>
<li class="slds-nav-vertical__item">
<a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="folder-header">
<span class="slds-icon_container slds-icon-utility-open_folder slds-line-height_reset" title="Description of icon when needed">
<svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#open_folder" />
</svg>
<span class="slds-assistive-text">Folder</span>
</span>Shared with Me</a>
</li>
<li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="folder-header">All Reports</a></li>
</ul>
</div>
</nav>
</div>
Improve this question

1 Answer 1

Reset to default
1

Using SLDS Icons in Visualforce says:

The Lightning Design System (SLDS) includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.

To use SVG spritemap icons in your Visualforce page, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to the <html> tag.

Alternately, use the png format instead of svg format if you don't want to mess around with adding XML namespaces to your code.

Improve this answer
2
  • Ok, but this codesnippet is already in the code? Or where I have to insert this code?
    – peXeq
    Feb 1, 2018 at 6:52
  • @peXeq As far as I can tell, it must be on the HTML tag itself for it to work correctly in all browsers. You might want to look at the documentation.
    – sfdcfox
    Feb 1, 2018 at 7:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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