šŸ”¹ Fontawesome icons

thank you for your update from just now. Safari and mobile Safari confirmed @thomasloven :raised_hands: :call_me_hand:

Can some one help me out? Duotone icons are fixed now in safari. However, adding duotone icons to the ā€œtabsā€ in HA donā€™t show these icons in Safari, but they are shown in Chrome. See examples.


Thanks for helping outā€¦

I just installed this integration, however no icons are shown. Using the latest version 2.1.2. installed with HACS. Tried with builtin icons and with a custom icon.
Using home assistant 2021.5.5.
Cleared the browser cache multiple times and restarted hass several times. No errors in the logs.
Any idea what I am missing and could be the problem?

3 Likes

Nevermind, forgot to add the integration. Sorry for bothering. And thanks for the package, works great.

1 Like

Hi there!

Itā€™s working, but I have an issue. I want to use this svg:

<svg xmlns="http://www.w3.org/2000/svg" width="84.233" height="74.763" viewBox="0 0 84.233 74.763">
  <g id="Group_141" data-name="Group 141" transform="translate(-115.357 -237.199)">
    <path id="Path_806" data-name="Path 806" d="M136.6,275.24a6.558,6.558,0,0,0-5.576,3.119,7.062,7.062,0,0,0-7.013,6.842v17.347a7.08,7.08,0,0,0,7.278,6.847h.117a6.544,6.544,0,0,0,11.742-3.98V281.788A6.555,6.555,0,0,0,136.6,275.24Zm4.079,30.174a4.077,4.077,0,0,1-7.587,2.075l-.408-.689-.794.092a5.353,5.353,0,0,1-.6.034,4.614,4.614,0,0,1-4.809-4.378V285.2a4.614,4.614,0,0,1,4.809-4.377c.129,0,.254.006.38.015l.859.061.355-.785a4.077,4.077,0,0,1,7.8,1.673Z"/>
    <path id="Path_807" data-name="Path 807" d="M183.919,278.359a6.546,6.546,0,0,0-12.123,3.429v23.626a6.544,6.544,0,0,0,11.742,3.98,7.1,7.1,0,0,0,7.4-6.846V285.2A7.063,7.063,0,0,0,183.919,278.359Zm4.544,24.189a4.615,4.615,0,0,1-4.81,4.378,5.349,5.349,0,0,1-.6-.034l-.795-.092-.408.689a4.076,4.076,0,0,1-7.585-2.075V281.788a4.077,4.077,0,0,1,7.795-1.673l.354.785.86-.061c.125-.009.251-.015.379-.015a4.615,4.615,0,0,1,4.81,4.377Z"/>
    <path id="Path_808" data-name="Path 808" d="M198.976,275.495l-4.531-5.158.114-1.974,0-.071v-.071c0-8.527-3.922-16.428-11.046-22.248a43.037,43.037,0,0,0-52.086,0c-7.124,5.82-11.047,13.721-11.047,22.248v.071l0,.071.113,1.974-4.529,5.159-.614.7V294.05a3.834,3.834,0,0,0,7.667,0V279.06l4.583-5.219.548-.624.06-.826.267-3.687c1.477-4.338,5.124-8.688,10.049-11.973a34.124,34.124,0,0,1,37.884,0c4.926,3.285,8.572,7.635,10.048,11.973l.267,3.687.06.826.548.624,4.583,5.219v14.99a3.835,3.835,0,0,0,7.669,0V276.2ZM197.12,294.05a1.365,1.365,0,0,1-2.729,0V278.13l-5.2-5.919-.289-3.99c-3.148-9.852-16.024-19.7-31.431-19.7s-28.282,9.848-31.432,19.7l-.289,3.99-5.2,5.919v15.92a1.364,1.364,0,0,1-2.728,0V277.125l5.2-5.918-.172-2.986c0-16.159,15.5-28.553,34.621-28.553s34.62,12.394,34.62,28.553l-.172,2.986,5.2,5.918Z"/>
    <path id="Path_809" data-name="Path 809" d="M145.917,270.912l-4.472-11.4h-2.4v14.128h1.872l-.226-11.7q.863,2.646,2.126,5.889l2.313,5.81h1.46l2.331-5.709q1.3-3.243,2.127-5.784l-.226,11.493h1.862V259.516h-2.344Z"/>
    <path id="Path_810" data-name="Path 810" d="M164.224,260.6a5.378,5.378,0,0,0-3.586-1.082h-5.2v14.128h1.92v-5.673c.243,0,.625.006,1.148.015s.913.015,1.168.015a8.591,8.591,0,0,0,4.1-.745,4.473,4.473,0,0,0,.453-6.658Zm-3.674,5.659h-3.2V261.21h2.6a5.716,5.716,0,0,1,2.555.412,2.294,2.294,0,0,1,1.072,2.224Q163.578,266.257,160.55,266.257Z"/>
    <path id="Path_811" data-name="Path 811" d="M172.357,259.8l-6.438,8.758v1.912h6.026v3.174h1.921V270.47H175.9v-1.607h-2.038V259.8Zm-.372,7.07v1.993H167.7l2.244-3.035q1.273-1.725,2.1-3.118Q171.984,264.839,171.985,266.87Z"/>
  </g>
</svg>

but, JS file is modifying the transform

Did you try the #fullcolor suffix?

Hi - i installed using HACS and then went into the integrations section and added it there, then restart and full browser cache clearing. Referencing icon as ā€œfas:heartā€ but its showing blank.

In reading this thread is seems like there are other steps where i need to install files or run scripts? Iā€™ve read the readme in the gitHub but donā€™t see any other steps. Sorry iā€™m sure iā€™m just missing something or reading the wrong readme fileā€¦

Thanks For that Commentā€¦ Had the same Issue searched for 2 days now saw every Page regarding this topic always overread tht ā€œadd to Integrationsā€ Partā€¦ thought it was part of the Hacs install so not relevant now everyting loads
Helped a Lot not enought pll share the solution to something afterwards

1 Like

I cant get this to workā€¦

I have installed through HACS, then added the integration.
Then created a directory in my config folder name ā€œcustom_iconsā€. Here I added my new icons I want to use, see image: (as I dont know if it works with .png I tried with both .png and .svg files)

In home assistant I created a temporary card just to try if it works. But it dont.

And it wont work with icons from fontawesome eitherā€¦ :frowning:

Any ideas?

1 Like

iā€™m having the same issue. did you figure this out?

Unfortunately not! :frowning:

Hello,

I am trying to have some duotone icons in my setup. I saw the part with the more advanced icons (GitHub - thomasloven/hass-fontawesome: šŸ”¹ Use icons from fontawesome in home-assistant) and I am wondering how this is done? Are there any examples what the code looks for an entity?

1 Like

I like the Add-On very much. But I have got the same issue like TomeS1500.

I have seen the examples on the github documentation and wanted to do the same, like rotating the icons or change both colors of the fontawesome duo tones.

How did you do that? Can any show code snippets or examples?

I am also interested to know how to apply styles (particularly - rotation) for icons.
Tried these variants:

icon: fas:spinner#fa-spin
icon: fas:spinner fa-spin
icon: fas:spinner fa:spin
icon: fas:spinner:fa:spin
icon: fas:spinner:"fa:spin"
1 Like

Have got the same issue as 88fingerslukee and crazytok above, custom icons not loadingā€¦ anyone resolved it so far?

Edit: Rolling back to 2.1.3 fixed the issue.

1 Like

I also have the same issue as 88fingerslukee and crazytok above. Any hints for this or is the integration broken?

Iā€™ve found that the integration still works as long as the icon you want does not have a hyphen (-) in the name. So ā€œfas:trashā€ will work, but ā€œfas:trash-canā€ wonā€™t.

1 Like

I installed this over the weekend and have an unusual problem where the font awesome icons are not appearing in the Android app. Iā€™ve cleared the app cache and that didnā€™t help.
Same phone, icons appear fine from the Chrome mobile browser plus the Samsung Internet browser.

Anyone else have this issue or ideas of how to fix?

HA Supervised on Debian 11
Running 2022.10.5
Samsung Galaxy S20 FE
Android 12
Samsung One UI 4.1

For whatever reason, updating to 2022.11.2 has brought the icons back. Weird.

Hello. I was wondering if anyone could provide detailed instructions when installing the FontAwesome ā€œProā€ icon set in HA? What is the easiest way to get this installed?

Any help greatly appreciated!