How to Create a Topic Icon

[EricSalvi]

Hey everyone.
I wanted to share with you this new HubL idea.
I decided to create a topic icon that shows on my posts on the listing page. To achieve this I needed some way to tell the CSS what topics each post has. 
This is the code I came up with. 

<div class="post-item {{ content.topic_list|last|string|lower|replace(' ','-') }}">

On the div for post-items I added this HubL configuration. Let's break it down.

• First, content.topic_list will give us the entire list of all the topics for that post.
• The last filter takes the last topic of my list. 
• String will convert it to a string to use in the HTML.
• Lower converts them all to lower case.
• Replace finds the spaces, if more than one word and replaces them with a dash.

When all said and done I now will have the topic showing as a CSS class in the HTML. With my CSS code using font awesome to pull in the correct icon. This may not work for all. The way I use my topics is I need the last filter because I rely on the last topic added for each post. This would work amazingly well if you only use one topic per post. 
Live example at http://www.tinyhouseofmouse.com

[roisinkirby]