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

Published on 19 February 2014 in Development - 1 minute read - Last modified on 19 April 2021

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!

 


comments powered by Disqus

More recent stories

26 June 2024
Integrating Trino Editor in Hue: Supporting Data Mesh and SQL Federation
Read More
03 May 2023
Discover the power of Apache Ozone using the Hue File Browser
Read More