添加到Jekyll社交分享按钮

我对Jekyll来说很新，但我正在尝试在它上面构建自己的科技博客。我想为每个帖子添加一个页脚，其中包含一个按钮（图标）列表，用于向社交网络分享一篇文章。搜索周围的解决方案，我已经看到，这样的按钮是通过使用SVG图像实现的。添加到Jekyll社交分享按钮

因此，post.html文件中，我已经添加了一个包含到share.html文件，其中提到这些共享按钮。

问题是：我要在哪里放SVG图标？我在互联网上看到，在许多jekyll博客的文件系统中根本没有SVG文件，到底发生了什么？

EDITED 我知道这是可能的使用svg标签内联的SVG图标。但这不是我的意思。我张贴在这里，我发现

<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>

我搜索了所有Git仓库icon-twitter类，但我没有找到任何地方的例子。

来源

2015-04-16 riccardo.cardin

也许我错了，但你只是问如何在Jekyll中显示'.svg'文件吗？ –

我在问哪些是查看SVG图标的最佳实践。我无法理解我给出的例子。 –

最后我已经找到了我的问题的答案。在互联网上有一些很酷的网站，让你有机会链接他们在某些CDN上托管的SVG图标。

例如，看看Font Awsome。正如Get Started节所述，您可以在您的网站链接他们的资源：

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

我已经把link指令到head.html文件。然后，你可以使用一些CSS和<i>元素，像这样添加一个自己的要命SVG图标到您的网站：

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

该指令将可以风格你想要一个stackoverflow标志图标。

来源

2015-04-27 05:52:10

在基本的jekyll安装中，社交图标是内嵌svg。看一看_includes/footer.html。

来源

2015-04-16 18:01:59

感谢您的回答。我更新了我的问题并添加了一些缺失的细节 –

我发布了一个无效链接。 –

我问这是查看SVG图标

的最佳做法，你有每个图标作为实际.svg图像文件？

如果是的话，只是把他们完全像任何其他图像文件（.jpg，.png，等等）。
置于你选择的文件夹（例如/images）和使用<img>标签，以显示他们：

<img src="/images/icon.svg" />

或者，如果你使用降价：

![alt text](/images/icon.svg)

来源

2015-04-17 21:41:45

添加到Jekyll社交分享按钮

回答

相关问题