HUGO

Mapping tags to icons

support
#1

I have various posts with tags. I would like to define in my data a mapping between tags and icons.
For example,

[chess]
    icon = "<i class=\"fas fa-chess-board\"></i>"
[accessible]
    icon = "<i class=\"fab fa-accessible-icon\"></i>"

Say page A has tags = ["chess"], B has tags = ["accessible"], C has tags = [], and D has tags = ["chess", "accessible"]

I want to add next to the title the various icons depending on the post’s tags.

Right now I use something like this in the loop

<span class="project-title">
     {{ if in .Params.tags "SomeTag" }}
          <i class="fas fa-flask"></i>
     {{ end }}
     {{ if in .Params.tags "OtherTag" }}
          <i class="fas fa-code"></i>
     {{ end }}
     {{ if in .Params.tags "CoolTag" }}
          <i class="fas fa-chess-board"></i>
     {{ end }}
     <a href="{{ .Permalink }}">
          {{ .Title }}
     </a>
</span>
#2

You can use Data to do this more elegantly. On my phone so posting the full template link, but you don’t need everything in that code to do what you want.

I use icon mapping for taxonomies (tags, categories); you can do the same for taxonomy terms.

#3

A post was split to a new topic: Mapping icons to tags

#4