Font Awesome Icon User Guide

Size: px

Start display at page:

Download "Font Awesome Icon User Guide"

Marybeth Perry
5 years ago
Views:

1 Font Awesome Icon User Guide

2 Software Change Log... 2 Introduction and Installation... 2 About Font Awesome Icon... 2 Installing the Font Awesome Icons Extension... 2 Usage... 3 Compatibility... 6 Document Revision History

Software Change Log Version Release Date Changes 1.1.4 4/7/2017 Initial Release Introduction and Installation Extensibility is a core aspect of the architecture and design of ThingWorx.

3 Software Change Log Version Release Date Changes /7/2017 Initial Release Introduction and Installation Extensibility is a core aspect of the architecture and design of ThingWorx. Partners, third parties, and general ThingWorx users can easily add new functionality into the system, seamlessly. Extensions can be in the form of Service (function/method) Libraries, Connector Templates, Widgets, and more. This document provides installation and usage instructions for the Font Awesome Icon Extension. About Font Awesome Icon The Font Awesome Icons extension allows you to use any of the Font Awesome Iconic Font scalable vector icons as instantly customizable -- size, color, drop shadow -- icons or buttons within ThingWorx mashups. For a full list of available icons, please see: This extension can also be used as a template for including other iconic font libraries, simply include the necessary font files and CSS. This extension utilizes the Thingworx SDK. Installing the Font Awesome Icons Extension 1. From a web browser, launch ThingWorx. 2. Log into ThingWorx as an administrator. 3. Go to Import/Export > Import. 2

4. Click Choose File and select FontAwesomeIcons_ExtensionP ackage.zip 5. Click Import. Note: If an Import Successful message does not display, contact your ThingWorx System Administrator. Note: 6.

4 4. Click Choose File and select FontAwesomeIcons_ExtensionP ackage.zip 5. Click Import. Note: If an Import Successful message does not display, contact your ThingWorx System Administrator. Note: 6. Click Yes to refresh Composer after importing the final extension. 7. Confirm that the Extension has been imported properly. Check the Application Log for potential problems. Usage Once installed, the Font Awesome Icon widget will appear in the mashup builder under FontAwesomeIcon. This can be dragged and positioned anywhere on a static or responsive portion of the element and then can be configured like any other widget using the following widget properties: 3

FontAwesome Class The CSS class for the font awesome icon you want to display. A full list can be found here: http://fontawesome.

5 FontAwesome Class The CSS class for the font awesome icon you want to display. A full list can be found here: Vertical Alignment: Vertical positioning of the widget within the space provided Horizontal Alignment: Horizontal positioning of the widget within the space provided Padding: Any CSS padding you want to add to offset the position of the icon Color: Color of the icon in hex or CSS isbutton: Whether the icon is clickable. Note that this will enable certain additional properties listed below. If isbutton is not selected, the Clicked event will not be bound to the widget and thus will have no effect Icon Font Size: Size of the icon. This does not use styles, since styles only allow for a fixed pixel font size. With this input, viewport sizes can also be used to make the icon responsive. See for details. Text Font Size: Size of the text. This does not use styles, since styles only allow for a fixed pixel font size. With this input, viewport sizes can also be used to make the icon responsive. See for details. Text: Any text you want to display to the side of the icon. This text will also be clickable if isbutton is set to true Text Shadow: CSS Shadow on the icon and text If isbutton is true, certain other properties will become available: HoverColor: The color that will appear when a user hovers over the button icon 4

PressedColor: The color that will appear when the button is in a pressed state Disabled: A bindable property that allows you to dynamically enable or disable the button based on an expression,

6 PressedColor: The color that will appear when the button is in a pressed state Disabled: A bindable property that allows you to dynamically enable or disable the button based on an expression, infotable selected, etc. If disabled, the button click event is unbound and will have no effect, and the mouseover cursor will no longer indicate the icon as being clickable DisabledColor: The color the icon will appear when disabled, to indicate to the user it is not clickable Additionally, you can configure a confirmation dialogue for the button Note: If the cancel button is pressed, nothing bound to the Click trigger will fire!: ConfirmationRequired: If enabled, the confirmation dialogue will display to confirm the button click action ConfirmationTitle: Title of the confirmation dialogue ConfermationPrompt: Text prompt for the confirmation dialogue ConfirmationButton1Label: Label for the first button ConfirmationButton2Label: Label for the second button DefaultConfirmationButton: Which of the two buttons will confirm the click action CancelConfirmationButton: Which of the two buttons will cancel the click action 5

7 Compatibility This extension was tested for compatibility with the following ThingWorx Platform version(s) and Operating System(s): ThingWorx Platform Version ThingWorx OS Windows 7, Service Pack 1 Document Revision History Revision Date Version Description of Change April 7, Initial Draft 6

ThingWorx Open Street Map Extension User Guide. Open Street Map Extension User Guide Version 1.0

ThingWorx Open Street Map Extension User Guide. Open Street Map Extension User Guide Version 1.0 Open Street Map Extension User Guide Version 1.0 Software Change Log... 3 Introduction and Installation... 3 About the Open Street Map Extension... 3 Installing the Open Street Map Extension... 3 Usage