Community
Select to view content in your preferred language

Using Font Awesome with AppStudio for ArcGIS apps

2571
2
04-17-2017 11:43 AM
by Anonymous User
Not applicable
4 2 2,571
‎04-17-2017 11:43 AM

                                  

This blog post was contributed by Jinnan Zhang‌ of Esri Living Atlas Team. Download his latest AppStudio app Ecological Marine Unit (EMU) at App Store or Google Play

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...

  1. Easy to style. How would you go about changing the color of an image icon? Not very easy, right? However, with Font Awesome, you change the color of an icon just like you would change the color of a regular text element.
  2. Scalable. An icon’s size can be changed instantly and since they are scalable vectors, they look great at any size and screen resolution.
  3. Retina ready. Font Awesome renders your icons as sharp as your device allows so you do not need to worry about creating icons for high-resolution retina displays.
  4. Popular. The icons you use should be widely understood and recognized, otherwise, they will probably fail to communicate effectively. Font Awesome is probably the most popular icon font out there and it is the 11th most popular project on GitHub now...

 

How to use Font Awesome?

Here are the steps of how to use Font Awesome in your AppStudio for ArcGIS App, 

  1. Download the Font Awesome package from Font-Awesome website, unzip it and add the “fontawesome-webfont.ttf” file to the assets folder of the project.
  2. Load the “fontawesome-webfont.ttf” file to your app project. 
      FontLoader {
        id: fontAwesome
        source: app.folder.fileUrl("assets/fontawesome-webfont.ttf")
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
        
  3. Using the Font Awesome Cheatsheet page to locate the Unicode string for the icon that you want to use. In this case, we will choose a home icon (Unicode string: “f015”).  Now, we can add the home icon to the app by simply creating a QML Text element.  Note that font family needs to be set as the Font Awesome font family name and the text property is the icon Unicode string.   
            Text {
            id:homeIcon
            font.family: fontAwesome.name
            text: "\uf015"
            font.pixelSize: 35
            anchors.horizontalCenter: parent.horizontalCenter
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

  4. Now we will add a text label under the home icon to make it looks like this:

                                                                                   

            Text{
            text:qsTr("Home")
            anchors.top:homeIcon.bottom
            font.pixelSize: 15
            anchors.horizontalCenter: parent.horizontalCenter        
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

  5. 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:       

  1. readonly property string ft_home: "\uf015"

    Text {
        id:homeIcon
        font.family: fontAwesome.name
        text: ft_home
        font.pixelSize: 35
        anchors.horizontalCenter: parent.horizontalCenter
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

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!
AppStudio for ArcGIS‌

					
				
			
			
			
				
			
			
			
			
			
			
		

		
		
	

	
	


	

		
			
		
			
 
 

		
			
		
	
	


		

	

		

			

	
		
			
					
				
		
	
	


		

			

	
		
			
					
		

	
			
		


	
				
		
			
		
	
	


		

	

		

			

	
		
			
					
		
	
				
		
			
					
		
	
				
		
	
	


		

	

		

			
		

	



		

	

	

	




			
		
    
            

                

            

        

	
		

		
	

	

		
		
			
			
				
	

		2 Comments