gabeszm/weclome-banner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Font Awesome icon rendering using Discourse icon helper

Browse source 
- 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.
This commit is contained in:
gabeszm 2025-10-16 17:59:12 +02:00
parent 629eb1b302
commit a838e3c22b
2 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
common/common.scss
View file

@ -206,6 +206,11 @@
font-size: 40px; font-size: 40px;
text-align: left; text-align: left;
} }
.cta-icon .d-icon {
font-size: 40px;
color: var(--text-color);
}
.cta-content { .cta-content {
flex: 1; flex: 1;
@ -228,16 +233,16 @@
margin-top: 10px; margin-top: 10px;
color: var(--primary-color); color: var(--primary-color);
} }
.cta-cta i { .cta-cta .d-icon {
padding-left: 0; margin-left: 0;
padding-right: 10px; margin-right: 10px;
transition: padding 250ms ease-in-out; transition: margin 250ms ease-in-out;
} }
.cta-card:hover .cta-cta i { .cta-card:hover .cta-cta .d-icon {
padding-left: 3px; margin-left: 3px;
padding-right: 7px; margin-right: 7px;
} }
/* Search input appearance in hero section */ /* Search input appearance in hero section */

17
javascripts/discourse/components/welcome-banner.gjs
View file

@ -7,6 +7,7 @@ import { eq, and, not } from "truth-helpers";
import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy"; import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import SearchMenu from "discourse/components/search-menu"; import SearchMenu from "discourse/components/search-menu";
import icon from "discourse-common/helpers/d-icon";
export default class WelcomeBanner extends Component { export default class WelcomeBanner extends Component {
@service router; @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}}> <a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}>
<div class="cta-icon"> <div class="cta-icon">
{{#if (eq settings.cta_card_1_icon_type "font_awesome")}} {{#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}} {{else}}
{{settings.cta_card_1_icon_emoji}} {{settings.cta_card_1_icon_emoji}}
{{/if}} {{/if}}
@ -85,7 +86,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_1_title}}</span> <span class="cta-title">{{settings.cta_card_1_title}}</span>
<span class="cta-desc">{{settings.cta_card_1_description}}</span> <span class="cta-desc">{{settings.cta_card_1_description}}</span>
<span class="cta-cta"> <span class="cta-cta">
<i class="fas fa-angle-double-right"></i> {{icon "angle-double-right"}}
{{settings.cta_card_1_cta_text}} {{settings.cta_card_1_cta_text}}
</span> </span>
</div> </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}}> <a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}>
<div class="cta-icon"> <div class="cta-icon">
{{#if (eq settings.cta_card_2_icon_type "font_awesome")}} {{#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}} {{else}}
{{settings.cta_card_2_icon_emoji}} {{settings.cta_card_2_icon_emoji}}
{{/if}} {{/if}}
@ -107,7 +108,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_2_title}}</span> <span class="cta-title">{{settings.cta_card_2_title}}</span>
<span class="cta-desc">{{settings.cta_card_2_description}}</span> <span class="cta-desc">{{settings.cta_card_2_description}}</span>
<span class="cta-cta"> <span class="cta-cta">
<i class="fas fa-angle-double-right"></i> {{icon "angle-double-right"}}
{{settings.cta_card_2_cta_text}} {{settings.cta_card_2_cta_text}}
</span> </span>
</div> </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}}> <a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}>
<div class="cta-icon"> <div class="cta-icon">
{{#if (eq settings.cta_card_3_icon_type "font_awesome")}} {{#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}} {{else}}
{{settings.cta_card_3_icon_emoji}} {{settings.cta_card_3_icon_emoji}}
{{/if}} {{/if}}
@ -129,7 +130,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_3_title}}</span> <span class="cta-title">{{settings.cta_card_3_title}}</span>
<span class="cta-desc">{{settings.cta_card_3_description}}</span> <span class="cta-desc">{{settings.cta_card_3_description}}</span>
<span class="cta-cta"> <span class="cta-cta">
<i class="fas fa-angle-double-right"></i> {{icon "angle-double-right"}}
{{settings.cta_card_3_cta_text}} {{settings.cta_card_3_cta_text}}
</span> </span>
</div> </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}}> <a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}>
<div class="cta-icon"> <div class="cta-icon">
{{#if (eq settings.cta_card_4_icon_type "font_awesome")}} {{#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}} {{else}}
{{settings.cta_card_4_icon_emoji}} {{settings.cta_card_4_icon_emoji}}
{{/if}} {{/if}}
@ -151,7 +152,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_4_title}}</span> <span class="cta-title">{{settings.cta_card_4_title}}</span>
<span class="cta-desc">{{settings.cta_card_4_description}}</span> <span class="cta-desc">{{settings.cta_card_4_description}}</span>
<span class="cta-cta"> <span class="cta-cta">
<i class="fas fa-angle-double-right"></i> {{icon "angle-double-right"}}
{{settings.cta_card_4_cta_text}} {{settings.cta_card_4_cta_text}}
</span> </span>
</div> </div>