As we all know, home-assistant is very extensible.
So here’s an extension to allow you to use icons from fontawesome if you feel the default materialdesign ones are not enough.
22 Likes
Good shit!
1 Like
Yes. They should work everywhere.
Awesome - finally a reason for all the (annoying) mdi: prefixes!
RE: Lovelace - the icons get clipped at the right hand side - e.g. on the Glances Card
(Bedroom is fas:hotel, rest are mdi:)
Oddly the fab:strava is weirdly offset, when the other icon’s get truncated?
Also, after adding an icon in - they appear blank on the first refresh, before displaying on the second refresh.
Thanks for letting me know about the problems. I think I know why it happens (in short because I was lazy) and how to fix it, but I won’t be able to for a few days…
Re: the mdi: prefix, there´s also a few hass: icons; hass:calendar, hass:settings, hass:home-assistant, hass:poll-box, hass:format-list-bulleted-type, hass:mailbox, hass:account-location and hass:cart, I think…
1 Like
The scaling problem should be fixed now.
Please redownload the html files from github. And make sure to clear your browser cache to get the new icons.
@thomasloven Thanks for this feature I really enjoy the added variety!
A problem I’m having is from Chrome on my Android 8.0 how when I go back to the app after the phone screen times out and turns off. The browser refreshes/reconnects, i’m not really sure which, and the Fontawesome icons don’t render. I have to force a refresh a few times to get them back.
Is there a way to force better caching/cache busting? I know Chrome desktop is cache heavy but I know little about it on android.
Thanks
Totally awesome. Will this also work with the paid icons?
If you create the files yourself.
This is great.
Is there a way to update the HTML files from your GitHub page so they contain more of the icons on the webpage?
It’s done.
There’s so many icons to choose from, can be daunting to find good ones, so I thought I’d ask other what icons from font awesome you use!
In the GitHub you say:
Only add the files you want. They are rather large, and adds to the download size and loading time of your frontend
Would I be right in thinking that if performance is a problem we can edit the files to only include the icons we want?
Sure. Just remove everything you don’t want.
But leave the first and last lines.
Hello,
I’m trying to load these icons in HA 0.92.1, but no succes. I have done everything that your manual tells me. without succes. Is there some step i’m missing here?
this is part of my customize.yaml file:
light.serre:
assumed_state: false
icon: ‘fas:lightbulb’
removing the quotes also did not do the trick. do I need to add spaces or something?
thanx. 
hilko
Did you refresh the page with ctrl+f5? might be a cache issue.
No, didn’t do the trick. and also just broke my config… thanks for backups!!
Some icons seem to have a wrong offset and are not centered. Am I the only one seeing this? I’ve created the html files myself since I have the pro font awesome icons.
I’ve created a bug (with screenshots) here: https://github.com/thomasloven/hass-fontawesome/issues/6
Awesome! 
But how do I go about using the PRO version of FontAwesome with HA? Thanks!