javascriptsvgjekyllshare-button

Add to Jekyll social share buttons


I am pretty new to Jekyll, but I am trying to build my own tech blog over it. I want to add to each post a footer containing a list of buttons (icons) to share to social networks an article. Searching around for a solution, I've seen that such buttons are implemented using SVG images.

So, inside the post.html file, I've added an include to a share.html file, where to refer to these share buttons.

The problem is: where have I to put the SVG icons? I've seen over the Internet that in many jekyll blogs' filesystem there are not SVG file at all, What the hell is going on?

EDITED I know that it is possible to inline an svg icon using the svg tag. But it is not what I meant. I post here an example that I found

 <a href="https://twitter.com/share?url={{ site.url }}{{ page.url }}&amp;text={{ page.title | cgi_escape }}"
    title="Share on Twitter" class="button">
       <span class="count count-twitter">0</span>
          <i class="icon icon-twitter notranslate" aria-hidden="true"></i>
 </a>

I've searched for icon-twitter class in all the Git repository, but I did not find that anywhere.


Solution

  • Finally I've found the answer to my question. On the internet there are some cool sites that give you the oppotunity to link their SVG icons, hosted on some CDN.

    For example, take a look at Font Awsome. As stated in the Get Started section, you can link their resources in your site:

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    

    I've put the link instruction into the head.html file. Then you can add one of their awsome svg icon to your site using some CSS and the <i> element, like this:

    <i class="fa fa-stack-overflow"></i>
    

    This instruction adds a stackoverflow logo icon that you can style as you want.