Social Icons – Custom

  1. Home
  2. Knowledge Base
  3. Social Icons – Custom

This widget puts thousands of icons at your fingertips by leveraging four different icon libraries. Consider using this widget when you need a specific social icon that is not supported by the standard Social Icons widget.

Preview: https://demo.wocode.com/social-icons-custom

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the icons to appear.
  • You may resize the widget container if desired; you can resize it as needed after you set up your icons.

CONTENT SETTINGS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique IDs when using multiple instances of the widget on the same page.

ICONS

This widget allows you to use icons from multiple libraries: FontAwesome, Line Awesome, Material Design and Dripicons. You may use icons from one library or mix and match.

Take special care to enter the icon classes as they are shown in the icon class examples provided in the widget and below. Some classes may be copy/pasted directly into the widget, but some may require you to reformat the class name slightly.

  • Enable Icon Libraries: Use the checkboxes to enable individual font libraries. You may use any combination of libraries.
  • FontAwesome 5: FontAwesome icons must be entered in the following format: fas fa-heart
  • Line Awesome: Line Awesome icons must be entered in the following format: las la-heart
  • Material Designs: Material Design Icons must be entered in the following format: mdi mdi-heart
  • Dripicons: Dripicons must me entered in the following format: dripicons-heart
  • Links and Images: This is where you will build your list containing text content and images.

Note: The FontAwesome and Line Awesome libraries in particular have different prefixes for different types of fonts. The examples given are fas fa-heart for FontAwesome and las la-heart for Line Awesome, but you may find that the prefix of the icon you need is fab, lab or something else. The best thing to do is copy the HTML code provided in the font library and delete all but the icon class name. Refer to the tutorial video for further instruction.

LIST ITEMS

The List Items are used to enter all of the attributes for each icon.

  • Button Link: This is the link that the icon will go to when clicked.
  • Icon Classes: Enter the icon class here.
  • Button Label: This field allows you to enter custom text that appears next to the icon. For example, you may enter “Facebook” if you would like a label next to the Facebook icon. This is optional and may be left blank.
  • Button Target: Select “New Tab” or “Same Tab” for link behavior.
  • Icon Color: This color field allows you to enter a color for the icon. You may use hex, RGB, or RGBA formats. Note that there is also an icon color picker in the Design section that applies a color globally to all of the icons used. This color selector acts as an override to any color selected in the Design section. Manual color code entry is required here (instead of the standard color picker) based on the fact that we’re pulling from font libraries rather than pre-selected icon choices.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the icons and the icon container, such as alignment, padding, fonts and hover colors. The settings are labeled with their exact function.

Join Now