Icons

Inserting an Icon

Our themes use Entypo font icons which are composed of some 400+ icons. Easily style icons by setting background/border/icon colors and sizes. Use icons to scroll to sections, link to pages or lighbox elements.

Related Video Tutorials
Using the icon shortcode

Teaches you how to add an icon, initiate a scroll to section and link to a lightbox

Step 1: Switch To Backend Editor

To insert an icon, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Icon

Click "Icon" in the Visual Composer Modal to insert an icon, for example:

Icon Settings
Step 3: Edit Icon Settings

Once the icon element has been inserted click the Edit Link(pen icon) of the icons, for example:

Icon Settings

Here is an overview of available icon options:

  • Margin Bottom

    Determines the bottom margin of the button. Values range from 0-150.

  • Margin Bottom on Mobiles

    Determines the bottom margin of the button on mobile (from 768px and below). Values range from 0-150.

  • Icon

    Select the icon to be used.

  • Linked to

    Determines what the icon should link to, either: None, Scroll to section, Link to page or Use lightbox. Here is a breakdown of each and their dependent options:

    • Icon is not inserted as a link.

    • Link URL

      The section ID that the icon should link to. For the link to initiate a scroll to a given section you need to specify ID as follow: #section. Remember to also give the section in question the same ID.

    • Scroll Offset

      This is where you can set the scroll position offset when scrolling to a section i.e. whether the page scroll should stop a bit above, below, or exactly where the section begins. Accepts negative numbers.

    • Link URL

      The URL of the page to which the icon should link to.

    • Target

      Whether the page should open in the same window or a new one.

    • Media Type

      Wheter the lightbox should show an Image, a Vimeo Video, YouTube Video or Other Video.

    • Lightbox Toolbar Zoom Button

      Whether the lightbox media should be zoomable.

    • Lightbox Toolbar Share Button

      Whether the lightbox media should be sharable through Facebook, Twitter and Google+.

    • Lightbox Caption

      The lightbox media caption. Leave blank if no caption is wanted.

    • Video URL Parameters

      Enter the URL paramters to style the player here i.e. autoplay=1. Both Vimeo and YouTube URL parameters are supported. Click here to view available Vimeo Player parameters and here for YouTube Payer Parameters.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Icon size

    Determines whether the icon should be small, medium, large or extra large in size.

  • Icon style

    Determines whether icon should have no styling, or whether it should be boxed or circled.

  • Color Options

    Background Color
    Background Color Hover
    Border Color
    Border Color HoverLabel Color
    Label Color Hover

    Note: Need color reference for social networks? Visit https://brandcolors.net/.

Can't find what you're looking for? Submit a request in our forum.