Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasloven/hass-fontawesome
🔹 Use icons from fontawesome in home-assistant
https://github.com/thomasloven/hass-fontawesome
List: hass-fontawesome
Last synced: about 16 hours ago
JSON representation
🔹 Use icons from fontawesome in home-assistant
- Host: GitHub
- URL: https://github.com/thomasloven/hass-fontawesome
- Owner: thomasloven
- License: other
- Created: 2018-11-14T22:15:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T11:21:58.000Z (6 months ago)
- Last Synced: 2024-05-19T22:01:10.085Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.44 MB
- Stars: 267
- Watchers: 7
- Forks: 50
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-home-assistant - Font Awesome Icons - Use the free icons from Font Awesome in your frontend. (Dashboards / Icon packs)
README
# hass-fontawesome
[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)
Use free icons from the [fontawesome](https://fontawesome.com) version 6.6.0 set in Home-assistant.
# Installation instructions
- Install using [HACS](https://hacs.xyz) (Or copy the contents of `custom_components/fontawesome/` to `/custom_components/fontawesome/`.)
[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=thomasloven&repository=hass-fontawesome)
- Restart Home Assistant
- Click this: [![Open your Home Assistant instance and start setting up a new integration.](https://my.home-assistant.io/badges/config_flow_start.svg)](https://my.home-assistant.io/redirect/config_flow_start/?domain=fontawesome)
- Alternatively: Go to your integrations configuration, click Add Integration and find "Fontawesome icons"
# Icon sets
The icons are divided into three sets.
- Solid
- Regular
- Brands# Usage
Find the icon you want in the [gallery](https://fontawesome.com/icons?d=gallery&m=free).
The three icon sets have different prefixes: `fas:`, `far:` and `fab:` respectively.
So,
- to get a solid heart, use `fas:heart`
- to get a heart outline, use `far:heart`
- to get the github logo, use `fab:github`![image](https://user-images.githubusercontent.com/1299821/118323896-95ef1300-b501-11eb-9ff7-5ca536e65747.png)
The icons are useable anywhere in Home Assistant - not only in lovelace.
## Using with custom icons
If you have other svg icons you want to use (including but not limited to the Fontawesome Pro set), you can do so by placing the `.svg` files in `/custom_icons/`. You will need to create this directory yourself.
You can then use those icons with the `fapro:` prefix. E.g. `fapro:lamp` will get the icon in the file `/custom_icons/lamp.svg`.
### Duotone icons
If you have duotone icons, they should contain path elements with the `id`s `fa-primary` and `fa-secondary` or `primary` and `secondary`.
You can adjust how the icons look a bit by using the suffixes `#invert`, `#color` or `#color-invert`
![image](https://user-images.githubusercontent.com/1299821/118324014-bf0fa380-b501-11eb-890b-126951d67cef.png)### More advanced icons
You can also use more advanced icons, e.g. with multiple colors if you add the suffix `#fullcolor`.
![ISmIwO2TJN](https://user-images.githubusercontent.com/1299821/118335863-d4d89500-b510-11eb-8d01-2ccf5bbbbba5.gif)You can find some nice ones over at [flaticons.com](https://www.flaticon.com/).
> Note: SVG files can also contain embedded CSS inside `` tags... <br>
> This gives you some [interesting](https://user-images.githubusercontent.com/1299821/118336065-41539400-b511-11eb-810b-e99f6c089eed.gif)... [posibilities](https://user-images.githubusercontent.com/1299821/118336069-4284c100-b511-11eb-8b62-4d2a860a1b3c.gif)...
>
> Hass-fontawesome will not allow any icons containing embedded javascript, though.---
**IMPORTANT:** As the note above implies, SVG can contain CSS and Javascript, and thus shall be considered unsafe. Home Assistant normally protects you from this by only using a very specific part of the SVG file, but using the `#fullcolor` suffix circumvents this protection. I have tried adding another layer instead, but as those things go, you're only safe from the things you _know_.
In short: Only do this with icons you trust (and preferably have inspected the code for).
---
# FAQ
### Can I set this up in configure.yaml instead?
Yes.
```
fontawesome:
```That's it.
---
<a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>