Badge

[Bailey]

Hello everyone,

 

I have created a nice looking badge that you can configure and include on your website:

 

Image looks similar to, but not exactly like:

 

Please use .svg not .png or .jpg

 

Direct link:

https://img.shields.io/badge/Powered By-HelioHost-F39433.svg?style=for-the-badge&link=https://bailey.guru&link=https://heliohost.org

 

You can include this in HTML and define the height. I recommend only defining height OR width not both.

 

<a href="https://heliohost.org">
<img alt="Powered By HelioHost" style="height:100%" src="https://img.shields.io/badge/Powered By-HelioHost-F39433.svg?style=for-the-badge&link=https://bailey.guru&link=https://heliohost.org" />
</a>

Append &colorB=[HEX Colour] (for example &colorB=BD5D38) to the end of the URL to change the background colour behind "Heliohost"

For example ...//heliohost.org&colorB=BD5D38

[miwilc]

Can the size be reduced to the default?, like the badge sizes on shields.io

[Bailey]

That is the default for that style but you can change the height using CSS

[maicol07]

Great badge @Bailey!

But there are two syntax errors:

• the style keyword isn't separated from the alt one
• the </img> tag isn't necessary (see here: https://www.w3schools.com/tags/tag_img.asp)

So the correct code is:

<a href="https://heliohost.org">
<img alt="Powered By HelioHost" style="height:100%" src="https://img.shields.io/badge/Powered By-HelioHost-F39433.svg?style=for-the-badge&link=https://bailey.guru&link=https://heliohost.org">
</a>

[Bailey]

Thanks, I corrected this on my own website but forgot to correct here.

 

Edit: Corrected thanks to @maicol07