Icon field

Icon filed introduced in Massive Addons is a powerful tool for inserting an icons from 8 different Icons Fonts. It also supports characters icons and image icons (custom icons).

Which icon fonts are included in Icon Field?

We put 7 best Icon Fonts available at the moment. The 8th font is our custom designed Icon Font called Massive Icons. The complete list of Icon Fonts:

  • Font Awesome
  • Elegant Icons
  • Elegant Line Icons
  • Elusive Icons
  • Material Icons
  • TypeIcons
  •  Dashicons
  • Massive Icons – custom font available only in Massive Addons

What’s more, we included a visual selector for all available icons divided into 8 groups (Fonts Families).

Available types of icons

Icon Font: The most basic but powerful type of icon in Massive Addons.

  • Select Icon – choose icon that you like. You can change the icons library at the top. You can also search the icons by keywords. Remember to use as few different icons libraries across your page as possible.
  • Color – choose icon color from color palette. This field support transparency.
  • Size – define icon size in pixels

fields-icon

 

Character: This icon type allows you to use a custom text instead of icons. It also contain a Typography Preset.

  • Font Preset – Typography Presets are used to easily configure your shortcode font settings. You can choose one of the premade presets or create your own.
  • Character – define character as icon
  • Color – choose character color to overwrite preset color
  • Size – choose character size to overwrite preset size

icon-character

Image: This type allow to use an Icon Image:

  • Size – define image size. You can use default WordPress sizes (thumbnail, medium, large, full) or pass exact size by width and height in this format: 100×200.
  • Icon Image – choose image as icon

icon-image

How to select an icon from specified Icon Font?

To insert an Icon from specified Icon Font please click at Select Icon button. The popup with visual selector will appear. Using a dropdown(1) you can choose an interesting Icon Font. After a few seconds, the popup will show all available icons from selected Icon Font. To choose one, just click it.

Some fonts contain a huge number of icons. To make the life easier we also included a Search input(2) to filter icons.

icon-select

Video Tutorial

Please check the video tutorial showed below for better reference.