At Logi, we use a number of design techniques when building applications internally. We thought it was time for us to share some of these with our users. I hope that the techniques and tools shown here will help you more rapidly develop Logi Applications, with better design, and more functionality. We’re going to start with how to easily incorporate scalable, CSS addressable, commercial-free graphics into your application with Font Awesome.
One of the major problems faced in the development of applications is having graphical indications for key menu items, indicators, and buttons. If you don’t have access to an existing set of icons, you might worry about having to hire an expensive graphic designer or purchasing access. If your needs are truly unique, this might be true. Otherwise, you’re in luck! You can use Font Awesome.
First off – what is Font Awesome? Font Awesome is a CSS/font icon set that allows you to easily incorporate scalable vector icons into your web applications, which can be customized with traditional CSS. This is great for anyone building a responsive application. It offers 519 icons, including popular websites (e.g. Twitter), is framework agnostic, completely free for commercial use, and uses vector graphics, so you don’t have to worry about the icons becoming distorted when scaled up or down.
Why should you care? This will let you easily get icons for menus, indicators, and brands without dishing out a single cent! You can also use your existing CSS to make sure that they fit perfectly with the rest of your application or website’s styles. I use Font Awesome in all of my designs, even if it’s as simple as using a gear to indicate options or the refresh icon to indicate getting new data.
To get started with Font Awesome, download the zip file. Contained in the zip file is a folder labeled ‘font-awesome.’ Copy this folder into your Logi Application’s ‘_SupportFiles’ folder.
In my case, I’ve created a new application for blog posts, so I copy it to blogpostscolin_SupportFiles.
Next, go into Logi Studio and find the report definition file that you want to add font-awesome icons to. Note – you can add them to every definition by putting them into a shared definition.
Right click on the development area, then mouse over ‘General Elements’ and select ‘Style.’ You can also click ‘Style’ in the elements tray on the (default) right side of Studio. This will add a blank Style.
Set the ‘ID’ to “font-awesome.min.css” and the Style Sheet to “_SupportFiles/font-awesome-4.3.0/css/font-awesome.min.css”. Note – If you use a different version of font-awesome than 4.3.0, make sure you substitute the correct version number.
To start adding icons, you’ll need to add a ‘Label’ under ‘Body’. This is where you’ll be able to use the icons that font-awesome provides. You can pick whichever icon you’d like – I’ll be using the ‘bar chart’ icon in this example.
Under ‘Body’, I add a label by clicking ‘General Elements’ then ‘Label,’ and give it a class of “fa fa-bar-chart”. Note – to find out the specific class of your icon, you can check the Font Awesome website. Make sure that you use ‘fa’ first (e.g. just listing “fa-bar-chart” instead of “fa fa-bar-chart”) or it won’t work.
You’ll note I have a second stylesheet below Font Awesome, but I’ll get back to that in a second.
Now that we have Font Awesome in support files, our CSS set up, and a label with the proper class, we can open up the application in the browser or the preview pane to see what it looks like!
Here’s what you -should- see:
We now have an icon, simply by selecting the right class on a label! Hopefully the uses of this immediately come to mind, but there’s a lot more we can do with this other than simply display it in its default, black, 12 pt glory.
In my next blog post I’ll show you how you can apply CSS to Font Awesome, using it to resize, re-color, and generally treat any Font Awesome icon like you would normal text in CSS.