Integrate Font Awesome Icons into HABpanel

Apps & Services HABPanel
, ,
#1

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?

Font Awesome

1 Like
#2

Couple of things to do:

  1. Download the Font-Awesome package and move the fontawesome-all.css into your /static (or a folder off that)
  2. Move the webfonts into /static (or a folder off that)
  3. Update the references into the .css to the webfonts folder
  4. Add the css as your custom css into the advanced settings of HABpanel.

It should now work.

#3

Hi @Hammar,
Could you details steps 3 an 4 please?

Thanks

#4

Sure - this is what I did.

  1. Put fontawesome-all.css into /static/Font-Awesome
  2. Put the webfonts folder (and it’s contents) into /static/Font-Awesome/webfonts
  3. 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");

  1. 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

  1. 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.

1 Like
#5

I had a lot of trouble following this, but seem to have got there and can give more detailed instructions :slight_smile:

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