The core of user experience (UX) and user interface (UI) design is all about communication. Using icons is a very effective way to communicate with users. Icons can help users absorb and process the meaning or purpose of a design element almost instantly and can transcend language barriers. Icons can also serve as paragraph breaks that visually separate content to make it more interesting and readable. Icons save valuable screen space, and when it comes to the mobile apps, this is essential.
Traditionally, icons were graphics that needed to be designed, cropped, optimized, styled and loaded by the user. Font libraries are a modern method of incorporating icons into your app. They are just fonts that contain symbols and glyphs instead of letters and numbers, this means you can style them in the same way you style regular text. This made them increasingly popular with developers and designers.
This post shows you how to incorporate font based icons into your AppStudio for ArcGIS project using Font Awesome -- one of the most popular icon font libraries.
Why use Font Awesome?
In case you are not familiar with Font Awesome - it is a large icon set designed for Bootstrap; it provides you scalable vector icons (for free) that can instantly be customized - size, color, drop shadow, etc.
Font Awesome is powerful because the icons it provides are...
How to use Font Awesome?
Here are the steps of how to use Font Awesome in your AppStudio for ArcGIS App,
Now we will add a text label under the home icon to make it looks like this:
If you plan to use an icon multiple times, you might consider using a user-friendly name instead of the Unicode string. To do this, assign the Unicode string to a read-only property in your app then use it for the Text Element’s text property:
readonly property string ft_home: "\uf015"
And we are done! It is that simple to add custom icons into your app that scales and looks exactly the way you want to design your app.
To help you get started, here is a sample AppStudio app available on GitHub that uses Font Awesome icons in many different ways (Eg. buttons, links, icons). Check out the source and add it to your own AppStudio app.
Now it is your turn to create awesome AppStudio apps using Font Awesome Icons!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.