I don't understand

The problem is that the current version of Font Awesome does not load the class = "far fa-star"

Why do you need far fa-star (and load another webfont!) if fas fa-star is working fine? You could use grey color instead of outlined yellow.

Or maybe this could be a place where we use SVG images instead of fontawesome or png.

Why do you need far fa-star if fas fa-star is working fine?

The class="fas fa-star" gives a solid star: See link...

And the class="far fa-star" gives an open (regular) star: See link...

Or maybe this could be a place where we use SVG images instead of fontawesome or png.

In fact, you can use any image. But I think Font Awesome is very beautiful. All in the style of Joomla 4.

As far as I know far fa-star is already available in J4.

As far as I know far fa-star is already available in J4.

I expected that too. Maybe I don't see it right.

There can be found no classes with the name: class="far fa-xxxx" in the code. Eg class="far fa-star".
The class="fab fa-joomla" occurs once in J4.
All the others are classes with the name: class="fas fa-xxxx". Eg class="fas fa-star".

The link below is loaded standard in Cassiopeia.

<link href="/joomla400/joomla/media/vendor/fontawesome-free/css/fontawesome.min.css?5.13.0" rel="stylesheet" />

Maybe I don't see it right.

Indeed. ?

it is used next to icon-unfeatured in the layout. Once you take off icon-unfeatured you will see the empty star. In admin.
Normally, Cassiopea should load the same fontawsome

far (= an additional webfont) is not loaded in frontend template. And I think for a good reason.

Loading it just for a single star? I think that would be the wrong way.

In fact, you can use any image. But I think Font Awesome is very beautiful. All in the style of Joomla 4.

Maybe beautiful but Font Awesome is a big monster ;-) We are loading CSS and webfonts on any page even if we only use a handful of icons on the whole site.

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4 but I think it would be a good thing to use one of these svg images directly here or better: to create custom svg images instead of loading an additional webfont. I'm not talking about png images!!!!

Would be a first step to make the core independent of fontawesome step-by-step.

far (= an additional webfont) is not loaded in frontend template. And I think for a good reason.

Indeed, the code below loads the star icons only from the administrator. But this is not desirable.

$loadCss = 'administrator/templates/atum/css/vendor/fontawesome-free/fontawesome.min.css';

if (file_exists(JPATH_ROOT . '/' . $loadCss))
{
	HTMLHelper::_('stylesheet', $loadCss, array('version' => 'auto'));
}

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4 but I think it would be a good thing to use one of these svg images directly here or better: to create custom svg images instead of loading an additional webfont.

The question is whether a new issue should be opened for this discussion.

The question remains, how do I get now three nice star images for displaying the rating.

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4...

In the meantime, it turns out for me that it is very easy to add the color code (# FFA500) to the stars concerning the .svg images (from the special added folder/fontawesome-free/svgs).

And the images are easy to load with, for example, the following code:

HTMLHelper::_('image', 'system/star-solid.svg', Text::_('PLG_VOTE_STAR_ACTIVE'), array('width' => "20px"), true);

@ReLater anyway, I think it would be a good idea to add the folder /fontawesome-free/svgs/ to the Joomla core by default. If this is allowed in connection with possible licenses / copyrights.

Why do you need far fa-star (and load another webfont!) if fas fa-star is working fine? You could use grey color instead of outlined yellow.

@ReLater This option proposed by you is easy to realize.

The question is whether this solution as it looks is acceptable for a PR?

Code grey stars:

$img .= '<span style="color: grey" class="fas fa-star" aria-hidden="true"></span>';

I think these are better.

Code:

$img .= '<span style="color: #d3d3d3" class="fas fa-star" aria-hidden="true"></span>';

Another alternative: widely used on the internet

Code change:

if (($stars - floor($stars)) >= 0.5)
{
	$img .= '<span style="color: #d3d3d3" class="fas fa-star fa-sm" aria-hidden="true"></span>';
	$img .= '<span style="color: #ffa500; margin-left: -14px" class="fas fa-star-half fa-sm" aria-hidden="true"></span>';
	$stars += 1;
}

As far as I know far fa-star is already available in J4.

It is possible to load far fa-star in the backend but NOT in the frontend.

@N6REJ - @hans2103 Do either of you know why? Solution?

@sandewt far is Font Awesome Regular.
Is the Font Awesome Regular font loaded in the frontend?

Is the Font Awesome Regular font loaded in the frontend?

No, I see that the @import "../../../media/vendor/fontawesome-free/scss/regular"; statement is NOT present in the frontend template.scss file.

Reason ? New PR ?

@sandewt using the blame option of any file you can find out the reason of changes.
https://github.com/joomla/joomla-cms/blame/4.0-dev/templates/cassiopeia/scss/template.scss

I don't know what the reason might be that regular has not been added to template.scss or what the reason was to remove it. But.... be my guest and feel free to create a new PR where you explain the issue and how this can be solved.

Mind that if far fa-star is the only reason to add fontawesome-free/regular I would not advice to create a PR to add this dependency but to find out if it's okay to use fas fa-star instead.

Mind that if far fa-star is the only reason to add fontawesome-free/regular...

Rightly noted. That's why I have doubts too.

I imagine there are 3.9.x sites that already use Font Awesome -free / regular. They then have a (little) problem with Joomla 4.
Moreover, Font Awesome offers this possibility, why not use it?
Of course, the loading time of the site should not be adversely affected.

@wilsonge

Mind that if far fa-star is the only reason to add fontawesome-free/regular...

Rightly noted. That's why I have doubts too.

I imagine there are 3.9.x sites that already use Font Awesome -free / regular. They then have a (little) problem with Joomla 4.
Moreover, Font Awesome offers this possibility, why not use it?
Of course, the loading time of the site should not be adversely affected.

@wilsonge

@sandewt just create a PR. The changes are bigger others will see these comments too.

That will result in 151 extra icons.

https://fontawesome.com/icons?d=gallery&s=regular&m=free

imho @ReLater is right
#30193 (comment)

Use a class with specific full svg for the stars as done for joomla-alert:

See

Use a class with specific full svg for the stars as done for joomla-alert:

How did you generate the code below? Color?

background-image: url('data:image/svg+xml;utf8,<svg width="1792" height...

Use a class with specific full svg for the stars as done for joomla-alert:

@infograf768
Do you prefer .svg instead of fas fa-star, fas star-half for the vote pluging anyway?

@sandewt far is Font Awesome Regular.
Is the Font Awesome Regular font loaded in the frontend?

no, and legally we're not entitled to far. It's not supposed to be "free" but for w/e reason is being included in the npm release(s)

How did you generate the code below? Color?

Get the svg from fontawesome and edit it in a text editor, then modify code in the css to fit
Example:
star-half-alt-solid.svg.zip

gives
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star-half-alt" class="svg-inline--fa fa-star-half-alt fa-w-17" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536 512"><path fill="currentColor" d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"></path></svg>

Just adapt it on the model of joomla-alert css.
We have anyway to credit fontawesome.

You also can get them from
https://iconify.design/icon-sets/fa/

Also, you can create an images folder for the plugin in order to use a pure svg as done for #31028
It would have to be created in build/media_source/plg_content_vote/images/star.svg etc.
and then modify code and css.

That will result in 151 extra icons.
https://fontawesome.com/icons?d=gallery&s=regular&m=free

no, and legally we're not entitled to far.

@N6REJ Conflicting !?

It's not supposed to be "free" but for w/e reason is being included in the npm release(s)

What means w/e ?

We have anyway to credit fontawesome.

You mean a reference to Icons — CC BY 4.0 License ?
See also: https://fontawesome.com/license/free

You also can get them from
https://iconify.design/icon-sets/fa/

License: Open Font License
Is this license compatible with the Joomla GNU license? Perhaps therefore not advisable.

OFL is supported by the Free Software Foundation

https://en.wikipedia.org/wiki/SIL_Open_Font_License

You can see here that some Google fonts are released as SIL Open Font License
https://fonts.google.com/attribution

As far as I know we can use OSL in Joomla without any issue.

if your going to use fontawesome the either use the ones included in core ( yes there are svg versions in core ) OR use fa 5 not fa 4 icons please.

The fa 5 ones are here and LIcense is CC
https://iconify.design/icon-sets/fa-solid/

The fa 5 ones are here and LIcense is CC

Get the svg from fontawesome and edit it in a text editor, then modify code in the css to fit
Example:
star-half-alt-solid.svg.zip

This is the same license as Font Awesome (fontawesome-free-5.15.1-web.zip)

LICENSE.txt:
.......
Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
packaged as SVG and JS file types.

As far as I know far fa-star is already available in J4.

yes and no. No it's not loaded by default and No we're not legally entitled to it, yes the iconery is there.

if your going to use fontawesome the either use the ones included in core ( yes there are svg versions in core ) OR use fa 5 not fa 4 icons please.

So if I understand correctly, star.svg (solid) and star-half (solid) code can be legally used from the core. Is this correct? E.g.

.content_rating .star {
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="orange" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>');
	background-size: 110%;
}

yep, thats 100% correct. I know we're going to be changing to svgs in the near future J! 4.1?? I think we're going to sprites but I'll worry about that when we get to that point.
I like your pr so to help you on your way I created a svg pr for you :D #31079
This way you can simply call /media/vendor/fontawesome-free/svgs/solid/star.svg and you'll have it.
PLEASE don't use FAR set YET. I've got a query into FA asking them about their intent with including far

@sandewt ping me on fb if you need faster answers... I don't always hear git go off right away.

@sandewt you have legal permission to use the FAR fa-star ( just use the svg regular ). I'll be passing the info on to marketing.

This way you can simply call /media/vendor/fontawesome-free/svgs/solid/star.svg and you'll have it.

This way works:

$link  = 'media/vendor/fontawesome-free/svgs/';
.......
$img .= HTMLHelper::_('image', $link . 'solid/star-half-alt.svg', Text::_('PLG_VOTE_STAR_ACTIVE'), array('class' => 'vote-star'));

@N6REJ Was that also your intention?

yep, thats 100% correct. I know we're going to be changing to svgs in the near future J! 4.1?? I think we're going to sprites but I'll worry about that when we get to that point.

For the color of the svg, you could use a filter, see #31079 (comment)

@sandewt yep, exactly what I was thinking.

@sandewt yep, exactly what I was thinking.

I have done a test locally that is completely in line with your PR #31079.
It works and it gives a better visual result than with a backend image: url (..)
I can make a PR for J4.0 (?) or J4.1 (?).

@sandewt hopefully this #31096 will help you move forward with your pr.. idky svg is being such a hassle.

@sandewt hopefully this #31096 will help you move forward with your pr.. idky svg is being such a hassle.

Thanks.
To avoid misunderstandings. This issue does not depend on regular (far). Orange and gray stars are also ok. What matters is which style best matches the style of Joomla. Extending with far is of course quite useful.

[EDIT] Error with text

As we have pull request #31098 now: Can we close this issue?

As we have pull request #31098 now: Can we close this issue?

Yes.

Thanks all.