2014-06-11-how-to-use-the-new-chart-icons-with-the-hue-sdk-or-in-standalone.md 2.5 KB


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:
  • Development

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!