Adding Icons

This is a brief guide to finding and adding your own icons to the footer section of jekyll-now.

1. Find the icon you want. I suggest going to here to find ones that fit in the same set as the others.
2. Copy the raw XML text that makes up the SVG icon and save it somewhere, you'll need this in the next step.
3. You will need to encode the SVG icon in base64. I like using mobilefish.
4. Copy the XML text into the "Source Data" text box.
5. Because the original icons are sized differently, make sure to change the width and hight to 40px.
6. Use the "Encode" conversion method, select your output, change max characters per line 0, so it all copies on one line. Type in the access code to tell the site you're not a robot. Click convert to.
7. Copy your encoded text in sass/_svg-icons.scss and add a line that looks like

&.SOMENAME { background-image: url(data:image/svg+xml;base64,<your encoded string here>); }

Congrats you have an encoded icon!

1. Now to get it to show up on your website, you need to tell Jekyll where to find it and where to link to. In _includes/svg-icons.html include a line that looks like:

   {% if site.footer-links.SOMENAME %}<a href="your LINK here/{{ site.footer-links.SOMENAME }}"><i class="svg-icon SOMENAME"></i></a>{% endif %}
   

   Where "SOMENAME" is the name you gave it in the previous step, and the link directs to the site you want. Next, in _config.yml add a line under footer-links with the name of your icon, and your username or unique path.