2

我对 Jekyll 很陌生，但我正在尝试在它之上建立自己的技术博客。我想在每个帖子中添加一个包含按钮（图标）列表的页脚，以便与社交网络分享一篇文章。在四处寻找解决方案时，我发现此类按钮是使用SVG images实现的。

所以，在post.html文件中，我添加了一个包含到share.html文件中，在哪里引用这些共享按钮。

问题是：我应该把 SVG 图标放在哪里？我在网上看到很多 jekyll 博客的文件系统中根本没有 SVG 文件，这到底是怎么回事？

已编辑 我知道可以使用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类，但我在任何地方都没有找到。

4

3 回答 3

3

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

于 2015-04-16T18:01:59.043 回答
1

我在问哪些是查看 SVG 图标的最佳实践

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

如果是，只需将它们完全视为任何其他图像文件（.jpg, .png, 不管）。
将它们放入您选择的文件夹（例如/images）并使用<img>标签显示它们：

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

或者，如果您使用的是 Markdown：

![alt text](/images/icon.svg)
于 2015-04-17T21:41:45.560 回答
1

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

例如，看看Font Awsome。如“入门”部分所述，您可以在您的站点中链接他们的资源：

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

我已将link说明放入head.html文件中。<i>然后，您可以使用一些 CSS 和元素将他们的 svg 图标之一添加到您的网站，如下所示：

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

此指令添加了一个stackoverflow徽标图标，您可以根据需要设置它的样式。

于 2015-04-27T05:52:10.623 回答