【github】【simpleicons】 README中的小图标如何制作

用心的小康

已于 2024-08-06 16:21:27 修改

阅读量769

点赞数

分类专栏：实用小技巧文章标签： github

于 2023-07-15 11:54:30 首次发布

本文链接：https://blog.csdn.net/m0_61513370/article/details/131737314

版权

实用小技巧专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【github】【simpleicons】 README中的小图标如何制作

写了个小工具😋：https://github.com/donglinkang2021/GetYourIcons/

实质就是通过一个网站（https://img.shields.io/badge/）加载一张svg图片，只需要改其中的后缀便可以获得不同的图片

![](https://img.shields.io/badge/-Jupyter-F37626?style=flat-square&logo=jupyter&logoColor=FFFFFF)

显示效果👇

在这里插入图片描述
大部分的图标都可以在这里找到：

👉👉👉simpleicons

在这里插入图片描述

比如想换成OpenAI的图标，就复制替换即可-Jupyter-F37626👉-ChatGPT-412991，上面一个红色箭头所指的就是logo名称，下面红色箭头所指是颜色，点击即可复制；比如改成👇

![](https://img.shields.io/badge/-ChatGPT-412991?style=flat-square&logo=openai&logoColor=FFFFFF)

显示效果👇

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

用心的小康

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

制作GitHub README 徽章

03-22

2354

制作GitHub README 徽章作为一名技术人员，会经常接触GitHub，每当看到别人的项目README制作的很漂亮的时候，就会立马想到此项目高大上，逼格很高。其实，这个制作也很简单，今天就给大家介绍一下。文章目录制作GitHub README 徽章引言徽章制作方法shields.io 网站1. 集成接口生成徽章2. 自定义生成徽章总结引言开始之前，先给自己的GitHub项目打个广告。AndroidBF 是一个基于AndroidX,能够简化android开发，封装集成了部分主流开源框架

Github美化日记 - 又菜又爱玩

是猛男｜二次元｜玩原神｜含盐量极高｜不是GAY｜不玩币｜不接单

04-05

504

无论是技术大牛, 或者是技术小菜, 都希望有一个好看的Github首页吧!（快说你想要！

参与评论您还未登录，请先登录后发表或查看评论

github readme 图片_GitHub项目徽标

weixin_39613548的博客

11-29

512

前言GitHub徽标，GitHub Badge，你也可以叫它徽章。就是在项目README中经常看到的那些表明构建状态或者版本等信息的小图标。就像这样：这些好看的小图标不仅简洁美观，而且包含了清晰易读的信息，在README中使用小徽标能够为自己的项目说明增色不少！如何给自己的项目加上小徽标呢？一、关于徽标徽标图片分左右两部分，左边是标题，右边是内容，就像是键值对。GitHub徽标官网是 https:...

GitHub Readme 活动图生成器教程

最新发布

gitblog_01131的博客

08-13

399

GitHub Readme 活动图生成器教程 github-readme-activity-graphA dynamically generated activity graph to show your GitHub activities of last 31 days.项目地址:https://gitcode.com/gh_mirrors/gi/github-readme-activity-...

README.md 小图标 shields & 标签 & icon

weixin_45129599的博客

04-12

253

小图标生成：https://shields.io/输入左边内容、右边内容、颜色即可生成：点击 Make Badge 会跳转到一个网页如：这个链接可以直接作为src的资源使用！https://img.shields.io/badge/%E4%BD%A0%E7%9C%8B%E6%88%91%E5%B0%B1%E6%98%AF%E5%B0%8F%E5%9B%BE%E6%A0%87-%E5%98%BF%...

Github上设置小图标/小徽章

void_xinyue的博客

05-17

3188

github 上的小图标看上去很炫酷如何实现基本格式如下https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg 一个 markdown 例子![example](https://img.shields.io/badge/example-v1.0-red.svg) csdn显示不出来，可以复制到github或者其他markdown编辑器查看原理解释这个 shields 网站专门生产这种自定义的徽标。比如 https://img.sh..

github readme 图片_ReadMe 好看指南

weixin_39640845的博客

11-29

400

ReadMe 是 GitHub 仓库的一个重要组成部分，一份详细美观的 ReadMe 可以大大增加项目的阅读体验，下面是写 ReadMe 的一些建议。1. 基础语法ReadMe 使用 markdown 语法，所以我们需要掌握基础的语法。markdown 的语法主要包括标题、段落、链接、引用、代码，语法不复杂，初学者只要多写几次就能记住。下面是 GitHub 上两个关于 markdown 的项目，...

github图---小章鱼图标

zhurenjin的博客

12-25

419

模仿GitHub前端界面html+css

07-08

在前端开发中，模仿知名网站如GitHub的界面是常见的学习方法。这个项目聚焦于GitHub的首页和注册页，通过HTML和CSS来实现静态页面的复刻，旨在帮助初学者理解前端网页布局、样式设计以及响应式网页开发的基本概念。 ...

eren997.github.io：小麋鹿的网站

02-12

【标题】"eren997.github.io：小麋鹿的网站"揭示了这是一个个人网站，由用户eren997在GitHub上创建并托管。GitHub是一个知名的开源代码托管平台，允许用户分享、协作和托管Web项目，包括静态网站。这个特定的网站...

buttons.github.io:的github

04-28

在这个特定的项目中，开发者创建了一个资源库（buttons.github.io-main），里面包含了用于网页设计的各种按钮样式，帮助网页开发者快速添加美观的交互元素。【描述】"button.github.io" 是该项目的域名简写，暗示...

sapneeldesai.github.io：宠物小精灵

02-20

在这个项目中，CSS可能被用来定制宠物小精灵的主题色、角色图标、页面布局等视觉效果。 2. JavaScript：用于实现网页的交互功能，如动画效果、表单验证、滚动事件等。在宠物小精灵的网站上，可能有一些动态的精灵...

GitHubDaily

05-19

2748

今天跟大家分享一下，过去几天在各大社交平台分享的一些开源项目。本周新增了粉丝推荐环节，如果你有发现优质的开源项目，欢迎在公众号或其它平台私信推荐，我们会不定期筛选推送。关...

GitHub 上 readme 中那些好看的徽章/挂件是怎么生成的？

Jaemon

11-21

854

GitHub 上 readme 中那些好看的徽章/挂件是怎么生成的？

GitHub上 README 增加图片标签

热门推荐

杨博东的博客

06-30

1万+

hey Guys~ 你可能遇到的GitHub上好的项目都有一个非常棒的README，其中不乏用到一些非常好看的标签。比如下面这样：wallefastjson那我们怎样自己添加一个高大上图片标签呢？比如我想添加一个下载标签，就像这样：（点击图片进入下载页）。请按照这样的步骤完成：一：在shields.io 生成自己的标签，注意：生成栏在网站的最下面，下面的图片就是我生成需要在Your Bad

travis自动构建github项目，点亮README.md中的build图标

Mr_OOO的博客

03-13

1294

文章目录创建github项目注册travis.travis.yml获取图标其他图标shieldscodecov 创建github项目 github上新建一个项目，然后上传一个完整的项目代码上去，可以参照我的java项目。注册travis 登陆travis官网，直接用github账号登陆即可，这样travis会直接关联你的github账号。 ![enter image description he...

GitHub图标SVG版本

全栈空间

08-14

922

有没有发现，网页上的图片越来越多地使用svg矢量图来替代光栅图png，直接将svg嵌入到html中非常方便，事实上，光栅图比如相机照片中绝大部分像素都被人眼忽略掉了，造成大量冗余，矢量图才理应是最合理的图片格式。如今，各大网站的图标基本都是svg，比如GitHub：然后这个图片是左右对称的，完全可以只画一半，再复制出另一半，然后左右翻转一下，利用<use>元素...

GitHub中提交代码说明时添加emoji小图标

JackieDYH的博客

10-27

2331

使用git的开发者都知道提交代码的最简单命令：git commit -m ':bug:此次提交的内容说明'。我们在github发现了这样一个小图标 在commit时添加一个emoji表情图标 git commit -m ':emoji: 此次提交的内容说明' 添加多个emoji表情图标 git commit -m ':emoji1: :emoji2: :emoji3: 此次提交的内容说明' emoji emoji代码 commit 说明 ????(调色板) :art:

github readme 图片

07-28

对于在GitHub的README中插入图片，您可以按照以下步骤操作： 1. 将您的图片上传到一个图像托管服务，如GitHub自带的仓库或者其他云存储服务（如Imgur、Cloudinary等）。 2. 在README文件中使用Markdown语法插入图片。可以使用以下语法： ```markdown ![图片描述](图片链接) ``` 其中，`图片描述`是对图片的简要描述，`图片链接`是您在第一步中获得的图片链接。例如： ```markdown ![示例图片](https://github.com/your-username/your-repository/raw/main/images/example.png) ``` 这将在README中插入名为`示例图片`的图片，链接为`https://github.com/your-username/your-repository/raw/main/images/example.png`。 3. 提交并推送更改到您的GitHub仓库。刷新README页面时，您应该能够看到插入的图片。请注意，确保您的图片链接是公开可访问的，否则其他人将无法看到图片。