Integrate Font Awesome Icons into HABpanel

icons
habpanel
iconset
Tags: #<Tag:0x00007f8761caf680> #<Tag:0x00007f8761caf4c8> #<Tag:0x00007f8761caf1f8>
(Manuel Born) #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

(Hammar) #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.

(Vincent Regaud) #3

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

Thanks

(Hammar) #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.