Adding Icons to Navigation

Alex Jeffers said:

I need to add a set of icons against my navigation bar, each item in the navigation having a different icon. I'm new to Perch and also PHP (background more in JS). Here is the site as it currently stands, with hard-coded icons and navigation bar. How would I go about doing this using the perch_pages_navigation function. Here is the code from the item.html file

`<perch:before> <ul id="slide-out" class="side-nav fixed"> </perch:before>

<li id="<perch:content id='perch_item_index'/>" <perch:if exists="current_page"> class="active"</perch:if> > <a class="waves-effect" href="<perch:pages id="pagePath" />"> <perch:pages id="pageNavText"/> </a> <div class ="divider side-divider"></div> <perch:pages id="subitems" encode="false"/> </li>

<perch:after> </ul> </perch:after>`

Alex, I am not seeing the "hard coded" images in the code you post. Please post your entire template as well as example HTML your expecting from the template.

Alex, I am not seeing the "hard coded" images in the code you post. Please post your entire template as well as example HTML your expecting from the template.

Hi Robert, the code I am trying to achieve would be:

<ul id="slide-out" class="side-nav fixed" style="transform: translateX(0px);">
<li id="one" class="active"><a class="waves-effect" href="index.html"><i class="fa fa-id-card" aria-hidden="true">      </i>Famous Dyslexic People</a></li>
<div class="divider side-divider"></div>
<li id="two"><a class="waves-effect" href="learning.html"><i class="fa fa-leanpub" aria-hidden="true"></i>How It Affects Learning</a></li>
<div class="divider side-divider"></div>
<li id="three"><a class="waves-effect" href="classroom.html"><i class="fa fa-graduation-cap" aria-hidden="true"></i>In The Classroom</a></li>
<div class="divider side-divider"></div>
...
</ul>

Where each of the menu items has a different <i class="fa ... ></i>

Thanks Drew, but could you give me a bit more information about the page attributes please? I can't see anything about it on the Docs page. I had thought that in my template I would need to set up a bunch of <perch:if> statements to accomodate each of the different icons but if there was a way to do it through the attributes, that would be really handy.

Thanks Rachel, my bad - It's been a long day and searching didn't cross my mind! I'll fix this tomorrow.