FortAwesome / Font-Awesome

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

CSS class plus Unicode for consistent representation. #16035

Open garretwilson opened 4 years ago

garretwilson commented 4 years ago

I'm creating a web framework that allows declarative, semantic definitions of things like icons for pages. I would like to support several icon libraries (I personally prefer Font Awesome, but I want to support others as well) in a consistent way. Thus I'd like the user to be able to define the "type" or "class" of an icon, along with the icon itself.

For Material Icons, one can use something like <i class="material-icons">home</i>. Thus the "type" or "class" would be material-icons, and the icon would be home.

I was looking for a way to specify this information in a consistent way with Font Awesome, but the documentation indicates I must use the class itself to identify the icon, e.g. fas fa-home. However I have experience with using the Font Awesome Unicode values, and with a bit of experimentation I found out I could do this:

<i class="fas">&#xf015;</i>

This works with variation such as "regular" (instead of "solid") as well:

<i class="far">&#xf015;</i>

To me this is much more semantic, indicating the type of icon in the HTML CSS class, and indicating the icon itself in the content. In addition it is consistent with the Material Icon representation <i class="material-icons">home</i>. And especially important is that it would allow my web framework to use icons in a consistent way.

My question then is whether using the representation <i class="fas">&#xf015;</i> should work just as well as <i class="fas fa-home"></i>, and if there are any drawbacks to using the former approach. I realize that some may prefer to use the latter as it is clearer in the code which icon is intended, but that's not my question. In my framework it would be best to have consistent definitions, so I just want to make sure that using the former approach should work as well as the recommended approach.

Thanks in advance for your explanation.

tagliala commented 4 years ago

Hi!

Thanks for being part of the Font Awesome Community.

I do not see any clear drawback to use the unicode approach if that fits your use case

I think you are going to use the CSS implementation, but with the JavaScript Framework you can take advantage of the ligatures with Font Awesome: https://jsfiddle.net/tagliala/puyn0ef8/4/