Starting in a form in Graphics Mode, follow these four easy steps to create an icon button:
Once the button is created you can drag it into position and add whatever code you need (see Form Object Code).
This section explains the technical details of how Icon Buttons work. You can skip to the next section if you aren’t interested in these details.
The Rich Text option allows styled text to be displayed using tags that begin and end with
<char> tag allows any Unicode character to be displayed using any font. Icon buttons take advantage of this to display characters from the Font Awesome icon font, which is included with Panorama X and automatically available with no additional installation. The Unicode character for the rocket icon is
Normally you would have to look up the Unicode character value for an icon on the Font Awesome web site and type it into the Formula panel (as shown above), but the Font Awesome Icon wizard takes care of that for you. If needed, however, you can come back later and edit this value to change to a different icon.
The wizard shows you the tag that will be inserted when the Make Button icon is pressed.
If you need to manually type in this tag somewhere (for example if you are changing an existing icon, or setting up a custom menu with an icon), you can drag the mouse over the tag text to select it, then copy and paste it wherever you need it.
After the button is created you can still customize the color and size. To change the size, you not only need to change the size of the object, but also adjust the font size in the Text panel, as shown here.
You can also edit the Unicode value to change to a different icon, as described in the previous section.
Since the button is actually a Text Display Object, you can add text in addition to the icon. Simply enlarge the object, then type in the extra text into the Formula panel, as shown here.
The text is normally the same size and color as the icon, but it doesn’t have to be. If you want the icon to have a different style from the text, check the Embed style option when you make the button.
This embeds the size and color into the tag itself.
Since the size and color are now embedded in the tag, you can change the size and color of the overall object without affecting the icon. So in this example, the icon stays red even though the rest of the text has been switched to 24 point gray.
Of course you can embed the size and color manually at any time, not just when you create the icon with the wizard.
Since the icon is specified with text, it’s easy to change the icon dynamically. To illustrate this, I’ll create a padlock icon that opens and shuts when you click on it. The padlock status is controlled by a variable named unLOCKED, if this variable contains
YES the padlock is unlocked. (The catcherror( function ensures that the padlock defaults to locked if the variable hasn’t been defined yet.
When the padlock is clicked, it the code switches the unLOCKED variable between
That’s all you need for a working padlock button.
The button is completely self contained – no external procedure is required.
Sometimes you may want to open up two or more icon windows at the same time. To open a second window, just click the icon. Each window is completely independent, so you can use different searches and display different icons in each window.
You can also open another window using the New Font Awesome command in the Window menu.
The Font Awesome Icons wizard won’t create these types of objects automatically, but you can use this wizard to generate the tag, which you can copy from the wizard and then paste into the object.
To add icons to a custom menu, set the font to
This code produces this custom menu which includes bold text (the word Cube) and various icons.
In addition to Font Awesome, you can use any other icon font installed on your computer, and Unicode also includes a number of icons and dingbats. These other fonts aren’t supported by the Font Awesome wizard, but you can type them in manually. For example, Unicode includes an umbrella icon. (Notice that no font is specified, because this is a standard Unicode character in the default system font.)
Here are some online resources for special Unicode characters.
The Mac comes with 4 special fonts that have hundreds of icons: Webdings, Wingdings, Wingdings 2 and Wingdings 3. You can’t access these characters from the keyboard, only by using the
These fonts were originally created by Microsoft.
It’s surprisingly difficult to find online information about these fonts, but one handy tool for working with these fonts is PopChar X by Ergonis software.
|10.0||New||New in this version.|