Share Your Work

HubSpot Employee
HubSpot Employee

How to Create a Topic Icon

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.

Screen Shot 2017-06-30 at 2.56.10 PM.png

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

1 Reply 1
HubSpot Product Team
HubSpot Product Team

How to Create a Topic Icon