No Code Attached Yet Information Required bug
avatar peter1szalatnay
peter1szalatnay
13 Nov 2024

Steps to reproduce the issue

Don't know if this is a bug or how it should work. But the fontawesome.css in the vendor folder has no font-face for the font files loaded.

Guess because brands.scss, regular.scss and solid.scss is not compiled into it.

Is this vendor library only supposed to be compiled into your own library or be able to used as standalone?

Expected result

Font awesome icons are loaded when using the CSS.

Actual result

The font files are not loaded.

System information (as much as possible)

Joomla 5.2.1

Additional comments

avatar peter1szalatnay peter1szalatnay - open - 13 Nov 2024
avatar joomla-cms-bot joomla-cms-bot - change - 13 Nov 2024
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 13 Nov 2024
avatar peter1szalatnay peter1szalatnay - change - 15 Nov 2024
The description was changed
avatar peter1szalatnay peter1szalatnay - edited - 15 Nov 2024
avatar hans2103
hans2103 - comment - 19 Nov 2024

According to templates/cassiopeia/joomla.asset.json the file system/joomla-fontawesome.min.css is loaded

https://github.com/joomla/joomla-cms/blob/816cd8013012aa5faf21c53636a0a14f17caa64b/templates/cassiopeia/joomla.asset.json#L104C1-L108C6

The compiled file can be found in /media/system/css/joomla-fontawesome.min.css

in this file I can find a reference to the font-face... at least on my machine.

:root, :host {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2?v=2d89b4) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf?v=370dd5) format("truetype")
}

.far, .fa-regular {
    font-weight: 400
}

:root, :host {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2?v=237f4a) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf?v=adec7d) format("truetype")
}

.fas, [class^=icon-], [class*=\ icon-], .fa-solid {
    font-weight: 900
}

:root, :host {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2?v=715d59) format("woff2"), url(../../../media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf?v=56c8d8) format("truetype")
}

this is what I see on my machine.

avatar Quy Quy - change - 19 Nov 2024
Labels Added: Information Required
avatar Quy Quy - labeled - 19 Nov 2024
avatar peter1szalatnay
peter1szalatnay - comment - 22 Nov 2024

In my component I'm building I want to use the vanilla fontawsome.css from the media/vendor folder. And right now it cannot be used as there is no font files loaded in it.

That is why I am questioning if it is meant to be used as standalone or should be compiled from the scss files.

avatar hans2103
hans2103 - comment - 22 Nov 2024

After installation of Joomla the fonts (ttf, woff2) can be found in media/vendor/font-awesome-free/webfonts.
If they are not present in yours, then there might be an issue with your installation

avatar Fedik
Fedik - comment - 22 Nov 2024

Yeah, that a bug. default fontawesome.css does not include woff2.
There was a fix for j4 #31364 , but for j5 it probably need a litle more work.

Joomla have to provide fontawesome/all.css (which include woff files) instead of fontawesome/fontawesome.css

avatar Fedik Fedik - change - 22 Nov 2024
Labels Added: bug
avatar Fedik Fedik - labeled - 22 Nov 2024
avatar Fedik
Fedik - comment - 22 Nov 2024

Note: you can use

{
"name": "fontawesome",
"type": "style",
"uri": "system/joomla-fontawesome.min.css"
}

In your template, the same as joomla cassiopeia do, which also includes some classes for core icon-.

avatar pAnd0rASBG
pAnd0rASBG - comment - 23 Nov 2024

I think, the proper way here would be to build what you need based on the supplied scss files:
https://docs.fontawesome.com/web/use-with/scss

Add a Comment

Login with GitHub to post a comment