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
- 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. - Insert a shortcode and customize the parameters as you'd like.
- Save/update and view your site.
Settings
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"]
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. The default is block but we also like to use inline, inline-flex, and inline-block.
Examples:
[mai_icon icon="heart" display="inline-flex"]
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" classes="my-class another-one"]
color_icon
Set the color of the icon. Accepts a color setting name or any value that can be used for the CSS “color” property.
Examples:
[mai_icon icon="heart" color_icon="primary"]
[mai_icon icon="heart" color_icon="#bcda83"]
color_background
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.
Examples:
[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.
Icon
[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"]
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"]