Navigating Icon Element Settings

Icon Element

The icon element is used to display an icon within your app. Any icon within the 22apps library can be selected.

Icon Element Settings:

Name

  • The name of your element. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users.
  • To name your element, click the pencil icon in the top of the left menu, and type your new name for the element, and click save.

Add Icon

  • To select an icon, click the drop down menu underneath where it says “Icon Settings” on the left menu. Scroll and select the icon you’d like to display in your app.

Width

The width setting of an icon determines its size within your app.

Note – the original icon’s dimensions will not be altered by the width setting.

  • To edit the width of your icon, drag the slider underneath “Width” in the menu on the left side of the page.

Link

  • This option allows you to set a link on your icon. This means, when an app user taps the icon, it will send the user to the link destination. To set a link for your icon, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"
  • Want clients to contact you via Email or Phone Call? Click Here!

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

Animation

  • Setting an animation for your element will cause it to load in with a visual effect. 
  • Once the main screen is loaded on a phone, the animation chosen will take place according to your trigger settings. Beneath “Trigger”, you will see a dropdown menu, and an input for for “Minutes” and “Seconds”.
  • To choose an animation for your element, click the drop-down menu below “Trigger" and select an animation.
  • The "Minutes" and Seconds" inputs are used as a timer. Once a screen is loaded on a phone, the timer starts ticking down. When the timer expires, your element's animation will occur.
  • Note - once the animation has started, it will continue on the same timer, no matter if the user leaves the screen or returns to it later.

Opacity

  • Opacity is used to edit your icon element’s visibility on the screen. To change the opacity, drag the slider under “Opacity” on the “Appearance” menu on the right side of the page.

Align

  • To align your icon to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Border

  • The visual border around your icon is determined by a number of factors:

Style

  • To set your border’s style, enter the drop-down menu beneath “Style” on the “Appearance” menu on the right side of the page. You can then select from a list of several border styles.
  • Note – to remove the border, set the border style to “None”.

Border Color

  • To set the color of your border, click the color box next to “Border Color”. Once satisfied, simply click anywhere else on the page to set the color.

Border Size

  • To set the thickness size of your border, enter the drop-down menu beneath “Border Size” on the “Appearance” menu on the right side of the page. You will see a list of several “Point” options. The higher the number is, the thicker the border will be.

Border Radius

  • The radius of your border is used to determine the roundedness of your element. To change your border’s radius, drag the slider under “Border Radius” on the “Appearance” menu on the right side of the page. The higher the number is, the more round your border’s edges will become.

Spacing

  • Spacing is used to generate space around content, inside of an element's area. To edit spacing settings, scroll to the bottom of the “Appearance” menu on the right side of the page to where it says "Spacing". You can edit the spacing of the Top, Bottom, Left, and Right of your element by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the element and the content.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.