Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font stylesheet is missing parts in copied version #59

Open
benni3005 opened this issue Aug 20, 2024 · 4 comments
Open

Font stylesheet is missing parts in copied version #59

benni3005 opened this issue Aug 20, 2024 · 4 comments

Comments

@benni3005
Copy link

Hi there,

we have a local stylesheet from Icomoon, whcih looks like this:

@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?sfzcx2");
  src:
    url("fonts/icomoon.eot?sfzcx2#iefix") format("embedded-opentype"),
    url("fonts/icomoon.woff2?sfzcx2") format("woff2"),
    url("fonts/icomoon.ttf?sfzcx2") format("truetype"),
    url("fonts/icomoon.woff?sfzcx2") format("woff"),
    url("fonts/icomoon.svg?sfzcx2#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-foobar:before {
  content: "\e900";
}

But after the file gets copied over to /public/typo3temp/tx_bwicons/[...] it looks like this:

@font-face {
  font-family: "icomoon";
  src: url("icomoon.eot?sfzcx2");
  src:
    url("icomoon.eot?sfzcx2#iefix") format("embedded-opentype"),
    url("icomoon.woff2?sfzcx2") format("woff2"),
    url("icomoon.ttf?sfzcx2") format("truetype"),
    url("icomoon.woff?sfzcx2") format("woff"),
    url("icomoon.svg?sfzcx2#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-foobar:before {
  content: "\e900";
}

So basically the selector [class^="icon-"], [class*=" icon-"] with all its contents is missing and therefore the icons don't get rendered correctly in the Typo3 backend showing only squares, since the font never was requested by the browser.

Greetings,
Benni

@maikschneider
Copy link
Owner

Okay, that's strange. Normally the whole rule should be added to the created stylesheet since it contains the font-family rule. Could you maybe send me your icomoon folder including stylesheet and font files?

@benni3005
Copy link
Author

Since it's a project with paid icons from a customer, I think I can't just send it to you. But I created a second font with the same settings. Since we also use Prettier in the project the stylesheet gets changed a little bit and I simulated this in the zip file. Hope this helps!

icomoon-issue-59.zip

@mschmitz89
Copy link

Any news to this? I have the same problem with icomoon fonts (default icomoon styles without Prettier).
Latest EXT version on TYPO3 12.
Thanks in advance! :-)

@mschmitz89
Copy link

PS: Here is a sample font for testing this bug.
icomoon-test.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants