Bullet List Pro

The Bullet List Pro widget takes traditional bullet lists to a new level. Instead of a single dot option, Bullet List Pro opens the door to any icon you like, and adds the ability to use unique icons for each list item. Choose from thousands of built-in icons or embed icons from the most popular icon libraries on the web.



Preview: https://demo.wocode.com/bullet-list-pro

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row or column where you would like the bullet list to be seen.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: This field allows for multiple widgets to be used on the same page. Use a unique ID for each instance of the widget if using multiple instances. If you are using just one Bullet List Pro widget, you can leave this field unchanged.

  • Icon Source: There are two main options available for the icon source:

    Icon Picker / Upload SVG File: this allows you to use either native icons built into the builder, or upload a custom SVG file to be used as an icon.


    Third Party Icon Libraries: this allows you to enable and use icons from four third party icon libraries. Multiple libraries may be enabled and used at the same time within the widget.

    The icon library sources include:

    • Font Awesome ( https://fontawesome.com/ )

    Font Awesome Icon class example: fa-solid fa-heart


    • Line Awesome ( https://icons8.com/line-awesome )

    Line Awesome Icon class example: las la-heart


    • Material Design Icons ( https://pictogrammers.com/library/mdi/ )

    Material Design Icon class example: mdi mdi-heart


    • Dripicons ( http://demo.amitjakhu.com/dripicons/ )

    Dripicons Icon class example: dripicons-heart

  • Common Icon For All Items: When enabled, this allows you to set a universal icon that will be displayed for all list items, and will override icons used in any individual list item.
  • Icon Code: This field is visible if the icon source is set to "Third Party Icon Libraries", and is used in conjunction with the "Common Icon For All Items" field to set a universal icon across the widget.

  • List Items: This is where you will add the bullet list items. Each list item contains multiple configuration options:

    • Icon Image: This field is only visible If the icon source is set to "Icon Picker / Upload SVG File". Use this field to choose a built in icon or upload your own SVG icon to be used for the list item.

    • Icon Code: This field is only visible if the icon source is set to "Third Party Icon Libraries". Use this field to add the icon code from a third party library to be used for the list item.

    • List Item Text: Sets the text that will be visible for the list item.

    • List Item Link: Allows you to link the list item.


OBTAINING THIRD PARTY ICON CODES

There are four sources of third party icon libraries available, each library has its own icon class format that needs to be used in order for the icon to render within the widget.

Font Awesome: https://fontawesome.com/

Font Awesome Icon class example: fa-solid fa-heart


  1. Click on the free icon you wish to use.
  2. Select the HTML tab and copy the provided code.

  3. Paste the code into the widget and remove the styling elements.

    For example the heart icon will give you the code: <i class="fa-solid fa-heart"></i>

    In the widget you will just enter the icon code: fa-solid fa-heart


Pro Font Awesome icons: https://fontawesome.com/

Pro Font Awesome icons allows you to use paid font awesome icons, but does require additional steps to enable on a site.


  1. Create a new Font Awesome Kit and add the Kit embed code to the <head> of your site (SEO & settings > Head HTML) .
  2. Open the Bullet List Pro widget and uncheck FontAwesome as a third party library to avoid any conflict with the widgets style sheet and the pro fontawesome embedded kit.
  3. Find and open the paid icon on fontawesome that you wish to use.
  4. Select the HTML tab and copy the provided code.

  5. Paste the code into the widget and remove the styling elements.

    For example the pro heart outline icon will give you the code: <i class="fa-light fa-heart"></i>

    In the widget you will just enter the icon code: fa-light fa-heart

Line Awesome: https://icons8.com/line-awesome

Line Awesome Icon class example: las la-heart


  1. Click on the icon you wish to use.
  2. Click on the first code provided that begins with the prefix: las.

  3. Paste the code into the widget and remove the styling elements.

    For example the heart icon will give you the code: <i class="las la-heart"></i>

    In the widget you will just enter the icon code: las la-heart

Material Design Icons: https://pictogrammers.com/library/mdi/

Material Design Icon class example: mdi mdi-heart


  1. Click on the icon you wish to use.
  2. Click on the WEBFONT tab.
  3. Highlight and copy the icon code portion of the provided code.

  4. Paste the icon code into the widget.

    For example the heart icon will give you the code: <span class="mdi mdi-heart"></span>

    In the widget you will just enter the icon code: mdi mdi-heart


Dripicons: http://demo.amitjakhu.com/dripicons

Dripicons Icon class example: dripicons-heart


  1. Scroll down to the CSS Mapping section of icons.
  2. Locate the icon you wish to use and copy the name of the icon.

  3. Within the widgets Icon Code field enter the prefix dripicons- followed by pasting the icon name.

    For example the heart icon will give you icons name: heart

    In the widget you will add the icon code as: dripicons-heart

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Bullet List Pro. Most of these options are related to padding and text styling and are self explanatory, however there are a number of design options worth mentioning specifically.

  • List Styling:

    List Items Direction: Lets you set the direction the list items are displayed, either vertical (up & down) or horizontal (left & right)


    List Item Alignment: This sets the alignment of the list items within the widgets container (Left, Right or Center).


    List Item Gap (px): This sets the space between each list item within the widget.


  • Icon Styling:

    Custom Icon Size: Allows you to set a custom icon size. By default when disabled the icon will inherit its size from the list item's font size.


    Use Same Color As Text For Stroke: When enabled, this will force the icon stroke to be the same color as the list item text, when disabled it allows you to set a custom color for the icon stroke.


    Use Same Color As Text For Fill: When enabled, this will force the icon fill to be the same color as the list item text, when disabled it allows you to set a custom color for the icon fill.


    Note: Some icons may not have a fill while other icons may not have an outline. Because of this, these setting may not visibly effect all icons used within the widget.