Icomoon Problem On - Question | JoomShaper
Back to the questions

Icomoon Problem On

F

freenduro

Template 5 days ago

Hello JoomShaper Support Team,

I am reaching out to report a CSS font conflict regarding the password toggle icon ("eye" icon) on a fresh installation of your template.

Environment: Joomla Version: Joomla 6 Template: Federal - Default Installation Method: Fresh install using your Quickstart (Kickstart) package.

The Issue: The "show/hide password" eye icon is missing (invisible) on all password fields across the site. This affects both the Joomla core login module and third-party extensions (like my Membership Pro registration forms).

Technical Details & Proof: By using the browser's developer tools inspector, I found the exact cause of the conflict. The Federal template's CSS aggressively forces the Icomoon font on all icon classes using this rule:

[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; }

Because Joomla 6 uses the <span class="icon-eye icon-fw" aria-hidden="true"></span> class for the password toggle, your template forces it to use Icomoon instead of Joomla's native font. However, the Icomoon font file provided with the Federal template does not seem to contain the eye character mapped to this class, resulting in a blank space.

The Workaround I tested: In the browser inspector, if I simply uncheck/disable the font-family: 'icomoon' !important; rule for that specific element, Joomla's native font takes over and the eye icon appears perfectly.

Could you please provide a permanent CSS fix or a template update to exclude .icon-eye, .icon-eye-slash, and .icon-eye-minus from this global Icomoon override?

I have attached screenshots of the inspector showing the issue and the successful workaround.

Same problem on your demo

Coud you fix it ?

0
3 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 5 days ago #220461

Hello,

Thank you for bringing this to our attention, and we sincerely apologize for the inconvenience caused.

To resolve the issue with the password toggle (“eye”) icon, please add the following CSS code in Template Options → Custom Code → Custom CSS:

[class^="icon-"], [class*=" icon-"] {
    font-family: "Font Awesome 6 Free" !important;
}

After adding the code, please clear your site and browser cache and then check the password fields again. The eye icon should display correctly.

If the issue persists after applying the change, please let us know and we will be happy to assist you further.

Best regards

0
F
freenduro
Accepted Answer
5 days ago #220504

i add [class^="icon-"], [class*=" icon-"] { font-family: "Font Awesome 6 Free" !important; }

but don't work : The eye icon not display.

and with your css added , if in developer tools inspector i desactivate line [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; } the The eye icon not display

but if i remuve you css line and if in developer tools inspector i desactivate line [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; } the The eye icon display

0
F
freenduro
Accepted Answer
5 days ago #220516

After doing a deep dive with the browser inspector, I found two major bugs in how the Federal template / SP Page Builder handles CSS and overrides Joomla core features:

Bug 1: SPPB aggressively overrides Font-Weight Your suggestion to globally change the font to "Font Awesome 6 Free" fails because of this rule located in /media/com_sppagebuilder/assets/iconfont/icomoon/style.css:

CSS [class^="icon-"], [class=" icon-"] { font-family: 'icomoon' !important; font-weight: normal; / <-- This is the issue */ } Font Awesome 6 Solid icons (like icon-eye) require font-weight: 900; to render. Because your core CSS forces font-weight: normal;, the eye icon remains completely invisible (blank space) even if the font-family is changed.

Bug 2: The "Custom CSS" field in Template Options is ignored Code placed in Template Options -> Custom Code -> Custom CSS is not loaded on Joomla core pages (like the login/registration view where the password toggle is).

The Actual Working Solution (For anyone else having this issue): To actually fix this, you must bypass the Template Options and use a physical file, while forcing both the font family and the font weight on the pseudo-element.

Step 1: Create a physical file named custom.css inside /templates/shaper_federal/css/ (or whatever your template folder is named). Step 2: Add this highly specific CSS to force the Font Awesome icon to render over Icomoon:

CSS / Fix for Joomla core password toggle (Eye icon) overridden by JoomShaper / .input-password-toggle span.icon-eye::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; content: "\f06e" !important; display: inline-block !important; visibility: visible !important; }

.input-password-toggle span.icon-eye-slash::before, .input-password-toggle span.icon-eye-minus::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; content: "\f070" !important; display: inline-block !important; visibility: visible !important; }

0