Jump to: navigation, search

Difference between revisions of "Icon Font"

Line 8: Line 8:
 
A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf in FontIcons, and while using the "Label=" attribute. -Ask Liang-
 
A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf in FontIcons, and while using the "Label=" attribute. -Ask Liang-
  
−
== Original Set ==
+
==Usage==
−
The first full version of the icon set was completed in September 2019. The following table shows the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code suffix, both of which can be used to call the icons using XAML.
+
The first full version of the icon set was completed in September 2019. The tables on this page show the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code suffix, both of which can be used to call the icons using XAML.
  
 
Using XAML, Glyphs can be called in two ways. One method is to use the Hex Code, and another is the In-App Name. The two below examples show how one might use both methods to create a User symbol.
 
Using XAML, Glyphs can be called in two ways. One method is to use the Hex Code, and another is the In-App Name. The two below examples show how one might use both methods to create a User symbol.
  
 +
<br>
 
Hex Code Usage:
 
Hex Code Usage:
−
In the below example, the attribute <syntaxhighlight>Glyph="&#x22;"</syntaxhighlight>
+
In the below example, the attribute <i>Glyph="</i> and the following Hex Code is used to call the User icon. These Hex codes can be found using a Character Map program, or by searching through the icon tables below.
 +
 
 
<syntaxhighlight lang="xml">
 
<syntaxhighlight lang="xml">
 
<FontIcon FontFamily="UBIK-Standard" Glyph="&#x22;" Foreground="{DynamicResource UBIKLightThemeColor}" />
 
<FontIcon FontFamily="UBIK-Standard" Glyph="&#x22;" Foreground="{DynamicResource UBIKLightThemeColor}" />
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
{{Attention|WikiFormatting prevents the entire Hex Code from being displayed in the tables, so a space was used to break the glyph code. Please remove the space when using the Hex Codes from the table.}}
 +
 +
 +
<br>
 
In-AppName Usage:
 
In-AppName Usage:
 
In the below example, "UBIKIcons.Service" is used to call the symbol for Service or Group.
 
In the below example, "UBIKIcons.Service" is used to call the symbol for Service or Group.
Line 30: Line 36:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
===BASIC ICONS===
+
==Icon Tables==
 +
===Basic Icons===
 
{| class="wikitable" | width = "100%"
 
{| class="wikitable" | width = "100%"
 
|-
 
|-
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
|[[File:UBIKstandard_home-ubik.png|64 px|center]] || ''Ubik'' - Scalable UBIK logo for use on the splash screen. || Ubik || <syntaxhighlight>26;</syntaxhighlight>
+
|[[File:UBIKstandard_home-ubik.png|64 px|center]] || ''Ubik'' - Scalable UBIK logo for use on the splash screen. || Ubik || <code>&#x 26; </code>
 
|-
 
|-
−
| [[File:UBIKstandard_home-service-group.png|64 px|center]] || ''Service'' - The customer profile. || Service|| <code> &#x21; </code>
+
| [[File:UBIKstandard_home-service-group.png|64 px|center]] || ''Service'' - The customer profile. || Service|| <code>&#x 21;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_home-user-name.png|64 px|center]] || ''User'' || User || &#x22;
+
| [[File:UBIKstandard_home-user-name.png|64 px|center]] || ''User'' || User || <code>&#x 22;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_home-password.png|64 px|center]] || ''Password'' || Password || &#x23;
+
| [[File:UBIKstandard_home-password.png|64 px|center]] || ''Password'' || Password || <code>&#x 23;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_home-log-in.png|64 px|center]] || ''Log In'' || Login || &#x24;
+
| [[File:UBIKstandard_home-log-in.png|64 px|center]] || ''Log In'' || Login || <code>&#x 24;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_home-log-out.png|64 px|center]] || ''Log Out'' || Logout || &#x25;
+
| [[File:UBIKstandard_home-log-out.png|64 px|center]] || ''Log Out'' || Logout || <code>&#x 25;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_global-navigation-hamburger.png|64 px|center]] || ''Navigation'' - Global navigation or Hamburger Button || Navigation|| &#x28;
+
| [[File:UBIKstandard_global-navigation-hamburger.png|64 px|center]] || ''Navigation'' - Global navigation or Hamburger Button || Navigation|| <code>&#x 28;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_global-more-actions.png|64 px|center]] || ''More Actions'' || Actions || &#x29;
+
| [[File:UBIKstandard_global-more-actions.png|64 px|center]] || ''More Actions'' || Actions || <code>&#x 29;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_global-home.png|64 px|center]] || ''Home'' || Home || &#x2A;
+
| [[File:UBIKstandard_global-home.png|64 px|center]] || ''Home'' || Home || <code>&#x 2A;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_global-scan.png|64 px|center]] || ''Scan'' || Scan || &#x2B;
+
| [[File:UBIKstandard_global-scan.png|64 px|center]] || ''Scan'' || Scan || <code>&#x 2B;</code>
 
|-
 
|-
 
| [[File:UBIKstandard_global-poi.png|64 px|center]] || ''POI'' - NOT YET CREATED ||  || hex  
 
| [[File:UBIKstandard_global-poi.png|64 px|center]] || ''POI'' - NOT YET CREATED ||  || hex  
 
|-
 
|-
−
| [[File:UBIKstandard_global-settings.png|64 px|center]] || ''Settings'' || Settings || &#x2D;
+
| [[File:UBIKstandard_global-settings.png|64 px|center]] || ''Settings'' || Settings || <code>&#x 2D;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_global-search.png|64 px|center]] || ''Search'' || Search || &#x2E;
+
| [[File:UBIKstandard_global-search.png|64 px|center]] || ''Search'' || Search || <code>&#x 2E;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_sync-online.png|64 px|center]] || ''Syncmode-'' - Automatic uploads and downloads || Online || &#x30;
+
| [[File:UBIKstandard_sync-online.png|64 px|center]] || ''Syncmode-'' - Automatic uploads and downloads || Online || <code>&#x 30;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_sync-manual.png|64 px|center]] || ''Syncmode'' - Automatic downloads / manual uploads || Manual || &#x31;
+
| [[File:UBIKstandard_sync-manual.png|64 px|center]] || ''Syncmode'' - Automatic downloads / manual uploads || Manual || <code>&#x 31;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_sync-offline.png|64 px|center]] || ''Syncmode'' - No Automatic uploads or downloads || Offline || &#x32;  
+
| [[File:UBIKstandard_sync-offline.png|64 px|center]] || ''Syncmode'' - No Automatic uploads or downloads || Offline || <code>&#x 32; </code>
 
|-
 
|-
 
|}
 
|}
Line 74: Line 81:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_home-start-children.png|64 px|center]] || ''Start / Objects / Children'' - Symbol used to signify an object hierarchy. Thus used after logging in as the Start symbol, as well as for the Children tab just under the object title in the Header. || Children, Start || &#x4A;
+
| [[File:UBIKstandard_home-start-children.png|64 px|center]] || ''Start / Objects / Children'' - Symbol used to signify an object hierarchy. Thus used after logging in as the Start symbol, as well as for the Children tab just under the object title in the Header. || Children, Start || <code>&#x 4A;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_tab-properties.png|64 px|center]] || ''Properties'' - Used for Properties tab just under the object title in the Header. || Properties || &#x4B;
+
| [[File:UBIKstandard_tab-properties.png|64 px|center]] || ''Properties'' - Used for Properties tab just under the object title in the Header. || Properties || <code>&#x 4B;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_tab-documents.png|64 px|center]] || ''Documents'' - Used for Properties tab just under the object title in the Header. || Documents || &#x4C;
+
| [[File:UBIKstandard_tab-documents.png|64 px|center]] || ''Documents'' - Used for Properties tab just under the object title in the Header. || Documents || <code>&#x 4C;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_tab-document-viewing.png|64 px|center]] || ''Document being Viewed'' - Used in place of the Children tab (first position) when a document is being viewed. || DocumentView || &#x4D;
+
| [[File:UBIKstandard_tab-document-viewing.png|64 px|center]] || ''Document being Viewed'' - Used in place of the Children tab (first position) when a document is being viewed. || DocumentView || <code>&#x 4D;</code>
 
|-
 
|-
 
|}
 
|}
Line 89: Line 96:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_child-changed.png|64 px|center]] || ''Uncommitted Changes'' - Used to show an item has alterations which have not yet been committed to the server (for example, in offline mode). || Changes || &#x41;
+
| [[File:UBIKstandard_child-changed.png|64 px|center]] || ''Uncommitted Changes'' - Used to show an item has alterations which have not yet been committed to the server (for example, in offline mode). || Changes || <code>&#x 41;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-changes-VARIANT.png|64 px|center]] || ''Uncommitted Changes / Variant'' - An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || ChangesAlt || &#x40;
+
| [[File:UBIKstandard_child-changes-VARIANT.png|64 px|center]] || ''Uncommitted Changes / Variant'' - An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || ChangesAlt || <code>&#x 40;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-technical-alert.png|64 px|center]] || ''Technical Alert'' - Use to show that one or more children within the branch have an active Technical Alert status. || Technical || &#x43;
+
| [[File:UBIKstandard_child-technical-alert.png|64 px|center]] || ''Technical Alert'' - Use to show that one or more children within the branch have an active Technical Alert status. || Technical || <code>&#x 43;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_organizational-in-progress.png|64 px|center]] || ''Organizational Status: Ongoing'' - Used to show that one or more of the tasks underneath this object are still in progress. || OrgOngoing || &#x44;
+
| [[File:UBIKstandard_organizational-in-progress.png|64 px|center]] || ''Organizational Status: Ongoing'' - Used to show that one or more of the tasks underneath this object are still in progress. || OrgOngoing || <code>&#x 44;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_organizational-complete.png|64 px|center]] || ''Organizational Status: Complete'' - Used to show that all the tasks underneath this object have been completed, and the ORG Status has been confirmed. || OrgComplete || &#x45;
+
| [[File:UBIKstandard_organizational-complete.png|64 px|center]] || ''Organizational Status: Complete'' - Used to show that all the tasks underneath this object have been completed, and the ORG Status has been confirmed. || OrgComplete || <code>&#x 45;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-download-or-downloaded.png|64 px|center]] || ''Downloaded'' - Used to show that a branch download has occurred, making this object available offline. || Downloaded || &#x48;
+
| [[File:UBIKstandard_child-download-or-downloaded.png|64 px|center]] || ''Downloaded'' - Used to show that a branch download has occurred, making this object available offline. || Downloaded || <code>&#x 48;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-downloaded-VARIANT.png|64 px|center]] || ''Downloaded'' An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || DownloadedAlt || &#x46;
+
| [[File:UBIKstandard_child-downloaded-VARIANT.png|64 px|center]] || ''Downloaded'' An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. || DownloadedAlt || <code>&#x 46;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-locked.png|64 px|center]] || ''Locked'' || Locked || &#x47;
+
| [[File:UBIKstandard_child-locked.png|64 px|center]] || ''Locked'' || Locked || <code>&#x 47;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''Deleted''- Indicates an as-yet uncommitted Deleted status (for example, in offline mode).  || Deleted || &#x52;
+
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''Deleted''- Indicates an as-yet uncommitted Deleted status (for example, in offline mode).  || Deleted || <code>&#x 52;</code>
 
|-
 
|-
 
|}
 
|}
Line 114: Line 121:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_document-online-linked.png|64 px|center]] || ''Online/Linked Document'' - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. || OnlineDoc || &#x66;
+
| [[File:UBIKstandard_document-online-linked.png|64 px|center]] || ''Online/Linked Document'' - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. || OnlineDoc || <code>&#x 66;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-signal-good.png|64 px|center]] || ''Live Value Signal: Good'' - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. || SignalGood || &#x63;
+
| [[File:UBIKstandard_property-signal-good.png|64 px|center]] || ''Live Value Signal: Good'' - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. || SignalGood || <code>&#x 63;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-signal-ok.png|64 px|center]] || ''Live Value Signal: Ok''|| SignalOK || &#x64;
+
| [[File:UBIKstandard_property-signal-ok.png|64 px|center]] || ''Live Value Signal: Ok''|| SignalOK || <code>&#x 64;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-signal-bad.png|64 px|center]] || ''Live Value Signal: Ok''|| SignalBad || &#x65;
+
| [[File:UBIKstandard_property-signal-bad.png|64 px|center]] || ''Live Value Signal: Ok''|| SignalBad || <code>&#x 65;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-read-only.png|64 px|center]] || ''Read Only Property''|| PropReadOnly || &#x60;
+
| [[File:UBIKstandard_property-read-only.png|64 px|center]] || ''Read Only Property''|| PropReadOnly || <code>&#x 60;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-editable.png|64 px|center]] || ''Editable Property''|| PropEdit || &#x61;
+
| [[File:UBIKstandard_property-editable.png|64 px|center]] || ''Editable Property''|| PropEdit || <code>&#x 61;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_property-list-editable.png|64 px|center]] || ''Editable List''|| PropEditList || &#x62;
+
| [[File:UBIKstandard_property-list-editable.png|64 px|center]] || ''Editable List''|| PropEditList || <code>&#x 62;</code>
 
|-
 
|-
 
|}
 
|}
Line 136: Line 143:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_action-add.png|64 px|center]] || ''Add'' - Generic icon for adding something. || Add || &#x50;
+
| [[File:UBIKstandard_action-add.png|64 px|center]] || ''Add'' - Generic icon for adding something. || Add || <code>&#x 50;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_action-photo.png|64 px|center]] || ''Add Photo'' || Photo || &#x51;
+
| [[File:UBIKstandard_action-photo.png|64 px|center]] || ''Add Photo'' || Photo || <code>&#x 51;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''Delete''- Indicates an as-yet uncommitted Deleted status (for example, in offline mode).  || Delete, Deleted || &#x52;
+
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''Delete''- Indicates an as-yet uncommitted Deleted status (for example, in offline mode).  || Delete, Deleted || <code>&#x 52;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Discard'' - Discard object from local database. || Discard, Cancel || &#x53;
+
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Discard'' - Discard object from local database. || Discard, Cancel || <code>&#x 53;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_action-or-editor-revert.png|64 px|center]] || ''Revert'' - Discard uncommitted changes. || Revert, Reset || &#x54;
+
| [[File:UBIKstandard_action-or-editor-revert.png|64 px|center]] || ''Revert'' - Discard uncommitted changes. || Revert, Reset || <code>&#x 54;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_action-download.png|64 px|center]] || ''Download'' - Action to trigger a Branch Download. || Download || &#x55;
+
| [[File:UBIKstandard_action-download.png|64 px|center]] || ''Download'' - Action to trigger a Branch Download. || Download || <code>&#x 55;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_action-use-location.png|64 px|center]] || ''Use Geo Location'' || UseLocation || &#x56;
+
| [[File:UBIKstandard_action-use-location.png|64 px|center]] || ''Use Geo Location'' || UseLocation || <code>&#x 56;</code>
 
|-
 
|-
 
|}
 
|}
Line 157: Line 164:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Confirm'' || Confirm, Check, Ok, TaskYes || &#x57;
+
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Confirm'' || Confirm, Check, Ok, TaskYes || <code>&#x 57;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_action-or-editor-revert.png|64 px|center]] || ''Revert'' || Revert, Reset || &#x54;
+
| [[File:UBIKstandard_action-or-editor-revert.png|64 px|center]] || ''Revert'' || Revert, Reset || <code>&#x 54;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Cancel'' - Exit editor without saving changes. || Cancel || &#x53;
+
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Cancel'' - Exit editor without saving changes. || Cancel || <code>&#x 53;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_navigation-right.png|64 px|center]] || ''GUID: Go To'' || GoTo, Right || &#x5B;
+
| [[File:UBIKstandard_navigation-right.png|64 px|center]] || ''GUID: Go To'' || GoTo, Right || <code>&#x 5B;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-edit.png|64 px|center]] || ''GUID: Edit'' || Edit || &#x5C;
+
| [[File:UBIKstandard_editor-edit.png|64 px|center]] || ''GUID: Edit'' || Edit || &#x5C;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''GUID: Delete'' || Delete, Deleted || &#x52;
+
| [[File:UBIKstandard_child-deleted-or-action-delete.png|64 px|center]] || ''GUID: Delete'' || Delete, Deleted || <code>&#x 52;</code>
 
|-
 
|-
 
|}
 
|}
Line 176: Line 183:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Task Yes'' || Confirm, Check, Ok, TaskYes || &#x57;
+
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Task Yes'' || Confirm, Check, Ok, TaskYes || <code>&#x 57;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Task No'' || Discard, Cancel || &#x57;
+
| [[File:UBIKstandard_editor-cancel-or-action-discard.png|64 px|center]] || ''Task No'' || Discard, Cancel || &#x57;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Task Finished'' || Confirm, Check, Ok, TaskYes || &#x57;
+
| [[File:UBIKstandard_editor-confirm.png|64 px|center]] || ''Task Finished'' || Confirm, Check, Ok, TaskYes || <code>&#x 57;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_editor-NA.png|64 px|center]] || ''Task NA'' || Task NA || &#x6A;
+
| [[File:UBIKstandard_editor-NA.png|64 px|center]] || ''Task NA'' || Task NA || <code>&#x 6A;</code>
 
|-
 
|-
 
|}
 
|}
Line 191: Line 198:
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
! Icon !! Casual Name / Description !! In-App Name !! Hex Code
 
|-
 
|-
−
| [[File:UBIKstandard_navigation-right.png|64 px|center]] || ''Right'' || Right, GoTo || &#x5B;
+
| [[File:UBIKstandard_navigation-right.png|64 px|center]] || ''Right'' || Right, GoTo || <code>&#x 5B;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_navigation-left.png|64 px|center]] || ''Left'' || Left || &#x5D;
+
| [[File:UBIKstandard_navigation-left.png|64 px|center]] || ''Left'' || Left || <code>&#x 5D;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_navigation-up.png|64 px|center]] || ''Up'' || Up || &#x5E;
+
| [[File:UBIKstandard_navigation-up.png|64 px|center]] || ''Up'' || Up || <code>&#x 5E;</code>
 
|-
 
|-
−
| [[File:UBIKstandard_navigation-down.png|64 px|center]] || ''Down'' || Down || &#x5F;
+
| [[File:UBIKstandard_navigation-down.png|64 px|center]] || ''Down'' || Down || <code>&#x 5F;</code>
 
|-
 
|-
 
|}
 
|}
  
 
[[Category:Pages with broken file links|Icon Font]]
 
[[Category:Pages with broken file links|Icon Font]]

Revision as of 09:16, 30 September 2019

UBIK-Standard.ttf is a custom set of font icons developed primarily for use on the Xamarin Client, due to concerns over the legality of using Microsoft's Segoe MDL2 Assets icon font file on non-Windows platforms (ie. Android and iOS). Apart from this legal concern, having a standardized font icon set will contribute to having a more consistent look across the various platforms, clients, once UBIK-Standard.ttf becomes more widely used in both standard builds, and individual customizings.

IC Hint square.pngThe latest font set can be downloaded directly from the UBIK-Standard.zip file.

Known Issues

The development of the custom icon font on the Xamarin client was hampered significantly by unexpected icon substitutions, which appeared to be vender/device-specific. To avoid this issue, the individual icons in the text file were mapped to the Hex codes used by the most basic alphabet and symbol characters.

A second issue was encountered where using unstable behavior was observed when using UBIK-Standard.ttf in FontIcons, and while using the "Label=" attribute. -Ask Liang-

Usage

The first full version of the icon set was completed in September 2019. The tables on this page show the icons, along with a description of their intended purpose (some have multiple), and the natural language In-App Name, and Hex code suffix, both of which can be used to call the icons using XAML.

Using XAML, Glyphs can be called in two ways. One method is to use the Hex Code, and another is the In-App Name. The two below examples show how one might use both methods to create a User symbol.


Hex Code Usage: In the below example, the attribute Glyph=" and the following Hex Code is used to call the User icon. These Hex codes can be found using a Character Map program, or by searching through the icon tables below.

<FontIcon FontFamily="UBIK-Standard" Glyph="&#x22;" Foreground="{DynamicResource UBIKLightThemeColor}" />
IC Attention.pngWikiFormatting prevents the entire Hex Code from being displayed in the tables, so a space was used to break the glyph code. Please remove the space when using the Hex Codes from the table.



In-AppName Usage: In the below example, "UBIKIcons.Service" is used to call the symbol for Service or Group.

<ctrls:GlyphLabel
   Glyph="{x:Static resources:UBIKIcons.User}"
   PrimaryColor="{DynamicResource UBIKLightThemeColor}"
   SecondaryColor="{DynamicResource UBIKDarkThemeColor}"
   Style="{DynamicResource UBIKSymbolLabel}"
   VerticalOptions="Center" />

Icon Tables

Basic Icons

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard home-ubik.png
 Ubik - Scalable UBIK logo for use on the splash screen. Ubik &#x 26;
UBIKstandard home-service-group.png
 Service - The customer profile. Service &#x 21;
UBIKstandard home-user-name.png
 User User &#x 22;
UBIKstandard home-password.png
 Password Password &#x 23;
UBIKstandard home-log-in.png
 Log In Login &#x 24;
UBIKstandard home-log-out.png
 Log Out Logout &#x 25;
UBIKstandard global-navigation-hamburger.png
 Navigation - Global navigation or Hamburger Button Navigation &#x 28;
UBIKstandard global-more-actions.png
 More Actions Actions &#x 29;
UBIKstandard global-home.png
 Home Home &#x 2A;
UBIKstandard global-scan.png
 Scan Scan &#x 2B;
64 px
 POI - NOT YET CREATED hex
UBIKstandard global-settings.png
 Settings Settings &#x 2D;
UBIKstandard global-search.png
 Search Search &#x 2E;
UBIKstandard sync-online.png
 Syncmode- - Automatic uploads and downloads Online &#x 30;
UBIKstandard sync-manual.png
 Syncmode - Automatic downloads / manual uploads Manual &#x 31;
UBIKstandard sync-offline.png
 Syncmode - No Automatic uploads or downloads Offline &#x 32;

OBJECT PAGE / TABS

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard home-start-children.png
 Start / Objects / Children - Symbol used to signify an object hierarchy. Thus used after logging in as the Start symbol, as well as for the Children tab just under the object title in the Header. Children, Start &#x 4A;
UBIKstandard tab-properties.png
 Properties - Used for Properties tab just under the object title in the Header. Properties &#x 4B;
UBIKstandard tab-documents.png
 Documents - Used for Properties tab just under the object title in the Header. Documents &#x 4C;
UBIKstandard tab-document-viewing.png
 Document being Viewed - Used in place of the Children tab (first position) when a document is being viewed. DocumentView &#x 4D;

CHILD OBJECT STATUS BADGES

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard child-changed.png
 Uncommitted Changes - Used to show an item has alterations which have not yet been committed to the server (for example, in offline mode). Changes &#x 41;
UBIKstandard child-changes-VARIANT.png
 Uncommitted Changes / Variant - An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. ChangesAlt &#x 40;
UBIKstandard child-technical-alert.png
 Technical Alert - Use to show that one or more children within the branch have an active Technical Alert status. Technical &#x 43;
UBIKstandard organizational-in-progress.png
 Organizational Status: Ongoing - Used to show that one or more of the tasks underneath this object are still in progress. OrgOngoing &#x 44;
UBIKstandard organizational-complete.png
 Organizational Status: Complete - Used to show that all the tasks underneath this object have been completed, and the ORG Status has been confirmed. OrgComplete &#x 45;
UBIKstandard child-download-or-downloaded.png
 Downloaded - Used to show that a branch download has occurred, making this object available offline. Downloaded &#x 48;
UBIKstandard child-downloaded-VARIANT.png
 Downloaded An alternate symbol for the usage. Currently, the small size that the icon is rendered at means that this image is too detailed for use on a child item in the above description. DownloadedAlt &#x 46;
UBIKstandard child-locked.png
 Locked Locked &#x 47;
UBIKstandard child-deleted-or-action-delete.png
 Deleted- Indicates an as-yet uncommitted Deleted status (for example, in offline mode). Deleted &#x 52;

PROPERTIES

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard document-online-linked.png
 Online/Linked Document - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. OnlineDoc &#x 66;
UBIKstandard property-signal-good.png
 Live Value Signal: Good - Used to indicate strong signal, or as a base for the Ok and Bad signal icons. SignalGood &#x 63;
UBIKstandard property-signal-ok.png
 Live Value Signal: Ok SignalOK &#x 64;
UBIKstandard property-signal-bad.png
 Live Value Signal: Ok SignalBad &#x 65;
UBIKstandard property-read-only.png
 Read Only Property PropReadOnly &#x 60;
UBIKstandard property-editable.png
 Editable Property PropEdit &#x 61;
UBIKstandard property-list-editable.png
 Editable List PropEditList &#x 62;


ACTIONS

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard action-add.png
 Add - Generic icon for adding something. Add &#x 50;
UBIKstandard action-photo.png
 Add Photo Photo &#x 51;
UBIKstandard child-deleted-or-action-delete.png
 Delete- Indicates an as-yet uncommitted Deleted status (for example, in offline mode). Delete, Deleted &#x 52;
UBIKstandard editor-cancel-or-action-discard.png
 Discard - Discard object from local database. Discard, Cancel &#x 53;
UBIKstandard action-or-editor-revert.png
 Revert - Discard uncommitted changes. Revert, Reset &#x 54;
UBIKstandard action-download.png
 Download - Action to trigger a Branch Download. Download &#x 55;
UBIKstandard action-use-location.png
 Use Geo Location UseLocation &#x 56;

EDITORS

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard editor-confirm.png
 Confirm Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard action-or-editor-revert.png
 Revert Revert, Reset &#x 54;
UBIKstandard editor-cancel-or-action-discard.png
 Cancel - Exit editor without saving changes. Cancel &#x 53;
UBIKstandard navigation-right.png
 GUID: Go To GoTo, Right &#x 5B;
UBIKstandard editor-edit.png
 GUID: Edit Edit \</code>
UBIKstandard child-deleted-or-action-delete.png
 GUID: Delete Delete, Deleted &#x 52;

TASK ACTIONS

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard editor-confirm.png
 Task Yes Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard editor-cancel-or-action-discard.png
 Task No Discard, Cancel W</code>
UBIKstandard editor-confirm.png
 Task Finished Confirm, Check, Ok, TaskYes &#x 57;
UBIKstandard editor-NA.png
 Task NA Task NA &#x 6A;

GENERIC NAVIGATION

Icon Casual Name / Description In-App Name Hex Code
UBIKstandard navigation-right.png
 Right Right, GoTo &#x 5B;
UBIKstandard navigation-left.png
 Left Left &#x 5D;
UBIKstandard navigation-up.png
 Up Up &#x 5E;
UBIKstandard navigation-down.png
 Down Down &#x 5F;
Retrieved from "https://wiki.augmensys.com/index.php?title=Icon_Font&oldid=21686"