Mai Icon [mai_icon] Shortcode

The [mai_icon] shortcode is a fully-functioning shortcode version of our Mai Icon block. It’s great for putting icons in menus and anywhere blocks are not currently available. We have all Font Awesome 5 Pro icons, in light, regular, and solid styles available.

Here is an overview of how to use shortcodes.

How To Use

  1. Decide which icon you want to use. Tip: Use the Font Awesome website’s wonderful search tool to choose your icon and find the name and style before you set it in Mai Icon block or [mai_icon] shortcode.
  2. Insert a shortcode and customize the parameters as you'd like.
  3. Save/update and view your site.


icon (required)

This is the actual icon name. It should be all lowercase and may include a dash/hyphen if the icon is more than one word.


[mai_icon icon="heartbeat"]


The style parameter is to choose which Font Awesome icon style to use. Accepts light (default), regular, solid, brands.


[mai_icon icon="facebook-f" style="brands"]
[mai_icon icon="award" style="solid"]


The size parameter allows you to set the size of the icon. Accepts any CSS unit value (px/rem/em/vw/etc). If the size parameter value is only a number, then pixels (px) will be used.


[mai_icon icon="heart" size="20"]
[mai_icon icon="heart" size="20px"]
[mai_icon icon="heart" size="2em"]


Accepts any CSS display property. The default is block but we also like to use inline, inline-flex, and inline-block.


[mai_icon icon="heart" display="inline-flex"]


Accepts left, center (default), right, start, end.


[mai_icon icon="heart" align="left"]


Display the WooCommerce cart total on the top right of the icon.

[mai_icon icon="shopping-cart" style="light" size="20px" margin_right="6px" cart_total="true"]


Adds additional HTML classes to the markup.


[mai_icon icon="heart" classes="my-class another-one"]


Set the color of the icon. Accepts a color setting name or any value that can be used for the CSS “color” property.


[mai_icon icon="heart" color_icon="primary"]
[mai_icon icon="heart" color_icon="#bcda83"]


Set the background color of the icon. Accepts a color setting name or any value that can be used for the CSS “background-color” property. Typically used with the padding and margin parameters below.


[mai_icon icon="heart" color_icon="body" color_background="alt"]
[mai_icon icon="heart" color_icon="#bcda83" color_background="#bcda83"]

Advanced Parameters

The following parameters are considered advanced, and typically require some knowledge of basic CSS to use properly.

  • link
  • link_target
  • color_border
  • color_shadow
  • color_text_shadow
  • margin_top
  • margin_right
  • margin_left
  • margin_bottom
  • padding
  • border_width
  • border_radius
  • x_offset
  • y_offset
  • blur
  • text_shadow_x_offset
  • text_shadow_y_offset
  • text_shadow_blur

Examples: Menu Icons

Here is are some examples of how to show a shopping cart icon as your menu item. Just put either of these in the “Label” field when editing your menu.


[mai_icon icon="shopping-cart" style="light" size="20px"]

Icon & Text

[mai_icon icon="shopping-cart" style="light" size="20px" margin_right="6px"] Cart

Examples: Phone

[mai_icon icon="phone" style="light" size="1em"]

Examples: Brands

Here are some regular brand icons we use all of the time, for easy copy & paste.


[mai_icon icon="facebook-f" style="brands" size="1em"]


[mai_icon icon="twitter" style="brands" size="1em"]


[mai_icon icon="youtube" style="brands" size="1em"]


[mai_icon icon="linkedin-in" style="brands" size="1em"]


[mai_icon icon="pinterest-p" style="brands" size="1em"]


[mai_icon icon="instagram" style="brands" size="1em"]
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us