Willy/md-badges
1
0
Fork 0
mirror of https://github.com/inttter/md-badges.git synced 2026-05-06 18:36:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

+ ✨ Create guide on styling badges (#30)

Browse source
This commit is contained in:
Inter 2023-12-11 19:36:56 +00:00
parent f86502e2fb
commit 6676b28e6a
1 changed files with 51 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

51
CUSTOMISING.md Normal file
View file

@ -0,0 +1,51 @@
<div align="center">
![logo](assets/md-badges.png)
# Customising Your Badge 🎨
> [!NOTE]
> Please note that all of these badges use `flat` style badges for their examples.
>
> Different styles may use different methods.
>
> Want to change the style of the button? Please see [STYLES.md](STYLES.md) for documentation.
When using Shield.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles.
1. Changing Badge Color
You can change the badge color by replacing <color> with your desired hexadecimal color code in the badge URL.
For Example: `![Custom Badge](https://img.shields.io/badge/Custom%20Badge-blue?style=flat&logo=github)`
Result: ![Custom Badge](https://img.shields.io/badge/Custom%20Badge-blue?style=flat&logo=github)
#### Replace `blue` with your desired color. Alternitavely, use .svg's, as seen in [markdown-badges](https://github.com/Ileriayo/markdown-badges.).
---
2. Modifying Text
Change the text displayed on the badge by altering the text after the badge name in the URL (in this case, its **Some%20Placeholder%20Text**).
For Example: `![Modified Text Badge](https://img.shields.io/badge/Some%20Placeholder%20Text-blue?style=flat&logo=github)`
Result: ![Modified Text Badge](https://img.shields.io/badge/Some%20Placeholder%20Text-blue?style=flat&logo=github)
> [!TIP] Want to split the text? Do this ⬇️:
`![Modified Text Badge](https://img.shields.io/badge/That's%-Placeholder%20Text-blue?style=flat&logo=github)`
Result: ![Modified Text Badge](https://img.shields.io/badge/This%20Was%20Made%20In-Markdown-blue?style=flat&logo=github)
---
3. Adding Logos
Include logos on badges by specifying the logo name after the logo= parameter in the badge URL.
For Example (using the Docker logo): `![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-black?style=flat&logo=docker)`
Result: ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-black?style=flat&logo=docker)
Another Example (using the Sass logo): `![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-purple?style=flat&logo=Twitch)`
Result: ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-pink?style=flat&logo=Sass)