mirror of
https://github.com/inttter/md-badges.git
synced 2026-05-06 18:36:58 +02:00
♻️ Redid customisation documentation (#110)
--- * 🛠️ fixed <color> in 1. not showing up (it wasn't in a code block) * ♻️ changed the .svg part as it was completely wrong * ✨ replaced it with a new part about hexadecimal colors (1a.) * 📝 expanded on splitting the text (see 2a.) * 🛠️ fixed inaccurate code in the splitting the text part (2a.) * 🛠️ fixed inaccurate code in the logo (3.) part * ✨ added a new part about supported icons/logos (3a.) * 🔧 general minor improvements... ---
This commit is contained in:
parent
b06b84ed55
commit
6858648666
1 changed files with 23 additions and 7 deletions
|
|
@ -15,28 +15,40 @@
|
||||||
When using Shield.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles.
|
When using Shield.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles.
|
||||||
|
|
||||||
### 1. Changing Badge Color
|
### 1. Changing Badge Color
|
||||||
You can change the badge color by replacing <color> with your desired hexadecimal color code in the badge URL.
|
|
||||||
|
|
||||||
|
You can change the badge color by replacing `<color>` with your desired hexadecimal color code in the badge URL.
|
||||||
|
|
||||||
For Example: ``
|
For Example: ``
|
||||||
|
|
||||||
Result: 
|
Result: 
|
||||||
|
|
||||||
#### Replace `blue` with your desired color. Alternitavely, use .svg's, as seen in [markdown-badges](https://github.com/Ileriayo/markdown-badges.).
|
Replace `blue` with your desired color.
|
||||||
|
|
||||||
|
### 1a. Using hexadecimal colors
|
||||||
|
|
||||||
|
Alternatively, you can use hexadecimal colors to get a specific shade of a color that shield.io may not have built in.
|
||||||
|
|
||||||
|
For Example: ``
|
||||||
|
|
||||||
|
Result: 
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 2. Modifying Text
|
### 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**).
|
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: ``
|
For Example: ``
|
||||||
|
|
||||||
Result: 
|
Result: 
|
||||||
|
|
||||||
> [!TIP] Want to split the text? Do this ⬇️:
|
### 2a. Splitting text
|
||||||
|
|
||||||
``
|
Want to split the text to have 2 different sections? You can do this by adding a `-` between the words.
|
||||||
|
|
||||||
Result: 
|
For Example: ``
|
||||||
|
|
||||||
|
Result: 
|
||||||
|
|
||||||
---
|
---
|
||||||
### 3. Adding Logos
|
### 3. Adding Logos
|
||||||
|
|
@ -46,6 +58,10 @@ For Example (using the Docker logo): `
|
Result: 
|
||||||
|
|
||||||
Another Example (using the Sass logo): ``
|
Another Example (using the Sass logo): ``
|
||||||
|
|
||||||
Result: 
|
Result: 
|
||||||
|
|
||||||
|
### 3a. Supported icons/logos
|
||||||
|
|
||||||
|
Shield.io uses [Simple Icons](https://github.com/simple-icons/simple-icons) and a small sub-set of it's own icons/logos. If you can find your icon/logo on https://simpleicons.org, it will work with your badge. Shield.io also has its own few custom badges that you can find [here](https://github.com/badges/shields/tree/6e803367e0f3c8e0cc4196a700af37fac1629f4d/logo).
|
||||||
Loading…
Add table
Add a link
Reference in a new issue