From 2e3aef179da45ce09fc2a8e83c7fa8e3be94bf30 Mon Sep 17 00:00:00 2001
From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
Date: Sat, 19 Apr 2025 19:15:05 -0400
Subject: [PATCH] docs(website): use cdn for client icons

---
 gh-pages-template/index.html | 75 +++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/gh-pages-template/index.html b/gh-pages-template/index.html
index 24a97352f27..9b0c2f5ec0b 100644
--- a/gh-pages-template/index.html
+++ b/gh-pages-template/index.html
@@ -56,7 +56,7 @@ <h5 class="fw-bolder mb-0">Self-hosted</h5>
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <img class="icon" src="https://moonlight-stream.org/images/moonlight.svg" alt="Moonlight">
+                                <img class="icon" src="https://moonlight-stream.org/images/moonlight.svg" alt="Moonlight"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">Moonlight Support</h5>
@@ -163,7 +163,7 @@ <h2 class="text-center text-white fw-bolder my-5">Clients</h2>
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-android"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg" alt="Android"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -182,7 +182,7 @@ <h5 class="fw-bolder mb-0">
                             <a href="https://play.google.com/store/apps/details?id=com.limelight" target="_blank">
                                 <img alt="Get it on Google Play"
                                     src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-                                    height="60">
+                                    height="60"/>
                             </a>
                         </div>
                         <div>
@@ -190,14 +190,14 @@ <h5 class="fw-bolder mb-0">
                                 <img alt="Available at Amazon Appstore"
                                      src="https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/devportal2/res/images/amazon-appstore-badge-english-black.png"
                                      height="60"
-                                     style="padding: 10px;">
+                                     style="padding: 10px;"/>
                             </a>
                         </div>
                         <div>
                             <a href="https://f-droid.org/packages/com.limelight" target="_blank">
                                 <img alt="Get it on F-Droid"
                                      src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
-                                     height="60">
+                                     height="60"/>
                             </a>
                         </div>
                     </div>
@@ -210,7 +210,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-chrome"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/chromewebstore.svg" alt="Chrome Web Store"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -229,7 +229,7 @@ <h5 class="fw-bolder mb-0">
                             <a href="https://chrome.google.com/webstore/detail/moonlight-game-streaming/gemamigbbenahjlfnmlfdjhdnkpbkfjj" target="_blank" class="btn btn-outline-light">
                                 <img alt="Available in the Chrome Web Store"
                                     src="https://developer.chrome.com/static/docs/webstore/branding/image/206x58-chrome-web-043497a3d766e.png"
-                                    height="30">
+                                    height="30"/>
                             </a>
                         </div>
                     </div>
@@ -242,7 +242,8 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-apple"></i>
+                              <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg" alt="iOS"/>
+                              <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg" alt="Apple TV"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -261,14 +262,14 @@ <h5 class="fw-bolder mb-0">
                             <a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
                                 <img alt="Download on the App Store"
                                     src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
-                                    height="40">
+                                    height="40"/>
                             </a>
                         </div>
                         <div class="pb-3">
                             <a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
                                 <img alt="Download on Apple TV"
                                     src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-apple-tv.svg"
-                                    height="40">
+                                    height="40"/>
                             </a>
                         </div>
                     </div>
@@ -281,10 +282,10 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-linux"></i>
-                                <i class="fa-fw fa-2x fab fa-apple"></i>
-                                <i class="fa-fw fa-2x fab fa-windows"></i>
-                                <i class="fa-fw fa-2x fab fa-steam"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="Linux"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg" alt="macOS"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/steam.svg" alt="Steam"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -314,7 +315,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fas fa-microchip"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/raspberrypi.svg" alt="Raspberry Pi"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -344,7 +345,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-xbox"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/xbox.svg" alt="Xbox"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -363,7 +364,7 @@ <h5 class="fw-bolder mb-0">
                             <a href="https://apps.microsoft.com/store/detail/moonlight-uwp/9MW1BS08ZBTH" target="_blank">
                                 <img alt="Get it from Microsoft"
                                      src="https://get.microsoft.com/images/en-us%20dark.svg"
-                                     height="40">
+                                     height="40"/>
                             </a>
                         </div>
                     </div>
@@ -376,7 +377,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fab fa-playstation"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/playstationvita.svg" alt="PlayStation Vita"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -406,12 +407,16 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fas fa-code"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/nintendo-switch.svg" alt="Nintendo Switch"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg" alt="Android"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg" alt="Apple TV"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg" alt="iOS"/>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg" alt="macOS"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
                                     <a href="https://github.com/XITRIX/Moonlight-Switch" target="_blank" class="text-white text-decoration-none">
-                                        Nintendo Switch
+                                        Moonlight Switch
                                     </a>
                                 </h5>
                             </div>
@@ -436,7 +441,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fas fa-code"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/wiiu.svg" alt="Wii U"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -466,7 +471,7 @@ <h5 class="fw-bolder mb-0">
                     <div class="card-body p-4">
                         <div class="d-flex align-items-center">
                             <div class="icon text-white">
-                                <i class="fa-fw fa-2x fas fa-code"></i>
+                                <img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/lg.svg" alt="LG webOS TV"/>
                             </div>
                             <div class="ms-3">
                                 <h5 class="fw-bolder mb-0">
@@ -514,7 +519,7 @@ <h2 class="fw-bolder mb-0">Documentation</h2>
                 </div>
                 <div class="card-footer p-3 px-4">
                     <a class="btn btn-outline-light me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank">
-                        <i class="fa-fw fas fa-book"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/readthedocs.svg" alt="ReadTheDocs"/>
                         Read the Docs
                     </a>
                 </div>
@@ -537,27 +542,37 @@ <h2 class="fw-bolder mb-0">Download</h2>
                 </div>
                 <div class="card-footer p-3 px-4">
                     <a class="latest-button btn btn-outline-light me-3 mb-3 d-none" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank">
-                        <i class="fa-fw fab fa-github"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/github.svg" alt="GitHub"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ubuntu.svg" alt="Ubuntu"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/flatpak.svg" alt="Flatpak"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/>
                             Latest: <span id="latest-version" class="crowdin-ignore"></span>
                     </a>
                     <a class="beta-button btn btn-outline-light me-3 mb-3 d-none" href="#" target="_blank">
-                        <i class="fa-fw fas fa-flask"></i>
+                        <i class="fa-fw fa-lg fas fa-flask"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ubuntu.svg" alt="Ubuntu"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/flatpak.svg" alt="Flatpak"/>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/>
                             Beta: <span id="beta-version" class="crowdin-ignore"></span>
                     </a>
                     <a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/pacman-repo" target="_blank">
-                        <i class="fa-fw fab fa-linux"></i>
-                            ArchLinux
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/archlinux.svg" alt="Arch Linux"/>
+                            Arch Linux
                     </a>
                     <a class="btn btn-outline-light me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank">
-                        <i class="fa-fw fab fa-docker"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/docker.svg" alt="Docker"/>
                             Docker
                     </a>
                     <a class="btn btn-outline-light me-3 mb-3" href="https://flathub.org/apps/dev.lizardbyte.app.Sunshine" target="_blank">
-                        <i class="fa-fw fab fa-linux"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/flathub.svg" alt="Flathub"/>
                             Flathub
                     </a>
                     <a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/homebrew-homebrew" target="_blank">
-                        <i class="fa-fw fas fa-beer-mug-empty"></i>
+                        <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/homebrew.svg" alt="Homebrew"/>
                             Homebrew
                     </a>
                 </div>