From a838e3c22bc688d642e47670cef399e463323878 Mon Sep 17 00:00:00 2001
From: gabeszm <vgabor92@protonmail.com>
Date: Thu, 16 Oct 2025 17:59:12 +0200
Subject: [PATCH] Fix Font Awesome icon rendering using Discourse icon helper

- Import d-icon helper from discourse-common
- Replace manual <i> tags with {{icon}} helper for Font Awesome icons
- Update CSS to style .d-icon elements instead of i tags
- Ensure icons display correctly with proper sizing and colors
- Fix hover animation to use margin instead of padding for d-icon

This resolves the issue where Font Awesome icons weren't appearing when selected in admin settings.
---
 common/common.scss                            | 23 +++++++++++--------
 .../discourse/components/welcome-banner.gjs   | 17 +++++++-------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index ba62c97..6ffa1a6 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -206,6 +206,11 @@
     font-size: 40px;
     text-align: left;
   }
+
+  .cta-icon .d-icon {
+    font-size: 40px;
+    color: var(--text-color);
+  }
   
   .cta-content {
     flex: 1;
@@ -228,16 +233,16 @@
     margin-top: 10px;
     color: var(--primary-color);
   }
-  
-  .cta-cta i {
-    padding-left: 0;
-    padding-right: 10px;
-    transition: padding 250ms ease-in-out;
+
+  .cta-cta .d-icon {
+    margin-left: 0;
+    margin-right: 10px;
+    transition: margin 250ms ease-in-out;
   }
-  
-  .cta-card:hover .cta-cta i {
-    padding-left: 3px;
-    padding-right: 7px;
+
+  .cta-card:hover .cta-cta .d-icon {
+    margin-left: 3px;
+    margin-right: 7px;
   }
   
   /* Search input appearance in hero section */
diff --git a/javascripts/discourse/components/welcome-banner.gjs b/javascripts/discourse/components/welcome-banner.gjs
index bfed1fd..e44005c 100644
--- a/javascripts/discourse/components/welcome-banner.gjs
+++ b/javascripts/discourse/components/welcome-banner.gjs
@@ -7,6 +7,7 @@ import { eq, and, not } from "truth-helpers";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import SearchMenu from "discourse/components/search-menu";
+import icon from "discourse-common/helpers/d-icon";
 
 export default class WelcomeBanner extends Component {
   @service router;
@@ -76,7 +77,7 @@ export default class WelcomeBanner extends Component {
                   <a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}>
                     <div class="cta-icon">
                       {{#if (eq settings.cta_card_1_icon_type "font_awesome")}}
-                        <i class={{concat "fas fa-" settings.cta_card_1_icon_font_awesome}}></i>
+                        {{icon settings.cta_card_1_icon_font_awesome}}
                       {{else}}
                         {{settings.cta_card_1_icon_emoji}}
                       {{/if}}
@@ -85,7 +86,7 @@ export default class WelcomeBanner extends Component {
                       <span class="cta-title">{{settings.cta_card_1_title}}</span>
                       <span class="cta-desc">{{settings.cta_card_1_description}}</span>
                       <span class="cta-cta">
-                        <i class="fas fa-angle-double-right"></i>
+                        {{icon "angle-double-right"}}
                         {{settings.cta_card_1_cta_text}}
                       </span>
                     </div>
@@ -98,7 +99,7 @@ export default class WelcomeBanner extends Component {
                   <a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}>
                     <div class="cta-icon">
                       {{#if (eq settings.cta_card_2_icon_type "font_awesome")}}
-                        <i class={{concat "fas fa-" settings.cta_card_2_icon_font_awesome}}></i>
+                        {{icon settings.cta_card_2_icon_font_awesome}}
                       {{else}}
                         {{settings.cta_card_2_icon_emoji}}
                       {{/if}}
@@ -107,7 +108,7 @@ export default class WelcomeBanner extends Component {
                       <span class="cta-title">{{settings.cta_card_2_title}}</span>
                       <span class="cta-desc">{{settings.cta_card_2_description}}</span>
                       <span class="cta-cta">
-                        <i class="fas fa-angle-double-right"></i>
+                        {{icon "angle-double-right"}}
                         {{settings.cta_card_2_cta_text}}
                       </span>
                     </div>
@@ -120,7 +121,7 @@ export default class WelcomeBanner extends Component {
                   <a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}>
                     <div class="cta-icon">
                       {{#if (eq settings.cta_card_3_icon_type "font_awesome")}}
-                        <i class={{concat "fas fa-" settings.cta_card_3_icon_font_awesome}}></i>
+                        {{icon settings.cta_card_3_icon_font_awesome}}
                       {{else}}
                         {{settings.cta_card_3_icon_emoji}}
                       {{/if}}
@@ -129,7 +130,7 @@ export default class WelcomeBanner extends Component {
                       <span class="cta-title">{{settings.cta_card_3_title}}</span>
                       <span class="cta-desc">{{settings.cta_card_3_description}}</span>
                       <span class="cta-cta">
-                        <i class="fas fa-angle-double-right"></i>
+                        {{icon "angle-double-right"}}
                         {{settings.cta_card_3_cta_text}}
                       </span>
                     </div>
@@ -142,7 +143,7 @@ export default class WelcomeBanner extends Component {
                   <a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}>
                     <div class="cta-icon">
                       {{#if (eq settings.cta_card_4_icon_type "font_awesome")}}
-                        <i class={{concat "fas fa-" settings.cta_card_4_icon_font_awesome}}></i>
+                        {{icon settings.cta_card_4_icon_font_awesome}}
                       {{else}}
                         {{settings.cta_card_4_icon_emoji}}
                       {{/if}}
@@ -151,7 +152,7 @@ export default class WelcomeBanner extends Component {
                       <span class="cta-title">{{settings.cta_card_4_title}}</span>
                       <span class="cta-desc">{{settings.cta_card_4_description}}</span>
                       <span class="cta-cta">
-                        <i class="fas fa-angle-double-right"></i>
+                        {{icon "angle-double-right"}}
                         {{settings.cta_card_4_cta_text}}
                       </span>
                     </div>