Feature request: WebComponent custom elements

smcmurray commented 5 years ago

Describe the problem you'd like to see solved or task you'd like to see made easier

Create Web Components for font-awesome.

Is this in relation to an existing part of Font Awesome or something new?

Both

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

Have <fa-i class="..."> inside Shadow DOM work just like just like <i class="..."> works outside Shadow DOM.

Why would other Font Awesome users care about this?

Font-awesome is currently unusable for Web Component developers.

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

10

Feature request checklist

[x] This is a single feature (i.e. not a re-write of all of Font Awesome)
[x] The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
[x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

tagliala commented 5 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please follow our new feature request template?

smcmurray commented 5 years ago

@tagliala, Your link takes me to an app that doesn't seem to work in my browser, so I am trying to make this issue conform to what you seem to want.

I searched for existing issues before creating this issue.

Font-Awesome css and js cannot penetrate into Shadow DOM. So it doesn't work for elements within Shadow DOM, including web components. On the other hand, it is a perfect candidate to become a web component itself. As a web component, it could be used almost exactly how it is today, but it could also be used by other web components.

For instance, to insert an icon, you could use a <fa-i class="fab fa-fort-awesome"></fa-i>. A stack could be:

<fa-stack class="fa-2x">
  <fa-i class="fas fa-square fa-stack-2x"></fa-i>
  <fa-i class="fab fa-twitter fa-stack-1x fa-inverse"></fa-i>
</fa-stack>

Or, if you prefer, you could keep using standard html elements like so: <i is="fa-i" class="fab fa-fort-awesome"></i>

The big advantage to doing this is that font-awesome could be used in web components and generally in Shadow DOM.

I would recommend doing this 10: right away. Hopefully it could be done without too much additional coding and pick up a super cool win relatively easily.

tagliala commented 5 years ago

@smcmurray sorry, my bad.

Proper link: feature request template

Please edit the first post by using the above template and fill-in the information you provided in your second post

smcmurray commented 5 years ago

@tagliala, good enough?

tagliala commented 5 years ago

@smcmurray thanks!

dcts commented 4 years ago

same issue here. Would love to see that feature. If anyone has a workaround this please post since i think lots of people end up in this issue. Thanks!

arnaumanyosa commented 4 years ago

I was doing some research about the topic when I ended here. There are several repos about FA + WebComponents (actually old), has anybody tried any of them?

https://github.com/ruphin/gluon-font-awesome https://blog.e-kursy.it/fa-icon/ https://www.webcomponents.org/element/JeffLeFoll/slate-font-awesome

vitebo commented 4 years ago

it looks like this will be resolved in font awesome 6 https://fontawesome.com/6

AStoker commented 7 months ago

Font Awesome 6 still doesn't quite solve the shadow dom issue with web components 😢

FortAwesome / Font-Awesome