Icon Widget

The Icon widget allows you to add an icon to the section grid or as a "child" element to a "parent" widget container such as a Carousel or Grid widget. 


The Icon widget has three menus (see Fig 1 below).

Fig 1

General menu

The General menu for the Icon widget contains two features (see Fig 2 below).

Fig 2


  • The Change Icon feature, which when clicked, will bring up a modal (see Fig 3 below), that contains two folders. Each folder includes a "search" bar feature to assist in finding the preferred icon.

Fig 3

  • The "custom" folder is reserved for Pinpointe-added icons and icon libraries.
  • The "fontawesome" folder (see Fig 4 below) contains a large library of free-use icons provided by Fontawesome.

Fig 4

  • The Link Action  feature (see Fig 5 below). A more detailed description of the feature can be found by clicking this link: Link Action Article.

Fig 5

Style menu

The Style menu for the Icon widget basically conforms to the general Style menu as described in this article: Style Menu Article, but also contains two additional features as described below.

  • The Icon Size  feature (see Fig 6 below) is used to increase or decrease the size of the icon (but not its container). Note: The icon size is limited to the maximum size of its container. Enlarging the container may be required to allow an icon's size to be increased beyond the initial maximum.

Fig 6

  • The Icon Color feature (see Fig 7 below) allows you to change the color of the icon by use of a popup color picker.

Fig 7

Hover menu

The icon Hover menu is essentially a clone of the icon Style menu's stylistic features, and its purpose is to allow you to create a different style for the icon when a viewer moves their cursor over it in the browser.


The easiest way to illustrate the use of the Hover menu is with an example. Fig 8 below shows the browser-rendered version of an Icon widget that has been styled using the Style menu (See Fig 9 below). Figs 10 and 11 show the same browser-rendered icon widget using the Hover menu and hovering the cursor over the icon.

Fig 8

Fig 9

Fig 10

Fig 11