如何将GitHub项目徽标成?
摘要:shields.io上提供了各种漂亮的徽标,支持文字、颜色、图标以及各种动静态数据 效果展示 使用详解 1. 各种格式的基本模板 URL https:img.shields.iobadge:badgeContent Markdown
shields.io上提供了各种漂亮的徽标,支持文字、颜色、图标以及各种动静态数据
效果展示
使用详解
1. 各种格式的基本模板
URL
https://img.shields.io/badge/:badgeContent
Markdown

rSt
.. image:: https://img.shields.io/badge/:badgeContent
:alt: Static Badge
AsciiDoc
image:https://img.shields.io/badge/:badgeContent[Static Badge]
HTML
<img alt="Static Badge" src="https://img.shields.io/badge/:badgeContent">
2. badgeContent 的基本构成
其中style和logo/自定义图标是组合形式
# 仅文字 标题可省略
https://img.shields.io/badge/{标题}-{内容}-{颜色}
# 添加style
# 值: flat(默认,圆角), flat-square(方角), plastic(塑性/立体), for-the-badge(方角,扁平,字母变大写), social(社交形式)
https://img.shields.io/badge/{标题}-{内容}-{颜色}?style={style}
# 添加logo logo名称在线查找 https://simpleicons.org/
https://img.shields.io/badge/{标题}-{内容}-{颜色}?logo={logo名称}&logoColor={log颜色}
# 自定义图标 图标需要转换为base64编码
https://img.shields.io/badge/{标题}-{内容}-{颜色}?logo={base64编码}
# 动态数据 支持的API查看官方文档 https://shields.io/badges/github-gist-stars
https://img.shields.io/badge/{api}
实例拆解
点击徽章可直接查看url
1. 基本徽标
空格用 %20 表示
https://img.shields.io/badge/Hello%20Weizwz-409eff?style=plastic
2. 带logo徽标
logo在线查找 https://simpleicons.org/
https://img.shields.io/badge/Language-javascript-blue?logo=javascript&logoColor=f7cb4f
3. 自定义图标徽标
推荐 https://www.iconfont.cn/ 下载png格式图标(下载之前可以设置颜色),然后转换base64编码 https://c.runoob.com/front-end/59/
https://img.shields.io/badge/image-circle-4bb2ff?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAC8VJREFUeF7tnYuR3TYMRclKEldibyWxK/GmEm8qybqSbCpRBrL0IunpQ1IUCRFHM/b6Q4nkBc4AIPXxjuMyBbqu+905J78+TzqRv8ux9VP+72PSfvzz8t/+Hdp9eO+n/3fZfCxe2FucdM45DxDIJb84534bfo5/z9nV3rVGQN6HRj8FHu/9+PdS42iuHwCJNOkAxB/Daa+Rp9doLvAIKALNO9EmzgQAcqDXAMQYHb5OUqM4pfW0fgDjvX/TMyydIwGQFbtMooSAIb9aPkZg/iIlezYzgAyaTKBoIUqkAi2wSFQRWCj8nXOmATEWKWKhEUD+tJ6GmQRkAsYdiuxYx87d3nTNYgqQruu+O+csp1Bn4elTMO/9n2cvdJfzTQACGNnd0QwoTQMygEEalZ2PxwWbB6U5QKgvrqNh58rNgtIUIESMKnBMO20OlCYAGaLGDwObetU
