Create, deploy, and maintain analytic applications that engage users and drive revenue. See a Logi demo

Development Tips

Logi Design Hacks: Incorporating Font Awesome – Part Two

By Colin Popell | July 30, 2015
Share on LinkedIn Tweet about this on Twitter Share on Facebook

In my last blog post, I showed how you could integrate Font Awesome in your Logi Application. I left off with the note that you could apply CSS to Font Awesome like you could to any text in CSS. In this post, I’ll show you exactly how you can do that.

Returning to the application I made for the last post, you’ll note that I made a ‘blogpost’ stylesheet. I created this by right-clicking ‘Support Files’ in the left hand pane, clicking ‘Add,’ ‘New File’ then ‘Stylesheet.’ The blank stylesheet should only have four lines in it:

font awesome - 1

Below this, I added a class called ‘symboltext-Big’ that will scale the font-size to x-large (although this will be rendered differently across devices and browsers).

font awesome - 2

When I go back to my report definition, I add another style under font-awesome.min.css, and call it ‘blogpost.css.’ Instead of pointing to a file location in _SupportFiles, I can select ‘blogpost.css’ from the list of stylesheets.

Note – I added a ‘New Line’ (General Elements) after the first label, so we can easily differentiate our icons. Now, I can add another label and give it the class “fa fa-bar-chart symboltext-Big”.

font awesome - 3

When we render this in the preview pane, this is what you should see.

font awesome - 4

So we very easily took a CSS class and applied it to an icon. Now, I’m not going to exhaust you with examples. CSS is its own topic and there are thousands of tutorials dedicated to it on the internet. I will leave you with one more, however.

If we go back to blogpost.css and add another class, we can see how you can selectively choose different styling classes on Font Awesome icons.

Let’s add a class to turn the color of the font red, since I often like having a separate class for that for emphasis in my applications.

font awesome - 5

Now, if we apply “symboltext-Red” to the same label we had before (giving us a label class attribute of “fa fa-bar-chart symboltext-Big symboltext-Red”) it will show up in the Preview pane with the larger bar-chart colored red.

font awesome - 6

This works for any way you would usually apply CSS styles to fonts. There’s further documentation available on the Font Awesome website, including how you might make the fonts larger using just Font Awesome’s built in sizing scheme, and built in animations as well!

Other Functionality
Like other labels in Logi Info, Font Awesome labels can support Bookmarks, Links, Exports, and Extensions or Shared Elements. I’m going to add one more Label, and give it a class of “fa fa-google symboltext-Big”. Then, I’m going to go to the Links section of the elements list and give it an ‘Action.Link’, which I’ll name ‘linkGoogle’, a child Target Link with an ID of ‘linkGoogleTarget’ and a URL of http://google.com.

font aesome -7

When we open up our preview pane, we will have a Google icon added below the two bar chart icons, and it is linked to http://google.com.

font awesome -8

In summary, the functionality offered by Font Awesome means that you can use icons that are addressable by CSS, rather than making numerous custom icons, or plain bland text. Spice up and clean up your menus and dynamic controls of your application, and try replacing some of your images with icons!

 

About the Author

Colin Popell is a sales engineer at Logi Analytics.

Subscribe to the latest articles, videos, and webinars from Logi.