Dispalying icons in Page titles - updated Feb 29

I was already using images in front of the fixed Menu/Page links (Home, Archives and Tags) and I wanted to be able to do the same for the additional pages. Putting an icon (using Font Awesome) directly in front of the title by either using the ‘Title:’ or first ‘#’ in the Markdown file for a page resulted in actual HTML code being displayed in the link. Not exactly what I was looking for…

Talking with David resulting in a change that now allows custom metadata to be used within {{#menu}} {{/menu}}. Couple of days after the implementation the functionality was broken… {{more}} I contacted David about this in the beginning of February about this (email and twitter both dm and mentions) but I haven’t heard back from him….

Update 2016-02-26: Functionality is broken again. Now even uppercase/lowercase doesn’t matter anymore… Most likely going to give up on this ‘feature’
Update 2016-02-29: The issue has been fixed :)

Custom metadata

For instance in my ‘About me’-page uses the following metadata tags. Using ‘icon’ I have specified which Font Awesome icon to be displayed within the menu-link

Title: About me
Permalink: about
Page: yes
icon: fa-user-secret

It used to be named ‘Icon’, but switched to ‘icon’ to get it to work again. Somehow between {{#menu}} {{/menu}} custom metadata names have become case-sensitive all of a sudden, for instance between {{#entry}} {{/entry}} they are not case-sensitive.

Changes to the template header.html

Changed the code that creates the menu-links from this

  {{#menu}}
  <a href="{{url}}" title="{{label}}">{{label}}</a>
  {{/menu}}

into

{{#menu}}
<a href="{{{url}}}" title="{{label}}">{{#metadata.icon}}<i class="fa {{metadata.icon}}"></i> {{/metadata.icon}}{{label}}</a>
{{/menu}}