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

How do I use the 'logo' option in shields.io badges?

如何使用 shields.io badges 中的 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)

呈现为这样

没有给出预期的结果。

您需要对徽标进行 base64 编码 您可以使用 http://b64.io/ 将您的 png 转换为 base64 代码 link 需要进行实体转义 你的图片对于 uri 来说太大了,你可以将它缩放到 14px 的高度。

这是使用徽标的 3 步指南,例如the GitHub logo,在 shield/badge.

  1. 对图像进行 Base64 编码

    From Wikipedia

    Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

    下载the image and use one of the many online tools, e.g. http://b64.io/,对其进行编码。
    结果是一个字符串,以 data:image/png;base64, 开头,后面是很长的字符串。

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

    From Wikipedia

    Percent-encoding, also known as URL encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) under certain circumstances. Although it is known as URL encoding it is, in fact, used more generally within the main Uniform Resource Identifier (URI) set, which includes both Uniform Resource Locator (URL) and Uniform Resource Name (URN).

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

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

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

您可以使用来自 Simple Icons 的徽标名称,无需进行 base64 转换。

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

你可以使用这样的东西

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

注意以下参数

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