In the Ninja Tables Drag and Drop mode, you’ll find Text Icon element. This element lets you add text beside an icon and it’s only available as a pro element.

It’s almost similar to the “Styled List” element because of the use of an icon and a text box side by side. However, the Text Icon element is a single text box and not a list. Unless you stack them as a list.

Let’s add a Text Icon element to our Ninja Tables and check its properties and possibilities.

Follow this path- Elements >> Advanced >> Text Icon.

Text Icon Drag and Drop

You can click the “Text Icon” cell and customize the icon and text both.

Properties of Text Icon Element #

ScopeOption NameType
GeneralEditor BoxText Editor
Item SpacingNumeric Value, drag bar
AlignmentLeft, Center, and Right
TextFont ColorGraphical Color Selection
Font SizeNumeric Value, drag bar
Font StyleBold, Italic & Underline
IconColorGraphical Color Selection
Icon SizeNumeric Value, drag bar
Choose IconUpload from Computer
Icon LibrarySelection from Library
Icon PositionLeft & Right

General #

Text Icon element
  1. Editor box: A text editor where you can edit your element text.
  2. Item Spacing: You can add space or gap between the Icons and text Items. By default, It is set to 0.
  3. Alignment: Align the text and icon to the left, right, or center. By default, it is set to center.

Text #

text icon customize
  1. Font Color: You can change the color of the text. By default, it is set to Black.
  2. Font Size: You can change the size of the text. By default, it is set to 10.
  3. Font Style: You can change the Font Style orientations. Available options are Bold, Italic, and Underline.

Icon #

text icon color
  1. Color: You can change the color of the Icon. By default, it is set to Black.
  2. Icon Size: You can change the color of the Icon. By default, it is set to 10.
  3. Choose Icon: You can upload any image as an icon for your “Text icon” element.
  4. Icon Library: There are plenty of Icons to choose from in the library. By default, it is set to a black Ninja Tables logo.
  5. Icon Position: You can position the icon left or right to the text. By default, it is set to left.

Conclusion #

Use a text icon element on your data table to make it dynamic and not a boring table with text only. A relevant icon with a text can make the table appear more engaging.

Let us know your thoughts and questions in the comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *