如何在shields.io徽章中使用'logo'选项？

Question

如何logo在shields.io徽章中使用该选项？

例如,像

没有给出预期的结果.

Answer 1

这是一个三步指南,在徽章/徽章中使用徽标,例如GitHub徽标.

1. 在Base64中编码图像.

   来自维基百科

   Base64是一组类似的二进制文本编码方案,通过将其转换为基数-64表示,以ASCII字符串格式表示二进制数据.术语Base64源自特定的MIME内容传输编码.

   下载图像并使用众多在线工具之一(例如http://b64.io/)对其进行编码.
   结果是一个以data:image/png; base64开头的字符串,后跟一个很长的字符串.

2. 以百分比编码对Base64字符串进行编码.

   来自维基百科

   百分比编码(也称为URL编码)是在某些情况下在统一资源标识符(URI)中编码信息的机制.虽然它被称为URL编码,但实际上它更普遍地用在主统一资源标识符(URI)集中,其包括统一资源定位符(URL)和统一资源名称(URN).

   使用非常长的Base64字符串并使用(再次)许多在线工具之一,例如http://meyerweb.com/eric/tools/dencoder/,对字符串进行编码.
   某些字符将替换为%后跟两个十六进制数字.例如,/被替换为%2F.

3. 最后,将编码后的字符串附加到屏蔽URL之后?logo=.举个例子:https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D对应.你可以尝试使用这个.

提示:有时步骤2或3的编码字符串可能太长而无法使用.然后,您应尝试减小图像的大小(总像素数),然后重试.

Answer 2

您可以使用简单图标中的徽标名称，无需进行 base64 转换。

https://img.shields.io/static/v1?message=css3&logo=css3&labelColor=5c5c5c&color=1182c3&logoColor=white&label=%20&style=plastic

Answer 3

你需要base64你可以使用http://b64.io/转换你的png到base64代码链接需要实体转义你的图像对于uri来说太大了,你可以将它缩放到14px的高度.