From 1a2430b3213741f3ccb5b08765746d097f258d5f Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Tue, 4 Aug 2026 10:29:40 +0200
Subject: [PATCH] more faicons system wide

---
 apps/frontend/src/layout/AppLayout.vue        | 40 ++++++++++---------
 apps/frontend/src/page/blog/BlogIndexPage.vue |  6 +--
 apps/frontend/src/page/blog/BlogShowPage.vue  |  4 +-
 .../src/page/catalog/CatalogIndexPage.vue     |  4 +-
 .../src/page/catalog/CatalogShowPage.vue      | 10 ++---
 .../src/page/catalog/ImageLightbox.vue        |  6 +--
 apps/frontend/src/page/code/CodeIndexPage.vue | 10 ++---
 .../frontend/src/page/contact/ContactPage.vue | 28 ++++++-------
 apps/frontend/src/page/home/HomePage.vue      |  8 ++--
 .../src/page/howtos/HowtosIndexPage.vue       | 12 +++---
 10 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/apps/frontend/src/layout/AppLayout.vue b/apps/frontend/src/layout/AppLayout.vue
index 8173076..db10cbd 100644
--- a/apps/frontend/src/layout/AppLayout.vue
+++ b/apps/frontend/src/layout/AppLayout.vue
@@ -5,16 +5,17 @@
 
       <!-- Desktop Navigation -->
       <nav class="nav-desktop">
-        <RouterLink to="/" class="nav-link">{{ t('nav.home') }}</RouterLink>
-        <RouterLink to="/catalog" class="nav-link">{{ t('nav.catalog') }}</RouterLink>
-        <RouterLink to="/blog" class="nav-link">{{ t('nav.blog') }}</RouterLink>
-        <RouterLink to="/howtos" class="nav-link">{{ t('nav.howtos') }}</RouterLink>
-        <RouterLink to="/code" class="nav-link">{{ t('nav.code') }}</RouterLink>
-        <RouterLink to="/team" class="nav-link">{{ t('nav.team') }}</RouterLink>
-        <RouterLink to="/contact" class="nav-link">{{ t('nav.contact') }}</RouterLink>
-        <a v-if="isAdmin" href="/admin" class="nav-link-admin">Admin</a>
+        <RouterLink to="/" class="nav-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
+        <RouterLink to="/catalog" class="nav-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
+        <RouterLink to="/blog" class="nav-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
+        <RouterLink to="/howtos" class="nav-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
+        <RouterLink to="/code" class="nav-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
+        <RouterLink to="/team" class="nav-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
+        <RouterLink to="/contact" class="nav-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
+        <a v-if="isAdmin" href="/admin" class="nav-link-admin"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>
 
         <div class="locale-switcher">
+          <i class="fa-solid fa-globe text-gray-500 text-xs"></i>
           <button :class="locale === 'en' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('en')">EN</button>
           <span class="locale-separator">|</span>
           <button :class="locale === 'hu' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('hu')">HU</button>
@@ -23,21 +24,19 @@
 
       <!-- Hamburger Button (Mobile only) -->
       <button class="hamburger-btn" @click="toggleMenu">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
+        <i class="fa-solid fa-bars text-xl"></i>
       </button>
 
       <!-- Mobile Navigation -->
       <nav v-show="menuOpen" class="nav-mobile">
-        <RouterLink to="/" class="nav-mobile-link">{{ t('nav.home') }}</RouterLink>
-        <RouterLink to="/catalog" class="nav-mobile-link">{{ t('nav.catalog') }}</RouterLink>
-        <RouterLink to="/blog" class="nav-mobile-link">{{ t('nav.blog') }}</RouterLink>
-        <RouterLink to="/howtos" class="nav-mobile-link">{{ t('nav.howtos') }}</RouterLink>
-        <RouterLink to="/code" class="nav-mobile-link">{{ t('nav.code') }}</RouterLink>
-        <RouterLink to="/team" class="nav-mobile-link">{{ t('nav.team') }}</RouterLink>
-        <RouterLink to="/contact" class="nav-mobile-link">{{ t('nav.contact') }}</RouterLink>
-        <a v-if="isAdmin" href="/admin" class="nav-mobile-link"><i class="fa-solid fa-wrench"></i> Admin</a>
+        <RouterLink to="/" class="nav-mobile-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
+        <RouterLink to="/catalog" class="nav-mobile-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
+        <RouterLink to="/blog" class="nav-mobile-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
+        <RouterLink to="/howtos" class="nav-mobile-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
+        <RouterLink to="/code" class="nav-mobile-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
+        <RouterLink to="/team" class="nav-mobile-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
+        <RouterLink to="/contact" class="nav-mobile-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
+        <a v-if="isAdmin" href="/admin" class="nav-mobile-link"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>
         <div class="locale-switcher-mobile">
           <button :class="locale === 'en' ? 'text-white' : 'text-gray-400'" class="locale-btn-mobile" @click="switchLocale('en')">EN</button>
           <span class="locale-separator">|</span>
@@ -132,6 +131,9 @@ function switchLocale(lang: string) {
 .locale-separator {
   @apply text-gray-600;
 }
+.nav-icon {
+  @apply mr-1.5 text-xs opacity-70;
+}
 .hamburger-btn {
   @apply md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md;
 }
diff --git a/apps/frontend/src/page/blog/BlogIndexPage.vue b/apps/frontend/src/page/blog/BlogIndexPage.vue
index f1fb3b6..e5b381f 100644
--- a/apps/frontend/src/page/blog/BlogIndexPage.vue
+++ b/apps/frontend/src/page/blog/BlogIndexPage.vue
@@ -42,7 +42,7 @@
                     <span class="new-post-dot"></span>
                     {{ t('blog.newPost') }}
                   </span>
-                  <span>{{ formatDateTime(page.createdAt) }}</span>
+                  <span><i class="fa-solid fa-calendar text-gray-300 mr-1"></i>{{ formatDateTime(page.createdAt) }}</span>
                 </div>
               </div>
             </div>
@@ -61,9 +61,7 @@
             <div class="mt-6">
               <RouterLink :to="getPermalink(page.path)" class="read-more-btn">
                 {{ t('blog.readMore') }}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-                </svg>
+                <i class="fa-solid fa-arrow-right text-sm ml-1"></i>
               </RouterLink>
             </div>
           </div>
diff --git a/apps/frontend/src/page/blog/BlogShowPage.vue b/apps/frontend/src/page/blog/BlogShowPage.vue
index 787572b..4e85415 100644
--- a/apps/frontend/src/page/blog/BlogShowPage.vue
+++ b/apps/frontend/src/page/blog/BlogShowPage.vue
@@ -7,11 +7,11 @@
       </div>
 
       <div class="post-hero-container">
-        <RouterLink to="/blog" class="back-link">← Back to Blog</RouterLink>
+        <RouterLink to="/blog" class="back-link"><i class="fa-solid fa-arrow-left mr-1"></i> Back to Blog</RouterLink>
         <template v-if="pageContent">
           <h1 class="hero-title mt-4">{{ pageContent.title }}</h1>
           <p class="hero-subtitle mb-4">{{ pageContent.description }}</p>
-          <div class="blog-post-timestamp text-indigo-200">{{ formatDateTime(pageContent.createdAt) }}</div>
+          <div class="blog-post-timestamp text-indigo-200"><i class="fa-solid fa-calendar mr-1"></i>{{ formatDateTime(pageContent.createdAt) }}</div>
         </template>
       </div>
     </header>
diff --git a/apps/frontend/src/page/catalog/CatalogIndexPage.vue b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
index 077835d..d560561 100644
--- a/apps/frontend/src/page/catalog/CatalogIndexPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
@@ -46,12 +46,12 @@
                   :href="getLatestStable(releases)?.htmlFolderPath"
                   target="_blank"
                   class="btn-play-sm"
-                >{{ t('catalog.play') }}</a>
+                ><i class="fa-solid fa-play mr-1.5 text-xs"></i>{{ t('catalog.play') }}</a>
                 <RouterLink :to="`/catalog/${software.name}`" class="btn-info-sm">
                   <i class="fa-solid fa-circle-info"></i> {{ t('catalog.moreInfo') }}
                 </RouterLink>
                 <span v-if="getTotalDownloads(software.name)" class="software-download-count">
-                  ↓ {{ getTotalDownloads(software.name) }} {{ t('catalog.downloads') }}
+                  <i class="fa-solid fa-download text-[10px]"></i> {{ getTotalDownloads(software.name) }} {{ t('catalog.downloads') }}
                 </span>
               </div>
             </div>
diff --git a/apps/frontend/src/page/catalog/CatalogShowPage.vue b/apps/frontend/src/page/catalog/CatalogShowPage.vue
index 65a9ba4..9452bfc 100644
--- a/apps/frontend/src/page/catalog/CatalogShowPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogShowPage.vue
@@ -4,7 +4,7 @@
       <div class="hero-container">
         <nav class="mb-8">
           <RouterLink to="/catalog" class="catalog-back-link">
-            {{ t('catalogShow.back') }}
+            <i class="fa-solid fa-arrow-left"></i> {{ t('catalogShow.back') }}
           </RouterLink>
         </nav>
 
@@ -66,7 +66,7 @@
                 <dt class="catalog-info-label">{{ t('catalogShow.links') }}</dt>
                 <dd class="flex flex-col gap-1.5">
                   <a v-for="link in software.externalLinks" :key="link.url" :href="link.url" target="_blank" class="catalog-external-link">
-                    {{ link.label }} <span class="text-xs">↗</span>
+                    {{ link.label }} <i class="fa-solid fa-up-right-from-square text-xs"></i>
                   </a>
                 </dd>
               </div>
@@ -88,10 +88,10 @@
                   <span class="latest-release-badge">{{ t('catalogShow.latestStable') }}</span>
                 </div>
                 <h2 class="latest-release-version">{{ latestStable.version }}</h2>
-                <p class="latest-release-date">{{ t('catalogShow.released') }} {{ formatDateTime(latestStable.UpdatedAt) }}</p>
+                <p class="latest-release-date"><i class="fa-solid fa-calendar mr-1"></i>{{ t('catalogShow.released') }} {{ formatDateTime(latestStable.UpdatedAt) }}</p>
               </div>
 
-              <a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="latest-release-play-btn">{{ t('catalogShow.playNow') }}</a>
+              <a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="latest-release-play-btn"><i class="fa-solid fa-play mr-2"></i>{{ t('catalogShow.playNow') }}</a>
             </div>
 
             <div v-if="tableAssets(latestStable).length" class="latest-release-assets">
@@ -143,7 +143,7 @@
                         <td class="px-8 py-4">
                           <div class="release-version-row">
                             <span class="release-version">{{ release.version }}</span>
-                            <span v-if="release.downloadCount" class="release-download-count">↓ {{ release.downloadCount }}</span>
+                            <span v-if="release.downloadCount" class="release-download-count"><i class="fa-solid fa-download text-[10px]"></i> {{ release.downloadCount }}</span>
                           </div>
                           <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="release-play-link">{{ t('catalogShow.play') }}</a>
                         </td>
diff --git a/apps/frontend/src/page/catalog/ImageLightbox.vue b/apps/frontend/src/page/catalog/ImageLightbox.vue
index 971028a..f406b65 100644
--- a/apps/frontend/src/page/catalog/ImageLightbox.vue
+++ b/apps/frontend/src/page/catalog/ImageLightbox.vue
@@ -10,13 +10,13 @@
       @keydown.left="prev"
       @keydown.right="next"
     >
-      <button class="lightbox-close-btn" @click="close">&times;</button>
+      <button class="lightbox-close-btn" @click="close"><i class="fa-solid fa-xmark"></i></button>
 
       <button
         v-if="images.length > 1" class="lightbox-nav-btn left-4"
         @click="prev"
       >
-        &lsaquo;
+        <i class="fa-solid fa-chevron-left"></i>
       </button>
 
       <img
@@ -29,7 +29,7 @@
         v-if="images.length > 1" class="lightbox-nav-btn right-4"
         @click="next"
       >
-        &rsaquo;
+        <i class="fa-solid fa-chevron-right"></i>
       </button>
 
       <div v-if="images.length > 1" class="lightbox-counter">
diff --git a/apps/frontend/src/page/code/CodeIndexPage.vue b/apps/frontend/src/page/code/CodeIndexPage.vue
index 5f43f3f..4b3b98b 100644
--- a/apps/frontend/src/page/code/CodeIndexPage.vue
+++ b/apps/frontend/src/page/code/CodeIndexPage.vue
@@ -4,7 +4,7 @@
       <h1 class="hero-title">{{ t('code.title') }}</h1>
       <p class="hero-subtitle text-teal-50 mb-10">{{ t('code.subtitle') }}</p>
       <a href="https://git.teletype.hu" target="_blank" class="btn-hero-teal">
-        {{ t('code.openGitea') }}
+        <i class="fa-solid fa-code-branch mr-2"></i>{{ t('code.openGitea') }}
       </a>
     </div>
   </header>
@@ -21,12 +21,12 @@
       <div v-for="repo in publicRepos" :key="repo.name" class="card-base">
         <h3 class="repo-card-title">
           <a :href="repo.html_url" target="_blank" class="repo-link">
-            {{ repo.owner.login }}/{{ repo.name }}
+            <i class="fa-solid fa-code-branch mr-1 text-sm opacity-60"></i>{{ repo.owner.login }}/{{ repo.name }}
           </a>
         </h3>
         <p v-if="repo.description" class="repo-card-desc">{{ repo.description }}</p>
-        <p v-if="repo.language" class="repo-card-meta">{{ t('code.language') }} {{ repo.language }}</p>
-        <p class="repo-card-meta">{{ t('code.updated') }} {{ formatDateTime(repo.updated_at) }}</p>
+        <p v-if="repo.language" class="repo-card-meta"><i class="fa-solid fa-circle text-[6px] mr-1 align-middle"></i>{{ t('code.language') }} {{ repo.language }}</p>
+        <p class="repo-card-meta"><i class="fa-solid fa-clock text-[10px] mr-1 opacity-50"></i>{{ t('code.updated') }} {{ formatDateTime(repo.updated_at) }}</p>
       </div>
     </div>
 
@@ -47,7 +47,7 @@
             : <span class="text-gray-700">{{ commit.message.split('\n')[0] }}</span>
           </p>
           <p class="commit-meta">
-            {{ t('code.authoredBy') }} <span class="font-bold">{{ commit.author.name }}</span> {{ t('code.on') }} {{ formatDateTime(commit.date) }}
+            <i class="fa-solid fa-user text-[10px] mr-0.5 opacity-50"></i>{{ t('code.authoredBy') }} <span class="font-bold">{{ commit.author.name }}</span> <i class="fa-solid fa-clock text-[10px] mx-0.5 opacity-50"></i>{{ t('code.on') }} {{ formatDateTime(commit.date) }}
             <a :href="commit.url" target="_blank" class="commit-sha-link">
               <span class="font-mono text-xs">{{ commit.sha.substring(0, 7) }}</span>
             </a>
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index 1ca627e..183b198 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -4,9 +4,7 @@
       <h1 class="hero-title mb-6">{{ t('contact.title') }}</h1>
       <p class="hero-subtitle mb-10 text-blue-100">{{ t('contact.subtitle') }}</p>
       <a :href="DISCORD_INVITE_LINK" target="_blank" class="discord-hero-btn">
-        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.862-1.297 1.197-1.99.051-.105.001-.23-.106-.272a13.223 13.223 0 0 1-1.878-.894.077.077 0 0 1-.007-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .077.01c.12.098.246.196.373.29a.077.077 0 0 1-.006.128 12.299 12.299 0 0 1-1.878.894.077.077 0 0 0-.106.272c.335.693.735 1.36 1.197 1.99a.078.078 0 0 0 .084.028 19.83 19.83 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.956-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.956 2.419-2.156 2.419zm7.974 0c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.946 2.419-2.156 2.419z" />
-        </svg>
+        <i class="fa-brands fa-discord text-2xl"></i>
         {{ t('contact.joinDiscord') }}
       </a>
     </div>
@@ -32,15 +30,15 @@
 
         <div class="community-grid-3">
           <div class="community-section border-[#5865F2]">
-            <h3 class="community-section-title text-[#5865F2]">Discord</h3>
+            <h3 class="community-section-title text-[#5865F2]"><i class="fa-brands fa-discord"></i> Discord</h3>
             <p class="community-section-desc">{{ t('contact.discord.desc') }}</p>
             <a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
-              {{ t('contact.discord.link') }} <span>→</span>
+              {{ t('contact.discord.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
             </a>
           </div>
 
           <div class="community-section border-green-500">
-            <h3 class="community-section-title text-green-700">IRC</h3>
+            <h3 class="community-section-title text-green-700"><i class="fa-solid fa-terminal"></i> IRC</h3>
             <p class="community-section-desc">{{ t('contact.irc.desc') }}</p>
             <div class="irc-box">
               <span class="irc-network">Network: Libera.Chat</span>
@@ -49,7 +47,7 @@
           </div>
 
           <div class="community-section border-amber-500">
-            <h3 class="community-section-title text-amber-700">BBS</h3>
+            <h3 class="community-section-title text-amber-700"><i class="fa-solid fa-tower-broadcast"></i> BBS</h3>
             <p class="community-section-desc">{{ t('contact.bbs.desc') }}</p>
             <div class="bbs-box">
               <span class="bbs-host">Host: games.teletype.hu</span>
@@ -67,34 +65,34 @@
 
         <div class="social-grid">
           <div class="community-section border-red-600">
-            <h3 class="community-section-title text-red-600">YouTube</h3>
+            <h3 class="community-section-title text-red-600"><i class="fa-brands fa-youtube"></i> YouTube</h3>
             <p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
             <a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
-              {{ t('contact.youtube.link') }} <span>→</span>
+              {{ t('contact.youtube.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
             </a>
           </div>
 
           <div class="community-section border-[#1877F2]">
-            <h3 class="community-section-title text-[#1877F2]">Facebook</h3>
+            <h3 class="community-section-title text-[#1877F2]"><i class="fa-brands fa-facebook"></i> Facebook</h3>
             <p class="community-section-desc">{{ t('contact.facebook.desc') }}</p>
             <a href="https://www.facebook.com/teletypegames" target="_blank" class="community-link-facebook">
-              {{ t('contact.facebook.link') }} <span>→</span>
+              {{ t('contact.facebook.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
             </a>
           </div>
 
           <div class="community-section border-[#0A66C2]">
-            <h3 class="community-section-title text-[#0A66C2]">LinkedIn</h3>
+            <h3 class="community-section-title text-[#0A66C2]"><i class="fa-brands fa-linkedin"></i> LinkedIn</h3>
             <p class="community-section-desc">{{ t('contact.linkedin.desc') }}</p>
             <a href="https://www.linkedin.com/company/teletypegames/" target="_blank" class="community-link-linkedin">
-              {{ t('contact.linkedin.link') }} <span>→</span>
+              {{ t('contact.linkedin.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
             </a>
           </div>
 
           <div class="community-section border-[#1DB954]">
-            <h3 class="community-section-title text-[#1DB954]">Spotify</h3>
+            <h3 class="community-section-title text-[#1DB954]"><i class="fa-brands fa-spotify"></i> Spotify</h3>
             <p class="community-section-desc">{{ t('contact.spotify.desc') }}</p>
             <a href="https://open.spotify.com/playlist/4T7hMkdiERkkW7HaPXqgfX?si=7cdaa091c3274422" target="_blank" class="community-link-spotify">
-              {{ t('contact.spotify.link') }} <span>→</span>
+              {{ t('contact.spotify.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
             </a>
           </div>
         </div>
diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue
index 9d33302..5eb09a9 100644
--- a/apps/frontend/src/page/home/HomePage.vue
+++ b/apps/frontend/src/page/home/HomePage.vue
@@ -22,7 +22,7 @@
         <div class="countdown-card">
           <h2 class="countdown-event-name">{{ nextEvent.name }}</h2>
           <div class="countdown-timer">{{ countdownText }}</div>
-          <p class="countdown-date">{{ t('home.startsOn') }} <span class="font-semibold">{{ nextEvent.dateText }}</span></p>
+          <p class="countdown-date"><i class="fa-solid fa-calendar-days mr-1"></i>{{ t('home.startsOn') }} <span class="font-semibold">{{ nextEvent.dateText }}</span></p>
 
           <div v-if="followingEvents.length > 0" class="upcoming-events-section">
             <h3 class="upcoming-events-title">{{ t('home.upcomingEvents') }}</h3>
@@ -57,9 +57,9 @@
                 :href="highlightedStableRelease.htmlFolderPath"
                 target="_blank"
                 class="featured-btn-play"
-              >{{ t('home.playInBrowser') }}</a>
+              ><i class="fa-solid fa-play mr-2"></i>{{ t('home.playInBrowser') }}</a>
               <RouterLink :to="`/catalog/${highlightedSoftware.software.name}`" class="featured-btn-secondary">
-                {{ t('home.viewProjectDetails') }}
+                <i class="fa-solid fa-circle-info mr-2"></i>{{ t('home.viewProjectDetails') }}
               </RouterLink>
             </div>
           </div>
@@ -118,7 +118,7 @@
 
               <div class="mt-6">
                 <a :href="`https://www.youtube.com/watch?v=${ytVideoId}`" target="_blank" class="yt-play-button">
-                  <span class="text-xl">▶</span> {{ t('home.watchOnYoutube') }}
+                  <i class="fa-brands fa-youtube text-xl text-red-500"></i> {{ t('home.watchOnYoutube') }}
                 </a>
               </div>
             </div>
diff --git a/apps/frontend/src/page/howtos/HowtosIndexPage.vue b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
index a26d71f..3bc237b 100644
--- a/apps/frontend/src/page/howtos/HowtosIndexPage.vue
+++ b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
@@ -13,7 +13,7 @@
         </h1>
         <p class="hero-subtitle mb-10">{{ t('howtos.subtitle') }}</p>
         <a :href="WIKI_BASE" target="_blank" class="btn-hero-indigo">
-          {{ t('howtos.knowledgeBase') }}
+          <i class="fa-solid fa-book mr-2"></i>{{ t('howtos.knowledgeBase') }}
         </a>
       </div>
     </header>
@@ -47,7 +47,7 @@
                 <span class="new-dot"></span>
                 {{ t('howtos.new') }}
               </span>
-              <span>{{ formatDateTime(page.updatedAt) }}</span>
+              <span><i class="fa-solid fa-calendar text-gray-300 mr-1"></i>{{ formatDateTime(page.updatedAt) }}</span>
             </div>
           </div>
 
@@ -57,8 +57,8 @@
           <div v-else class="howto-card-no-desc">{{ t('howtos.noDesc') }}</div>
 
           <div class="howto-card-footer">
-            <span class="howto-card-path">{{ page.path }}</span>
-            <span class="howto-card-read-link">{{ t('howtos.read') }} <span class="text-lg">→</span></span>
+            <span class="howto-card-path"><i class="fa-solid fa-file-lines mr-1 opacity-50"></i>{{ page.path }}</span>
+            <span class="howto-card-read-link">{{ t('howtos.read') }} <i class="fa-solid fa-arrow-right text-sm"></i></span>
           </div>
         </a>
       </div>
@@ -66,9 +66,7 @@
       <div v-if="!error && recentPages.length > 0" class="howtos-footer">
         <a :href="WIKI_BASE" target="_blank" class="browse-wiki-btn">
           {{ t('howtos.browseWiki') }}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-          </svg>
+          <i class="fa-solid fa-arrow-right"></i>
         </a>
       </div>
     </main>