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

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

Hue 3.6+ ships with three font icon sets: Font Awesome 4 (http://fontawesome.io/), the Hue Filetypes font and the Hue Chart font that includes some basic charts 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 Charts css in your .mako template:

 

<link href="/static/ext/css/hue-charts.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="hcha .."></i>

and then you can specify the icon you want. To render an area chart icon for instance you should use

 

<i class="hcha hcha-area-chart"></i>

 

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

 

<i class="hcha hcha-area-chart 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 or comment!

 


comments powered by Disqus

More recent stories

03 May 2023
Discover the power of Apache Ozone using the Hue File Browser
Read More
23 January 2023
Hue 4.11 and its new dialects and features are out!
Read More