Reprint: This article is from

GitHub Badge, GitHub Badge, you can also call it a Badge. These are the small ICONS you often see in project README that indicate build status or release information. Something like this:These nice little ICONS are not only concise, but also contain clear and readable information. Using small logos in README can add a lot of color to your project description! How to add a small logo to your project?

First, about the logo

The logo image is split into two parts, with the title on the left and the content on the right, like key-value pairs.

The GitHub logo is shields. IO /

Icon in the specification

How to add a dynamic logo

Dynamic logo refers to the logo that will automatically update the status if the status of the project changes, which can ensure that the information seen by users is the real status of the project.

Common dynamic logos are:

  • Continuous integration state
  • Project Version Information
  • Code test coverage
  • Project Downloads
  • Contributor statistics and so on

Take the continuous integration state of Travis CI as an example.

Log in to the Travis CI, enter the project that has been configured to build, and there is a Build Passing or Build Failing logo to the right of the project name.

Click on it and in the popup box, you can see the address of the badge Travis CI provides you with in various formats.

You can choose the format you want. The imageUrl format looks something like this:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3cbd4801af94a458ccb37a5d04b4060~tplv-k3u1fbpfcp-zoom-1.image

The markdown format would look something like this:

[! [Build Status](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e990a36eb23543f1a181ce13bec5d10c~tplv-k3u1fbpfcp-zoom-1.image) ](https://www.travis-ci.org/{your-name}/{your-repo-name})

For simplicity, I choose the Markdown format. Once you have copied the content, open the README document for your project and paste it at the top.

After the first four steps, the little badge is done.

Push the README document to remote, refresh the GitHub page, and after a while, you’ll see the continuous integration status icon on the README. It takes a while to load because it gets state dynamically from the Travis CI platform.

How to customize the logo

Shields. IO provides the ability to customize the logo.

Logo icon format

https://img.shields.io/badge/ {logo title} - {} logo content -} {logo color. SVG)

Logo with link

[! [] (https://img.shields.io/badge/ {logo title} - {} logo content -} {logo color. SVG)] ({linkUrl})

Variable declaration

  • Logo title: The text to the left of the logo
  • Logo content: The text to the right of the logo
  • Logo color: The background color to the right of the logo, which can be the hexadecimal value of the color or the color English. The supported colors are as follows:

Variables are concatenated with -. Replace these three variables with what you need to generate a custom logo.

For example, here is the logo of my blog:

[! [] (p3-juejin.byteimg.com/tos-cn-i-k3…

Effect:

Clicking on the logo opens the corresponding URL, which jumps directly to my blog.

In addition to the three parameters mentioned above, shields. IO also provides query Strings to control the style of the logo. Use the same method as the query String in the browser URL: logo icon address? {parameter name}={parameter value}, multiple parameters with & :

Img.shields. IO/Badge /{logo title…

Common query String arguments are:

  • Style: control the logo style, the value of style can be: plastic | flat | flat – square | social.
  • Label: The title text used to force overwriting of the original logo.
  • ColorA: Controls the left half of the background color, can only use the hexadecimal color value as the parameter, cannot use the color English.
  • ColorB: Controls the right half of the background color.

Take the style parameter as an example

Plastic stereo effect:

Flat, also the default:

Flat-square + rounded effect:

Social Style effect:

There are also many parameters that are used similarly. More information can be found at shields. IO.

The appendix

shields.io link

badgen link

forthebadge link