Some Font Awesome icons look bad because of fas/far mix ups

[startover909]

From dropdown arrows, header icons to the client area home main icons (things like cubes and credit cards etc, see attached screenshot), some look terrible because of the mix up of "solid fas" and "regular far" FA5 icons. 

I just spent 2 hours editing my custom template files for 7.6 using the Github changelog, only to find out that some of the default Six template files that I didn't touch contain those messy icons. I don't even know whether I should edit those (which  means more modified template files for future upgrades) or will WHMCS fix them.

Is it just me or does anyone else feel this FA5 upgrade is uncalled for? I can find this feature request with only 8 upvotes:

https://requests.whmcs.com/topic/upgrade-to-fontawesome-5

Meanwhile many other requests with more votes and much more important improvements were left alone.

More importantly, if FA5 really needs to be done, at least do it correctly..

 

Edited August 5, 2018 by startover909

[brian!]

37 minutes ago, startover909 said:

I don't even know whether I should edit those (which  means more modified template files for future upgrades) or will WHMCS fix them.

unless visually noticeable, i'd suggest holding off - there must be an update coming soon (if only to incorporate the 2 hotfixes and the FS5 updates).

[startover909]

6 minutes ago, brian! said:

unless visually noticeable, i'd suggest holding off - there must be an update coming soon (if only to incorporate the 2 hotfixes and the FS5 updates).

Thanks Brian, hopefully that's the case.

Upon further inspection, I see that some of these icons will just never be the same due to the FA5 changes. So "fas" is supposed to be the default fallback to the old "fa", and most likely whmcs devs just updated a bunch of fa with fas unless in some cases the icon classes changed. But the problem is that lots of icons will become "thicker" with fas because the way FA5's solids are styled, so some of the icons need to be changed to "far" to look better, but then that also changes the styles and how they blend with other icons.

Now I can see why most of the Wordpress themes and plugins want nothing to do with FA5.

[brian!]

yeah, there was literally no urgency for them to upgrade to FA5 now... other than to look like they were doing something. 😀

with little effort, you can tweak the output to add colour and thinner icons...

<div class="tiles clearfix">
    <div class="row">
        <div class="col-sm-3 col-xs-6 tile" onclick="window.location='clientarea.php?action=services'">
            <a href="clientarea.php?action=services">
                <div class="icon"><i class="fal fa-cube" style="color: #5bc0de;"></i></div>
                <div class="stat">{$clientsstats.productsnumactive}</div>
                <div class="title">{$LANG.navservices}</div>
                <div class="highlight bg-color-blue"></div>
            </a>
        </div>
        {if $registerdomainenabled || $transferdomainenabled}
            <div class="col-sm-3 col-xs-6 tile" onclick="window.location='clientarea.php?action=domains'">
                <a href="clientarea.php?action=domains">
                    <div class="icon"><i class="fal fa-globe" style="color: #5cb85c;"></i></div>
                    <div class="stat">{$clientsstats.numactivedomains}</div>
                    <div class="title">{$LANG.navdomains}</div>
                    <div class="highlight bg-color-green"></div>
                </a>
            </div>
        {elseif $condlinks.affiliates && $clientsstats.isAffiliate}
            <div class="col-sm-3 col-xs-6 tile" onclick="window.location='affiliates.php'">
                <a href="affiliates.php">
                    <div class="icon"><i class="fal fa-shopping-cart" style="color: #5cb85c;"></i></div>
                    <div class="stat">{$clientsstats.numaffiliatesignups}</div>
                    <div class="title">{$LANG.affiliatessignups}</div>
                    <div class="highlight bg-color-green"></div>
                </a>
            </div>
        {else}
            <div class="col-sm-3 col-xs-6 tile" onclick="window.location='clientarea.php?action=quotes'">
                <a href="clientarea.php?action=quotes">
                    <div class="icon"><i class="fal fa-file-alt" style="color: #5cb85c;"></i></div>
                    <div class="stat">{$clientsstats.numquotes}</div>
                    <div class="title">{$LANG.quotes}</div>
                    <div class="highlight bg-color-green"></div>
                </a>
            </div>
        {/if}
        <div class="col-sm-3 col-xs-6 tile" onclick="window.location='supporttickets.php'">
            <a href="supporttickets.php">
                <div class="icon"><i class="fal fa-comments" style="color: #d9534f;"></i></div>
                <div class="stat">{$clientsstats.numactivetickets}</div>
                <div class="title">{$LANG.navtickets}</div>
                <div class="highlight bg-color-red"></div>
            </a>
        </div>
        <div class="col-sm-3 col-xs-6 tile" onclick="window.location='clientarea.php?action=invoices'">
            <a href="clientarea.php?action=invoices">
                <div class="icon"><i class="fal fa-calculator" style="color: #f0ad4e;"></i></div>
                <div class="stat">{$clientsstats.numunpaidinvoices}</div>
                <div class="title">{$LANG.navinvoices}</div>
                <div class="highlight bg-color-gold"></div>
            </a>
        </div>
    </div>
</div>

 

[startover909]

26 minutes ago, brian! said:

yeah, there was literally no urgency for them to upgrade to FA5 now... other than to look like they were doing something. 😀

with little effort, you can tweak the output to add colour and thinner icons...

Whoa thanks! I didn't even notice that the FA PRO version was included. In that case the upgrade isn't too bad after all. Hehe.