Resolving Issues #31 and #32

To help our users who host LittleLink on default installations of Apache, I'm moving `icons` to `images/icons` to maximize compatibility. Please view Issue #31 for details: https://github.com/sethcottle/littlelink/issues/31

• Moved the `icons` folder to `images/icons`
• Updated buttons on `index.html` with the new icon path.
• Updated `index.html` comments to reflect changes.

To help keep content from being blocked by "Fanboy’s Annoyance" on Ublock Origin and ABP, I'm updating the names of some of the branded buttons. Please view Issue #32 for details: https://github.com/sethcottle/littlelink/issues/32

• Changed Twitter from `button-twitter` to `button-twit`
• Changed LinkedIn from `button-linkedin` to `button-linked`
• Changed Facebook from `button-facebook` to `button-faceb`
• Changed YouTube from `button-youtube` to `button-yt`
• Changed Tumblr from `button-tumblr` to `button-tumb`

General Changes:
• Changed <!-- Your Name --!> to <!-- Title --> to make it slightly more generic.
• Added a supporters section to the README file under the Community Contributions.

css/brands.css

@@ -124,11 +124,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Facebook */
-.button.button-facebook {
+.button.button-faceb {
   color: #FFFFFF;
   background-color: #1877f2 }
-.button.button-facebook:hover,
-.button.button-facebook:focus {
+.button.button-faceb:hover,
+.button.button-faceb:focus {
   filter: brightness(90%) }
 
 /* Facebook Messenger */
@@ -188,11 +188,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* LinkedIn */
-.button.button-linkedin {
+.button.button-linked {
   color: #FFFFFF;
   background-color: #2867B2 }
-.button.button-linkedin:hover,
-.button.button-linkedin:focus {
+.button.button-linked:hover,
+.button.button-linked:focus {
   filter: brightness(90%) }
 
 /* Mastodon */
@@ -295,11 +295,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Tumblr */
-.button.button-tumblr {
+.button.button-tumb {
   color: #FFFFFF;
   background-color: #131313 }
-.button.button-tumblr:hover,
-.button.button-tumblr:focus {
+.button.button-tumb:hover,
+.button.button-tumb:focus {
   filter: brightness(90%) }
 
 /* Twitch */
@@ -311,11 +311,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* Twitter */
-.button.button-twitter {
+.button.button-twit {
   color: #FFFFFF;
   background-color: #1DA1F2 }
-.button.button-twitter:hover,
-.button.button-twitter:focus {
+.button.button-twit:hover,
+.button.button-twit:focus {
   filter: brightness(90%) }
 
 /* Vimeo */
@@ -335,11 +335,11 @@ button:hover,
   filter: brightness(90%) }
 
 /* YouTube */
-.button.button-youtube {
+.button.button-yt {
   color: #FFFFFF;
   background-color:  #000000 }
-.button.button-youtube:hover,
-.button.button-youtube:focus {
+.button.button-yt:hover,
+.button.button-yt:focus {
   filter: brightness(90%) }
 
 /* WhatsApp */

index.html

@@ -44,9 +44,11 @@
 
           You can add your own brand or others brands you may need in the `css/brands.css` file. 
 
+          You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
+
           Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
 
-          Edit the "Your Name" section to change the page heading. You can use something like your name, your social handle, or your brand name.
+          Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
 
           Edit the "Short Bio" section tell users about yourself or your brand.
 
@@ -55,7 +57,7 @@
         <!-- Your Image Here -->
         <img src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
 
-        <!-- Your Name -->
+        <!-- Title -->
         <h1>LittleLink</h1>
 
         <!-- Short Bio -->
@@ -88,147 +90,151 @@
         -->
 
         <!-- Github -->
-        <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/github.svg" alt="GitHub Logo">GitHub</a>
+        <a class="button button-github" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
           <br>
         
         <!-- Twitter -->
-        <a class="button button-twitter" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitter.svg" alt="Twitter Logo">Twitter</a>
+        <a class="button button-twitter" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>
           <br>
 
         <!-- Instagram -->
-        <a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/instagram.svg" alt="Instagram Logo">Instagram</a>
+        <a class="button button-instagram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
           <br>
 
         <!-- Facebook -->
-        <a class="button button-facebook" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
+        <a class="button button-facebook" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/facebook.svg" alt="Facebook Logo">Find us on Facebook</a>
           <br>
 
         <!-- Facebook Messenger -->
-        <a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
+        <a class="button button-messenger" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/messenger.svg" alt="Facebook Messenger Logo">Chat on Messenger</a>
           <br>   
 
         <!-- LinkedIn -->
-        <a class="button button-linkedin" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
+        <a class="button button-linkedin" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
           <br>
 
         <!-- YouTube -->
-        <a class="button button-youtube" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/youtube.svg" alt="YouTube Logo">YouTube</a>
+        <a class="button button-youtube" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
           <br> 
 
         <!-- Discord -->
-        <a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/discord.svg" alt="Discord Logo">Discord</a>
+        <a class="button button-discord" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
           <br>
 
         <!-- Twitch -->
-        <a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/twitch.svg" alt="Twitch Logo">Twitch</a>
+        <a class="button button-twitch" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
           <br>
 
         <!-- ProductHunt -->
-        <a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
+        <a class="button button-producthunt" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/producthunt.svg" alt="Product Hunt Logo">Product Hunt</a>
          <br>
 
         <!-- Snapchat -->
-        <a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
+        <a class="button button-snapchat" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/snapchat.svg" alt="Snapchat Logo">Snapchat</a>
           <br>
 
         <!-- Spotify -->
-        <a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/spotify.svg" alt="Spotify Logo">Spotify</a>
+        <a class="button button-spotify" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">Spotify</a>
           <br>      
           
         <!-- Reddit -->
-        <a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/reddit.svg" alt="Reddit Logo">Reddit</a>
+        <a class="button button-reddit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
           <br>   
 
         <!-- Mastodon -->
-        <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
+        <a class="button button-mastodon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon</a>
           <br>           
 
         <!-- Medium -->
-        <a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/medium.svg" alt="Medium Logo">Medium</a>
+        <a class="button button-medium" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/medium.svg" alt="Medium Logo">Medium</a>
           <br> 
 
         <!-- Pinterest -->
-        <a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
+        <a class="button button-pinterest" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/pinterest.svg" alt="Pinterest Logo">Follow on Pinterest</a>
           <br>
 
         <!-- TikTok -->
-        <a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
+        <a class="button button-tiktok" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
           <br>
 
         <!-- Email -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
+        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/email.svg" alt="Email Icon">hello@littlelink.io</a>
           <br>
 
         <!-- Email Alternative -->
-        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
+        <a class="button button-default" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/email_alt.svg" alt="Email Icon">hello@littlelink.io</a>
           <br>
 
         <!-- SoundCloud -->
-        <a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
+        <a class="button button-soundcloud" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/soundcloud.svg" alt="SoundCloud Logo">SoundCloud</a>
           <br>              
 
         <!-- Figma -->
-        <a class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="icons/figma.svg" alt="Figma Logo">Figma</a>
+        <a class="button button-figma" href="#" target="_blank" rel="noopener" ><img class="icon" src="images/icons/figma.svg" alt="Figma Logo">Figma</a>
           <br>
 
         <!-- Kit -->
-        <a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/kit.svg" alt="Kit Logo">Kit</a>
+        <a class="button button-kit" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/kit.svg" alt="Kit Logo">Kit</a>
           <br>          
 
         <!-- Telegram -->
-        <a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/telegram.svg" alt="Telegram Logo">Telegram</a>
+        <a class="button button-telegram" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
           <br>          
 
         <!-- Tumblr -->
-        <a class="button button-tumblr" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
+        <a class="button button-tumblr" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
           <br>
 
         <!-- Steam -->
-        <a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/steam.svg" alt="Steam Logo">Steam</a>
+        <a class="button button-steam" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/steam.svg" alt="Steam Logo">Steam</a>
           <br>
 
         <!-- Vimeo -->
-        <a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
+        <a class="button button-vimeo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/vimeo.svg" alt="Vimeo Logo">Vimeo</a>
           <br>
 
         <!-- PayPal-->
-        <a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/paypal.svg" alt="PayPal Logo">PayPal</a>
+        <a class="button button-paypal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
         <br>
 
         <!-- WhatsApp -->
-        <a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a>
+        <a class="button button-whatsapp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/whatsapp.svg" alt="WhatsApp Logo">WhatsApp</a>
         <br>
           
         <!-- Wordpress -->
-        <a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
+        <a class="button button-wordpress" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/wordpress.svg" alt="Wordpress Logo">Wordpress</a>
           <br>
 
         <!-- Goodreads -->
-        <a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
+        <a class="button button-goodreads" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/goodreads.svg" alt="Goodreads Logo">Goodreads</a>
           <br>
 
         <!-- Skoob -->
-        <a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/skoob.svg" alt="Skoob Logo">Skoob</a>
+        <a class="button button-skoob" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/skoob.svg" alt="Skoob Logo">Skoob</a>
           <br>
 
         <!-- Gitlab -->
-        <a class="button button-gitlab" href="_blank" target="_blank" rel="noopener"><img class="icon" src="icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
+        <a class="button button-gitlab" href="_blank" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
           <br>
 
         <!-- XING -->
-        <a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/xing.svg" alt="xing Logo">Xing</a>
+        <a class="button button-xing" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/xing.svg" alt="xing Logo">Xing</a>
+          <br>
 
         <!-- Bandcamp -->
-        <a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a>
+        <a class="button button-bandcamp" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/bandcamp.svg" alt="Bandcamp Logo">Bandcamp</a>
+          <br>
 
         <!-- Patreon -->
-        <a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/patreon.svg" alt="Patreon Logo">Patreon</a>
+        <a class="button button-patreon" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/patreon.svg" alt="Patreon Logo">Patreon</a>
+        <br>
 
         <!-- Signal -->
-        <a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/signal.svg" alt="Signal Logo">Signal</a>
+        <a class="button button-signal" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/signal.svg" alt="Signal Logo">Signal</a>
+        <br>
 
         <!-- Venmo -->
-        <a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="icons/venmo.svg" alt="Venmo Logo">Venmo</a>
+        <a class="button button-venmo" href="#" target="_blank" rel="noopener"><img class="icon" src="images/icons/venmo.svg" alt="Venmo Logo">Venmo</a>
 
         <br>
         <br>