偶然在一个md文档看到这样的图标，觉得很好看，花时间捣鼓着，弄懂了它的原理，以及代码组成，主要是利用 Shields.io 这个网站。

看到的这些其实不是图片文件，而是十六进制的颜色代码，格式通常是 # 开头加上6位十六进制数（比如 #2277cc），其中 # 也可以省略，这些颜色代码来自 Shields.io这个服务，它是一个专门生成各种徽章（badge）的网站，完整的徽章URL结构是这样的： https://img.shields.io/badge/标签-消息-颜色代码.svg

Shields.io 内置了数百个流行的图标，主要来自：

  • Simple Icons: 包含几乎所有知名品牌和技术的logo
    • 项目地址: https://simpleicons.org/
    • 包含图标: GitHub, Python, JavaScript, React, Vue, Windows, Apple 等
  • Font Awesome: 常用的图标库
  • Material Design Icons: Google的图标集

最终实现效果如下，图标还可以链接到网站，只需添加网址即可：

  • 对比说明
    • 没有 target=”_blank”：链接在当前页面打开，会离开当前页面
    • 有 target=”_blank”：链接在新标签页打开，当前页面保持不变

另外的一些例子：

Python

JavaScript

React

WeChat

Alipay

Bilibili

Windows

Linux

macOS

Acer

Vim

X

版权声明： 如无特别声明，本文版权归 Joyboy 所有，转载请注明本文链接。

（采用 CC BY-NC-SA 4.0 许可协议进行授权）

本文标题：《 Badge 》

本文链接：https://hzw-blog.pages.dev/posts/badge/

本文最后一次更新为 天前，文章中的某些内容可能已过时！