• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
  • Main Site
  • About Us
  • Services
  • Support
  • Blog
BizBudding Docs

BizBudding Docs

Documentation

  • Mai Theme Docs
    • Mai Themes (v2)
  • Classic Theme Docs
    • Pretty Darn Cute
    • SEO Themes
    • Mai Theme (Classic)
  • Search
Home » MT Docs » Shortcodes » Mai Icon [mai_icon] Shortcode

Mai Icon [mai_icon] Shortcode

Knowledgebase: Shortcodes
Table of Contents[Hide][Show]
  • icon (required)
  • style
  • size
  • display
  • align
  • cart_total
  • class
  • color_icon
  • color_background
  • Advanced Parameters
  • Menu Icons
  • Brands

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.

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.

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"] Cart

Brands

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

Facebook

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

Twitter

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

YouTube

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

LinkedIn

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

Pinterest

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

Instagram

[mai_icon icon="instagram" style="brands" size="1em"]
Next Post: Mai Menu [mai_menu] Shortcode »
bizbudding team

Need some help with your theme?

Open a support request by filling out our support form.

Get Support

Sidebar

Knowledgebase

First Steps

Menus

Content Areas

Customizer

Blocks

Shortcodes

Advanced/Developers

Plugins




BizBudding icon

Resources

  • Shop
  • Affiliates
  • Data Protection
  • Privacy Policy
  • Terms & Conditions
  • Contact Us

quick links

  • Main Site
  • About Us
  • Services
  • Support
  • Blog

Contact Details

1001 County Road 517, Suite 1
Hackettstown, NJ 07840

(877) 548-2440

Contact Us


  • Mai Theme Docs
    • Mai Themes (v2)
  • Classic Theme Docs
    • Pretty Darn Cute
    • SEO Themes
    • Mai Theme (Classic)
  • Search

Copyright © 2010–2021 BizBudding Inc. · All Rights Reserved ♥ Work hard and be nice to people.