如何在shields.io徽章中使用“徽标”选项？

Question

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

例如，像这样的事情

[![Raspberry Pi](https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=http://vectorlogo4u.com/wp-content/uploads/2016/02/RASPBERRY-PI-LOGO-VECTOR.png)](https://www.raspberrypi.org)

呈现如下

​

​

这并不能给出预期的结果。

Answer 1

您需要base64徽标，您可以使用http://b64.io/将您的png转换为base64代码，链接需要实体转义，您的图像对于uri来说太大了，可以缩放到14 to的高度。

​

​

Answer 2

这是一个三步指南，以使用标志，如GitHub标志，在盾/徽章。

1. 用Base64对图像进行编码。来自 维基百科 Base64是一组类似的二进制到文本编码方案，通过将二进制数据转换成基-64表示形式，以ASCII字符串格式表示二进制数据。术语Base64起源于特定的MIME内容传输编码。

下载图像并使用许多在线工具之一，例如http://b64.io/，对其进行编码。

结果是一个以数据开头的字符串:image/png；base64 64，，然后是一个非常长的字符串。

1. 用百分比编码对Base64字符串进行编码。 来自 维基百科 百分比编码，也称为URL编码，是在特定情况下在统一资源标识符(URI)中编码信息的一种机制。虽然它被称为URL编码，但实际上它在主要的统一资源标识符(URI)集中使用得更广泛，其中包括统一资源定位器(URL)和统一资源名称(URN)。

以非常长的Base64字符串为例，使用(再次)许多在线工具之一，例如http://meyerweb.com/eric/tools/dencoder/，对字符串进行编码。

一些字符将被%替换为两个十六进制数字。例如，/被%2F所取代。

1. 最后，将编码的字符串追加到?logo=后的屏蔽URL中。例如：https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D对应于

。你可以试着用这个。

提示:有时，无论是第2步还是第3步，编码的字符串可能太长，无法使用。然后，您应该尝试缩小图像的大小(总像素)，然后再试一次。

Answer 3

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

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