How to use the new file types icons with the Hue SDK or in standalone

How to use the new file types icons with the Hue SDK or in standalone

Hue 3.5+ ships with two font icon sets: Font Awesome 4 (http://fontawesome.io/) and the Hue Filetypes font that includes some basic file types you might need.

The icons are available in the Hue master or in this zip file:

When you want to use the new icons in your app, you have first to import the Hue Filetypes css in your .mako template:

 

<link href="/static/ext/css/hue-filetypes.css" rel="stylesheet">

and then define you icons with the same way you would do with Font Awesome.

In our case you need to write a prefix (hfo instead of fa)

 

<i class="hfo .."></i>

and then you can specify the icon you want. To render a JSON file icon for instance you should use

 

<i class="hfo hfo-file-json"></i>

 

You can also use the modifiers from Font Awesome, so you can create a larger rotated PDF icon like this:

 

<i class="hfo hfo-file-json fa-2x fa-rotate-90"></i>

 

Which other icons would you like to see implemented? We would also be glad to contribute them back. Please let us know orcomment!