LinkForest

An HTML template to gather all of your links in one place

🌲What is LinkForest?

Well, as you all know, most social medias support only 1 link in the profile bio. So LinkForest is developed to expand the ability of that link. Also It is completely free, open source & customizable.

📥Download

👀Features

Dark theme support
Sharing ability
Custom icons, SVGs & pictures for a link
Custom colors for links
Small icons on the page bottom (good for those who have a lot of links and social media links might be lost among them)
Easter eggs!

⚙How to use?

The only thing you need, is a web hosting service (it doesn’t matter to use a free or paid service). Then easily by customizing and uploading the customized template on the host, it will be usable for profile bio.

Some free web hosting services:

🎨How to Customize?

To customize, you need a little knowledge of Front-end developing. Then by following instructions below you can customize the template. If you are a little bit more skilled, you can easily edit CSS and JS files.

Also you need to change every text in index.html file starting with $. For example if I see $Username in index.html file, I will change it with @hamid0740.

All available colors: (use them as class of link element)

green paypal

blue

purple

pink

red

orange

yellow

cream clubhouse

brown

gray github stack-overflow crowdin

whatsapp

telegram

instagram

discord

twitter

facebook

tiktok

reddit

pinterest

youtube

twitch

custom-color

You can also use custom color. To do, read the instructions below.
New Custom section & link:

You must change $SectionName, $Color, $Link, $FontAwsomeIcon & $LinkText. Also you can swap the place of icon to right, or use both sides for 2 icons.

<p class="section-name">$SectionName</p>
<a class="link $Color" href="$Link" target="_blank">
  <i class="$FontAwesomeIcon link-icon-l"></i> <!-- Example of Font Awesome icon: 'fab fa-github' -->
  <p class="link-text">$LinkText</p>
  <i class="link-icon-r"></i> <!-- To make text align center, keep both 'link-icon-l' and 'link-icon-r' elements. EVEN HAVING NO ICON OR IMAGE -->
</a>

Custom color for a link

To have a custom color for a link, you must replace $CustomColor with your desirable color. Also for class of the link, you must use custom-color.

<a style="--custom-color: $CustomColor;" class="link custom-color" href="$Link" target="_blank">
  . . .
</a>

Custom icon-image (svg, png) as link icon: Instead of link-icon-image-l class, you can use link-icon-image-r class to swap the side of icon-image to right. Also you need to change $IconImageLink with your icon-image link.

<i class="link-icon-image-l" style="background-image: url('$IconImageLink')"></i>

Set a picture for a link Instead of link-image-l class, you can use link-image-r class to swap the side of image to right. Also you need to change $ImageLink with your image link.

<i class="link-image-l" style="background-image: url('$ImageLink')"></i>

👥How many…?

How many people have seen a LinkForest user’s page?

📝How to contribute?

Every contribution is welcomed. Just open a Pull request and submit your codes there. Once accepted, your codes will be added. Also if you have any ideas that can make this template better, submit it in Discussions section. To report any bugs or problems, open an Issue describing the bug.

🧰Third party components

These are all 3rd party components used in LinkForest:

This site is open source. Improve this page.