Assign a font awesome icon to a tag that covers the entire website

I've got this YAML front matter on each post:

---
title:       Title
subtitle:    Description
date:        2017-09-26 13:15:18 +0200
post-type:   front-end

tages:
 - HTML
 - CSS
 - jQuery
---

And I've got this code to show each tag in a list.

{% for tag in page.tags %}
    <a class="btn btn-primary" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }}</a>
{% endfor %}

Now I want to add a font-awesome icon inside each tag by adding:

<span class="badge badge-light"><i class="fab fa-..."></i>

Like so:

{% for tag in page.tags %}
    <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab fa-github"></i></span></a>
{% endfor %}

Now here's my problem. What I want to accomplish is to manually assign a font awesome icon link to a tag. And when fill in one or more tags in the YAML front matter I want said font awesome link to come with it. But I have no clue how to do it. I'm kinda new to Jekyll.

My first thought was to somehow use config.yml but again I didn't know how to approach it or what question to formulate in google. I was hoping one of you could point me in the right direction.

Solution

I think that you have two opportunities for doing so. You either have a key value pair in a seperate or same yaml which maps tag to icon or you make your tags list more complex with an item type describing both tag and icon. I will give you a brief sample of what I try to explain.

Sample 1

post.yaml

tags:
- HTML
- CSS
- jQuery

mapping.yaml (seperate file that has to be parsed by your code yet, name it as you want it)

tags:
  HTML: fa-html
  CSS: fa-css
  jQuery: fa-js

In your template you would get the font awesome icon class name like so:

// ... load mapping yaml somewhere over here into `mapping` variable
{% for tag in page.tags %}
  <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab {{ mapping.tags[tag] }}"></i></span></a>
{% endfor %}

{{ mapping.tags[tag] }} resolves your class name by key (given the tag)

Sample 2

tags:
- name: HTML
  icon: fa-html
- name: CSS
  icon: fa-css
- name: jQuery
  icon: fa-js

In your template you would get the font awesome icon class name like so:

{% for tag in page.tags %}
  <a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag.name | slugify }}" rel="tag">{{ tag.name }} <span class="badge badge-light"><i class="fab tag.icon }}"></i></span></a>
{% endfor %}

Do not forget to think about a fallback if no icon is provided. I'm not sure which technology you are using, that's why all of my code is pseudo. However you should make sure to fallback to a default class maybe - or at least to some point prevent ugly exceptions within your HTML.