Table of Contents[Hide][Show]
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.
Your first step is to decide which icon you want to use.
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.
Examples:
[mai_icon icon="heartbeat"]In the following example, the icon name is wordpress-simple.
style
The style parameter is to choose which Font Awesome icon style to use. Accepts light (default), regular, solid, brands.
Examples:
[mai_icon icon="facebook-f" style="brands"][mai_icon icon="award" style="solid"]size
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.
Examples:
[mai_icon icon="heart" size="20"][mai_icon icon="heart" size="20px"][mai_icon icon="heart" size="2em"]display
Accepts any CSS display property. This is typically not used.
Examples:
[mai_icon icon="heart" display="inline"]align
Accepts left, center(default), right, start, end.
Examples:
[mai_icon icon="heart" align="left"]cart_total
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"]class
Adds additional HTML classes to the markup.
Examples:
[mai_icon icon="heart" class="my-custom-class"]color_icon
Set the color of the icon. Accepts any value that can be used for the CSS “color” property.
Examples:
[mai_icon icon="heart" color_icon="#bcda83"]color_background
Set the color of the icon. Accepts any value that can be used for the CSS “background-color” property. Typically used with the padding and margin parameters below.
Examples:
[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
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.
Icon
[mai_icon icon="shopping-cart" style="light" size="20px"]Icon & Text
[mai_icon icon="shopping-cart" style="light" size="20px" margin_right="6px"] CartBrands
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"]YouTube
[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"]