Missing Akeeba icon, after this PR:

See #30645 (comment)

Missing Akeeba icon, after this PR:

See #30645 (comment)

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30707.

Did you run npm run build:css?
See my screenshot

Did you run npm run build:css?

Oops, the problem is that I couldn't load the Patch (no credentials).

@hans2103 Drone's SCSS code style check fails, see https://ci.joomla.org/joomla/joomla-cms/35541/1/22 for the details. Could you fix that? Let me know if you need advise. Thanks in advance.

hmhm, I have one question, why?

Trouble began when the magic words "backward compatibility" where mentioned.

Search and replace - it is not much "trouble", that actually more easy to do on the extension level than in whole CMS.
In fakt, for developers more easy to find "fa" icon on fontawesome.com, than guessing what "icon-" available.

It just jumping back and forth.

hmhm, I have one question, why?

Trouble began when the magic words "backward compatibility" where mentioned.

Search and replace - it is not much "trouble", that actually more easy to do on the extension level than in whole CMS.
In fakt, for developers more easy to find "fa" icon on fontawesome.com, than guessing what "icon-" available.

It just jumping back and forth.

In Joomla 4 @N6REJ implemented Font Awesome and normalized the use of icons on a lot of places in the core.
He did a very great job. But changing code you have to try to keep changes to a minimum. In Joomla 3 icon- is used and it works. And Font Awesome has the ability to set a variable for the prefix. So why not using icon- as a prefix, which has already been used in J3 and is adapted by the 3th party developers.

Next thing is that we should not name the icons by its name by its action. Mapping in scss should do the rest.
Example... don't name an icon icon-cross when the action is to close something. The icon should be named icon-close. Mapping in scss should cover the rest.

In J4 we're using FontAwesome. In J5 we going to use... I don't know. Font Awesome, Google Material Icons, Octicons, Linecons, Glyphicons, Hawcons... I really don't know. But what I do know is that Joomla should be prepared to switch easily from one to another. And that can be done by correctly naming the icons and apply mapping through scss.
When using 'fas fa-' as icon prefix, you are vendor locking. You should prevent that.

This PR is here to convert the 'fas fa-' prefix to 'icon-'. Some later PRs can implement some kind of HTMLHelper::icon()

I hope to see more opinions in this PR. We all should come to a fast and stable next release of Joomla.

Thanks for re-implementing the original conversion to use fontawesome

Installation missing icons.

https://github.com/hans2103/joomla-cms/blob/5652fbe41ee554b4049c254ad6bd7468e51f0bf4/administrator/components/com_menus/tmpl/items/default.php#L214

https://github.com/hans2103/joomla-cms/blob/5652fbe41ee554b4049c254ad6bd7468e51f0bf4/layouts/joomla/content/info_block/category.php#L19

Just having a question to mapping icon-names to icon-action in scss:

I understand the reasons behind that, but because scss produce the resulting css-files...

Don't that produce bigger css-files which are still bigger after when being compressed through on the fly-gzip by Apache?

This kills most icons in my J4 adapted component.

Just having a question to mapping icon-names to icon-action in scss:

I understand the reasons behind that, but because scss produce the resulting css-files...

Don't that produce bigger css-files which are still bigger after when being compressed through on the fly-gzip by Apache?

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30707.

There are several icons that have the same icon but different names from icomoon &/or their action. so we're having to map those to their actual icon. Doing so is less code then duplicating the icon.
PERSONALLY I'd rather they were all what they are instead of their action others want action not name. We'll be looking at this further down the road as we continue our project.
Our goal right now is to get fa- & icon- working with as little fuss as possible but with icon- being the preferred choice.
We also have to allow for icon's that don't conform. With the b/c restrictions we have it makes things difficult @ best.

icon-joomla

I can solve my issues by taking of
btn btn-micro disabled from, for example:
class="btn btn-micro disabled icon-16-other hasTooltip">

and I have to change fab fa-joomla to icon-joomla

So not a big deal but I wish we would stabilize at last this matter.

@infograf768 fixed display Joomla icon for both icon-joomla as fa-icon. You don't have to adjust your extension if you already adopted fab fa- See screenshot below:

I can solve my issues by taking of
btn btn-micro disabled from, for example:
class="btn btn-micro disabled icon-16-other hasTooltip">

please don't combine styling for a button with styling for an icon. Use icon as shown in the example below

<button class="btn btn-micro disabled hasTooltip">
  <span class="icon-16-other" aria-hidden="true"></span>
  Whatever text you want to display
</button>

please don't combine styling for a button with styling for an icon. Use icon as shown in the example below

I have explained this is a component we created a long time ago which was updated to work with J4. The classes are legacy and were working ok until this pr.
As I said above and if this pr makes it in, I will evidently modify that stuff.

I have explained this is a component we created a long time ago which was updated to work with J4. The classes are legacy and were working ok until this pr.

As far as I underdstand the motivation of this PR, legacy classes from before adjustments to J4 should work, or is my understanding wrong?

Hopefully this PR takes us back to the working state we had before Bear started to mess with fas

That was my understanding, that this was the purpose.

Icons are missing in installation and some in the administration area.

Hopefully this PR takes us back to the working state we had before Bear started to mess with fas

if you only knew......

With this PR merged

• all html coded fas fa- icons in Joomla/Joomla-CMS are replaced by icon-
• scss is adjusted so that fas fa- works
• scss is adjusted so that icon- works

one condition... icons have to be placed with the following html:

<span class="icon-whatever" aria-hidden="true"></span>

in 3th party extensions they can be placed with both HTML example above as with:

<span class="fas fa-whatever" aria-hidden="true"></span>

@Quy
Installation => please show me... I need to solve them
Administration area => this pr only concerns joomla/joomla-cms. After merge I will create a PR for the "Joomla web installer". That is stored in a separate repository. Other missing icons I would like to be informed. I need to solve them.

I downloaded/installed the package here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30707/downloads/35675/

Here is the first step. The other steps have the same issue.

@Quy strange.. I cannot reproduce the issue when I run npm ci

I will try again without the package installer.

Same issue installing from your branch. Please try to install using the package installer:

https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30707/downloads/35675/

@Quy Downloaded the suggested link. Without further actions like running npm ci I see the following when I visit the installation page via Chrome Private Mode. Checked if I had Font Awesome installed on my computer => not present

I confirm @Quy findings using https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30707/downloads/35675/

@Quy and @infograf768 what browsers are you testing with? I am using Chrome on a Macbook Pro in incognito mode and I am able to see the icons using https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30707/downloads/35675/
Can you switch to incognito mode too? I am afraid there is some kind of browser caching involved.

@hans2103 even in your screenshot there are icons missing as there should be one before "Selectc installation language"

Chrome incognito mode same issue (Macintosh)

Found a possible reason of the fail... compilation caching using the wrong fa-font-path.
On local development I have changed the $fa-font-path in installation scss but I don't see this change in the compiles installation css. I will try to find out how to solve that.
And I am going to fix the missing icon-language.

Missing trophy icon:

Still missing these icons:

I need some help.
I want to create a list of all icons used in Joomla

grep -rohw --exclude-dir=node_modules  -e 'icon-\w*' *|sort|uniq

-h hide filename
-o only output search result
-r does a recursive search
-w match the whole word

This oneliner will give me a list

icon-system
icon-system__category

But it will not give me

icon-system-whatever

How do I have to change my pattern to get this hit too?

BBEdit grep gives me also icon-system__header
These are only present in atum css
under for example the form

.cpanel-add-module-icon-system__header,
  .com-cpanel-system__header {
    color: var(--atum-special-color); }
    .cpanel-add-module-icon-system__header span,
    .com-cpanel-system__header span {
      margin-right: 5px; }

@infograf768 .cpanel-add-module-icon-system__header, will not be touched by scss changes in this PR.
It will only look at [class^="icon-"] (classNames starting with icon-) and ['class*=" icon-"] (classNames containing icon- - see the extra space)

many fixes... hans2103#3

I THINK this catches all the mapping. hans2103#4

Missing icon-eye-slash and icon-comment-dots in installation.

Missing icon-desktop, icon-plus-square.

@Quy pics please?
not sure what the fa- eqv is

Go to Help Dashboard to see missing icons and at the bottom of the page for the missing plus icon.

Missing icons:
icon-bullhorn
icon-tasks
icon-cubes
icon-user-tag
icon-user-edit

Go to System, see icons not spinning in Discover, Global Check-in and Database.

icon-pencil-alt
icon-code-branch
icon-universal-access
icon-arrows-alt
icon-th
icon-sliders-h

@hans2103 This PR modifies the update SQL scripts 4.0.0-2019-07-13.sql to set parameter header_icon for modules. But it does not provide new update scripts for updating previous beta versions of 4.0 with an update statement for modifying that. This break the update promise we have since J4 is in beta phase.

Will these modules continue to work with the old values? If yes, we might leave them as they are. But if no, please provide new update scripts, one for each database type, with version 4.0 and date of today in the file name.

Updating params with SQL and text replacement is a dangerous thing. You have to make sure you always use the complete parameter name and value pair, including the double quotes, as search criterion and replacement.

E.g. replacing "header_icon":"fas fa-desktop" by "header_icon":"icon-desktop" in the params colum is safe. Replacing only "fas fa-desktop" would not be safe because that substring may appear somewhere else, too.

You don't know the IDs of the modules, or at least should not rely on them because they might be different on installations updated from previous Beta versions or even updated from 3.9 via 3.10, and so you have to use the combination of module and client_id in the WHERE clause.

I don't have the time now to provide such update SQL script for you but might be able to later fix it if necessary.

But without that SQL script this PR should be rejected if the modules don't continue to work with the old header_icon parameter values.

@richard67 changes to SQL update files have been reverted. Needs more investigation and can be fixed in a later fix if necessary. 'fas fa-' icons should work when this pr is merged

I still think it might need an update SQL script to change the values for previous beta versions, so data is the same for new installations and updates, but this might be just my personal taste if things continue to work without it.

@wilsonge @HLeithner Opinions?

of course sql updates have to be in a new sql file, btw. that's the reason I said several times, that the icon's should be called by function and not by the name of fontawesome now and not later.

Hmm, system tests for this PR here are failing consistently at the same place. The Joomla browser tries to extract a <div> element by it's class to check the result of renaming a file in media manager. The element is not found, and so the waiting for the result times out.

But I haven't found out yet which class it exactly is.

@HLeithner Do you know who could find that out?

@HLeithner that is a huge job that needs to be another PR harald. This pr is big enough. Not only that It's getting harder to stay synced with so many changes we are doing.

solved conflicts due to recent updates

@hans2103 It still shows a conflict on GitHub for file administrator/components/com_joomlaupdate/tmpl/upload/captive.php .

Add icon-text-width.

Add icon-text-width.

added icon with commit 0c0ef56

READY FOR TESTING

@N6REJ They are imported here.
https://github.com/hans2103/joomla-cms/blob/fas-to-icon/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss

@Quy agree, but when we put the @extend fas et al in the for each loop it fails w/o the imports cause it cant' find fa-varwe can certainly try it again see if it can be done but we were not able to after a 2 days of trying last time.

@Quy did you check the generated .css to see if its correct? I'm willing to bet its not generating ALL the .css

@N6REJ Yes, all .css files generated with no missing icons.

@Quy ok, I'll run thru and see if it will work for me. Personally I like the idea of not having it there and couldn't figure out why we had to. Perhaps moving the extend out of the array solved the issue which hans did on one of the last commits.

@hans2103 Meanwhile there are conflicts shown for files components/com_tags/tmpl/tag/default_items.php, components/com_tags/tmpl/tag/list_items.php and components/com_tags/tmpl/tags/default_items.php. I guess it's due to recently merged PR #30998 by @infograf768 .

You have to check each conflict and possibly do a kind of manual merge, i.e. taking the changes from that PR and applying your changes (fa- to icon-) on them. You can't just accept the one or the other file completely.

I think I remember that a while ago I saw that in one of the previous conflict resolvings, that a change from icon- was reverted because you decided to accept the whole other file. But I don't remember now which one it was and can't find it now. I hust remember it was a PHP file. So maybe you should check again if there are some places where fa- to icon- replacements have to be done.

So maybe you should check again if there are some places where fa- to icon- replacements have to be done.

done.... applied changes but didn't touch the sql files

Please add:
icon-align-justify
icon-clipboard
icon-caret-down
icon-caret-up

icon-align-justify
icon-clipboard
icon-caret-down
icon-caret-up

icons added

@hans2103 please can you resolve conflicts so we can continue to test and get this over the line?

@uglyeoin resolved merge conflicts

hopefully we'll get this tested soon, @hans2103 need to merge my pr btw

It needs to fix conflicts, too.

resolved merge conflicts

icon-joomla missing:

Icon is smaller than before.

fixed both issues

Icon is smaller than before.

It seems that this PR fixed an error in scss and this is the result. :-)

icon-joomla missing:

The declaration of the font is overruled by the declaration of the normal font-family

icon-joomla is still missing during installation.

fix order loading font of installation template

Do you know the exact reason why the loading order is important?

I guess it's because it's CSS: If you have 2 rules with the same specificity level, the last one wins, as far as I could read.

One may correct me if I'm wrong.

Do you know the exact reason why the loading order is important?

Otherwise the Joomla icon nor the accessible icon will be shown. They come from font-awesome brand.
Changing the order seems to solve the issue... So it seems that the loading order is important.
Added the comment to notify future developers who want to change the order to nice alphabetical order. They should not.

infograf768

Do you know the exact reason why the loading order is necessary?

CSS allows to write "relative" CSS code,
means CSS code contained in other css-files.
If you write such code, you just to have make sure, this code is loaded
beforehand.

The last point, were you can declare CSS-definitions is in the
style-Attribute of an HTML-Element, AFAIK.

That's one of the reasons, that there is a loading order.
And also the reason, why many sites not showing any content until all
css-files are loaded, because the browser has to build of all
css-Definitions a "final" one.
until that, he simply don't know how the elements should look like.

Ingo Weigert

@jiweigert
I am perfectly aware of the importance of loading order for css, thank you. I have done enough rtl css for joomla core for many years to have some knowledge about this subject... ;)

I was asking the question here because fontawesome scss are quite different from usual scss as these are loading @font-face and only one more specific class.( fab for brands). Therefore I was curious to find out where this order issue took place.

@import 'variables'; is present in each variation and this is where joomla icon is defined

$fa-var-joomla: \f1aa;

Therefore, once the font is defined

.fab, .icon-joomla, .icon-accessible {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
}

it should not be concerned by some class loading font-family: 'Font Awesome 5 Free';

So, I did some research and the ordering issue in fact comes from this specific css in Atum

.fa, .fas, [class^="icon-"], [class*=" icon-"] {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

Itself coming I guess from

 [class^="#{$jicon-css-prefix}-"],
    [class*=" #{$jicon-css-prefix}-"],

[class^="icon-"], [class*=" icon-"] concerns also .icon-joomla, .icon-accessible and should not load after .fab, .icon-joomla, .icon-accessible

Therefore I have replied myself to my question. Thanks nevertheless...

I have tested this item ✅ successfully on d376b6d

I have tested this item ✅ successfully on d376b6d

RTC

Thanks! Great Work :)