---

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.

• View live demo (English)
• View live demo (Persian)

📥Download

• 🇺🇲 English
• 🇮🇷 Persian

👀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:

• GitHub Pages
• Netlify
• Neocities

🎨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:

• Font Awesome (for icons)
• AddToAny (for sharing)
• Sweet Alert (for better alerts)
• CountAPI (for easter eggs)