I would like to integrate the whole Font Awesome Icon Set into my HAB. I run it on a Synlogy DS6.1
Any Ideas how i can import files into openHAB?
Couple of things to do:
- Download the Font-Awesome package and move the fontawesome-all.css into your /static (or a folder off that)
- Move the webfonts into /static (or a folder off that)
- Update the references into the .css to the webfonts folder
- Add the css as your custom css into the advanced settings of HABpanel.
It should now work.
Sure - this is what I did.
- Put fontawesome-all.css into /static/Font-Awesome
- Put the webfonts folder (and itâs contents) into /static/Font-Awesome/webfonts
- The css files has a number of url references. I changed all of mine to /static/Font-Awesome/webfonts. For example row 2701 in the css that I downloaded is now:
src: url(â/static/Font-Awesome/webfonts/fa-brands-400.eotâ);
- I then added the css as âAdditional Stylesheetâ in the HabPanel Settings http://localhost:8080/habpanel/index.html#/settings. i.e. entered this.
/static/Font-Awesome/fontawesome-all.css
- You can then access these icons in the usual way for example
<i class="fas fa-bullhorn fa-10x"></i>
I havenât fully tested this though as I just made the change but it seems to work.
I had a lot of trouble following this, but seem to have got there and can give more detailed instructions
First up:- the /static/ folder, if you donât already know, is available to all apps on the http://hostname:8080/ server. (or the secure version of that too) To access it in a file browser, it is in openhab-conf/html
.
In actual fact, once youâre in openhab-conf, the html/
folder is what will be known as /static/ on the web frontend.
I placed a folder in there called fa
I downloaded the fontawesome web package: fontawesome-free-5.15.1-web.zip
After extracting it, I went in and, in the css/
folder, copied all.css
to //openhab-conf/html/fa
Then dropped back a directory and copied the entire webfonts
directory to //openhab-conf/html/fa
I edited //openhab-conf/html/fa/all.css
and did a find and replace on it:-
Find: url("../webfonts/
Replace with: url("webfonts/
Essentially that points all the internal urls to the correct directory, otherwise you would have needed webfonts/ back one directory.
Then in HabPanel >> Settings, in Additional stylesheet (optional), I put /static/fa/all.css
This didnât help though, because I couldnât work out how to add the icon to a normal widget without having to design my own widget.
Thatâs when I worked out that if I copied the svgs
folder from the extracted archive to the //openhab-conf/html/fa
folder, I could just refer to icons as custom urls like /static/fa/svgs/regular/play-circle.svg