{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":34704,"path":"mobile/config-font-type-icons.md","title":"Configure font type icons","bundle":null,"doc_type":null,"release":"australia","body":"\n# Configure font type icons\n\nConfigure font type icons that can be used in a variety of places in mobile apps. For example, you can use font type icons in screens, cards, functions for quick actions, and navigation bars and tabs.\n\n## Before you begin\n\nRole required: admin\n\n## About this task\n\nYou can configure an icon within the work flow of configuring a screen or you can configure an icon by selecting the **Cards &amp; icons** category from the Mobile App Builder menu. This procedure uses the **Cards &amp; icons** category.\n\n## Procedure\n\n1.  Navigate to **All** &gt; **System Mobile** &gt; **Mobile App Builder**.\n\n    The Mobile App Builder opens in a new browser tab and displays the application scope selection screen.\n\n2.  Search for the application scope you are working in and then select the name of the application scope.\n\n    The Mobile App Builder categories home screen displays.\n\n3.  Select the **Cards &amp; icons** category, and then select **New**.\n\n4.  In the Create a card or icon dialog box, select **Icon**, and then select **Continue**.\n\n5.  In the Icon form, enter a **Name** for the icon.\n\n    Make sure you choose a name that makes it easy to identify the icon.\n\n6.  From the Type drop-down list, select **Font**.\n\n7.  In the Set appearance section, enter the following information in the **Style** and **Value** fields to configure the font icon.\n\n    Select the plus icon to add a row.\n\n<table id=\"table_vkm_zn3_vwb\"><thead><tr><th>\n\nStyle\n\n</th><th>\n\nValue\n\n</th></tr></thead><tbody><tr><td>\n\nEnter `FontName`\n\n</td><td>\n\nEnter one of the following font families:\n\n -   `now-mobile-icons`\n\nThese icons are designed to be used in screens. Use them for lists and section destinations that go to list screens and browser screens. Use these icons to represent a work flow or a screen that you want users to navigate to.\n\n-   `now-mobile-icons-cards`\n\nUse these icons in the body of cards.\n\n-   `now-mobile-icons-buttons`\n\nThese icons are designed to be used for functions. They can be used on buttons that are located on cards or for quick actions.\n\n-   `now-mobile-icons-ALPnavbar`\n\nThese icons appear in the upper right corner of your mobile screen and are used as navigation to another screen.\n\n</td></tr><tr><td>\n\nEnter `Value`\n\n</td><td>\n\nEnter the code that identifies the icon in the font family you want to use. For example, `e903` is the code for the solid cart icon in the **now-mobile-icons-buttons** font family.\n\n For lists of font family icon codes, see the topic for the type of icon you want to use in the [Mobile icon reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/mobile-icon-reference.md).\n\n</td></tr><tr><td>\n\nEnter `FontColor` to specify a hex code for the color of your icon.\n\n This configuration is optional. If you do not specify a color, the default icon color is black.\n\n</td><td>\n\nEnter the hex code for the color you want to use. For example, to specify a red icon, enter `#FF494D`.\n\n</td></tr><tr><td>\n\nEnter `Name`\n\n</td><td>\n\nEnter the name listed for the icon in the font family. For example, if you wanted to use the shopping cart icon in the **now-mobile-icons** font family, you should enter `Cart`.\n\n For lists of font family icon names, see the [Mobile icon reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/mobile-icon-reference.md).\n\n</td></tr></tbody>\n</table>8.  Select **Save**.\n\n\n## What to do next\n\nAfter you create the font family icon, you must use Mobile App Builder to configure a mobile app to use the icon. For more information, see [Add a font icon in a mobile app](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/config-using-font-icon-in-mobile-app.md).\n\n"}}