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, Grid or Flex 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-Admin-added icons and icon libraries.
  • The "fontawesome" folder (see Fig 4 below) contains a large library of free-use icons provided by Fontawesome, and is the default folder that you will see.

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 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 using the "double-arrow" tool in the lower right-hand corner of the icon widget 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 rendered version of an Icon widget that has been styled using the Style menu. Fig 9 shows the same rendered icon widget using the Hover menu and then hovering the cursor over the icon.

Fig 8

Fig 9