如何使用shields.io徽章中的“logo”选项？

Question

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

例如，类似于这样的内容：

[![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)

呈现为这个

这不会产生预期的结果。

- orome

---

根据Raspberry Pi视觉指南的规定，只有当height至少为48px时才能使用该标志，或者最好直接向官方咨询。 - thibsc

Answer 1

这里是一个3步使用标志的指南，例如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%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLj

   提示：有时步骤2或3的编码字符串可能太长而无法使用。您应该尝试减小图像的大小（总像素）并重试。

- Claudio

---

我已将我的Base64上传的图像缩小到50像素宽度和高度，以在Github自述文件中显示。 - Dasser Basyouni

不需要Base64转换，请查看我的一行答案。 - piouson

@piouson，只有当您的徽标是（如https://shields.io/中所述）以下命名徽标之一（比特币、dependabot、gitlab、npm、paypal、serverfault、stackexchange、superuser、telegram、travis）或[simple-icons]（https://simpleicons.org/）时，才不需要进行转换。如果您想要自定义徽标，则需要通过base64转换。 - Claudio

Answer 2

你需要对标志进行Base64编码， 你可以使用http://b64.io/将您的PNG图像转换为Base64代码。 链接需要进行实体转义。 您的图像对于URI来说太大了，您可以将其缩放到14px的高度。

这是一个指向 Raspberry Pi 网站的网址链接，以及一个粉色 Raspberry Pi 图标。Raspberry Pi 是一款便宜的单板计算机，适合学习和制作各种软硬件项目。

- Guillaume Massé

Answer 3

您可以使用Simple Icons的标志名称而无需进行base64转换。

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

- piouson

Answer 4

你可以使用类似这样的

![Raspberry Pi](https://img.shields.io/badge/raspberrypi-Code?style=for-the-badge&logo=raspberrypi&logoColor=black&color=F1C232

请注意以下参数

• logoColor 控制标志的颜色。
• color 控制背景的颜色。

- Victor Andres Aguirre Fernande