Question

我对Jekyll很新，但我正在努力建立自己的科技博客。我想在每个帖子中添加一个页脚，其中包含一个按钮（图标）列表，可以分享给社交网络一篇文章。在寻找解决方案时，我看到这些按钮是使用 SVG图像实现的。

因此，在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类，但我没有在任何地方找到它。

Answer 1

在基础jekyll安装中，社交图标是内联svg。请查看_includes/footer.html。

Answer 2

我问的是查看SVG图标的最佳做法

您是否将每个图标都作为实际的.svg图像文件？

如果是，请将其视为与任何其他图像文件完全一样（.jpg，.png，无论如何）。
将它们放入您选择的文件夹（例如/images）并使用<img>标记显示它们：

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

或者如果你正在使用Markdown：

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

Answer 3

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

例如，请查看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徽标图标，您可以根据需要设置样式。

添加到Jekyll社交分享按钮

3 个答案: