Creating Icons

Icons can be a great choice to show on your website to support titles and to represent in an easy way, with the mighty theme you can create icons with various options on design as well as colors. Before creating Icons you will need to understand what options are available with the theme.

Shortcode for Icons

We have created a shortcode for creating icon in the which is as following, you can use the shortcode in any page content, widgets as per your choice
[mighty_icon icon="fab fa-amilia" size="" style="" color=""]

Available icons

You can find a list of supported icons here: https://fontawesome.com/icons/ You will need to paste the Icon name as shown in the above example in the shortcode to make the shortcode work properly.

Available Size:

In the theme we have three sizes available for icons, they are small, large, extra_large, make sure to use this as per your need.

Small

Code to use to achieve this
[mighty_icon icon="fab fa-amilia" size="small"]
Large

Code to use to achieve this
[mighty_icon icon="fab fa-amilia" size="large"]
Extra Large

Code to use to achieve this
[mighty_icon icon="fab fa-amilia" size="extra_large"]
Normal

Code to use to achieve this
[mighty_icon icon="fab fa-amilia"]

Available Color

The color options you can use for icons are: primary, success, info, warning, danger you can add these attributes to the color option in shortcode. Further if you are not happy with the color presets then you can go to Appeareance->Customize-> Mighty Icon Color Settings and change the colors accordingly.

Available Style

We have also added some options to the icons so you can design your webpage with these awesome styles, the styles available are: doubleborder, rectangle_size, dotted, rectangle_size_dotted, rectangle_size_doubleborder, rectangle_radius, rectangle_radius_dotted, rectangle_radius_double and simple_icon.

You should place the keywords as it’s written in above paragraph to the shortcode to make the icon work perfectly. Below are the examples how you can use them and how it looks when implemented.

doubleborder


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="doubleborder"]

rectangle_size


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_size"]

dotted


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="dotted"]

rectangle_size_dotted


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_size_dotted"]

doubleborder


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="doubleborder"]

rectangle_size_doubleborder


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_size_doubleborder"]

rectangle_radius


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_radius"]

rectangle_radius_dotted


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_radius_dotted"]

rectangle_radius_double


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="rectangle_radius_double"]

simple_icon


Code to use to achieve this
[mighty_icon icon="fab fa-amilia" style="simple_icon"]

Newsletter

Subscribe to receive the latest news and announcements.