search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.69k stars 12.19k forks source link

Font Awesome 5 - Angular - Shadow DOM icon sizing #16284

Open bjornharvold opened 4 years ago

bjornharvold commented 4 years ago

Hi,

My goal is to create a bunch of Web Components with Shadow DOM enabled so they can be easily embedded into other sites. I have been having a lot of issues with getting font-awesome to work.

Here is an attempt by someone else at solving this issue: https://github.com/e-kursy-it/blog/tree/master/fa-icon

I haven't created Web Components yet. I am starting with Shadow DOM. The moment I set encapsulation to ShadowDom in my Angular component, sizing is lost and will scale to the width of whatever container it is in. Not sure if it relates to: https://github.com/FortAwesome/Font-Awesome/issues/15449

Please advise. Angular Material icons work within Web Components when using something like mat-icon-button. However, font-awesome icons are just A LOT better!

Guessing my request is to make fa-icon work with the Web Component standard.

Stackblitz: https://stackblitz.com/edit/angular-qec7bz

tagliala commented 4 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Sorry, can't help.

Leaving this open for feedback from the community

bjornharvold commented 4 years ago

Thanks. I am also a pro subscriber. Should I be asking for support differently?

tagliala commented 4 years ago

@bjornharvold you can also post in the font awesome pro repository, but please keep this post open because this is a public repo

hichem-code-it commented 3 years ago

@bjornharvold Could you figure out a solution ? I'm facing the same issue.

bjornharvold commented 3 years ago

@hichem-code-it No solution. Font Awesome does not yet like to live within Shadow DOM and Web Components.

hichem-code-it commented 3 years ago

Thks for you answer, so the only possible solution I found yet, is to import the font awesome style sheet, directly in the component. It will duplicate it for each component though.

miniplus commented 3 years ago

Reference: https://fontawesome.com/how-to-use/javascript-api/setup/configuration

@fortawesome/fontawesome-svg-core has a config object. You can disable the autoAddCss feature through this in the following way:

import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

The CSS is now no longer automatically injected into the head tag. You can now include the styling in your component's css, causing it to get scoped in the shadowDOM:

@import "@fortawesome/fontawesome-svg-core/styles.css";.

Do note the autoAddCss feature needs to be enabled for other props to be taken into account such as replacementClass as it internally uses a function called css() which is no longer being called now because we just import the css directly. https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/@fortawesome/fontawesome-svg-core/index.js#L2092

Exporting the css function would actually be a good thing for such a case I believe? @tagliala

ChristofFritz commented 2 years ago

Thank you so much @miniplus that's the perfect solution for this problem

fregante commented 2 years ago

The library should not reference the document global when attaching the styles but instead it should use the root element’s ownerDocument property. This fixes all sorts of situations where globalThis.document !== icon.ownerDocument:

There's also a unsolved 2014 issue requesting this and a couple more:

ChristofFritz commented 2 years ago

Absolutely 100% what @fregante said. That would be the perfect solution.