--- title: How to use the new chart icons with the Hue SDK or in standalone author: admin type: post date: 2014-06-11T23:29:35+00:00 url: /how-to-use-the-new-chart-icons-with-the-hue-sdk-or-in-standalone/ sf_thumbnail_type: - none sf_thumbnail_link_type: - link_to_post sf_detail_type: - none sf_page_title: - 1 sf_page_title_style: - standard sf_no_breadcrumbs: - 1 sf_page_title_bg: - none sf_page_title_text_style: - light sf_background_image_size: - cover sf_social_sharing: - 1 sf_sidebar_config: - left-sidebar sf_left_sidebar: - Sidebar-2 sf_right_sidebar: - Sidebar-1 sf_caption_position: - caption-right slide_template: - default categories: - Dev / API ---

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][1] or in this [zip file][2]: 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][2]. Please let us [know][3] or [comment][4]!   [1]: https://github.com/cloudera/hue [2]: https://cdn.gethue.com/downloads/HueCharts.zip [3]: http://groups.google.com/a/cloudera.org/group/hue-user [4]: https://twitter.com/gethue