Skip to content


Marcin Baszczewski edited this page Jul 20, 2019 · 4 revisions
Clone this wiki locally

Our plugin supports wordpress Shortcode API. This allows you to append interactive icons even outside Gutenberg editor.

Basic example:

[lord-icon icon="1-cloud-outline" animation="morph"][/lord-icon]

Supported attributes:

  1. icon - name of icon file without extension provided in icons subdirectory of plugin;
  2. animation - name of supported animation / mode (hover, click, morph, morph-two-way, loop, auto);
  3. palette - optional colors replacements for icon (every icons have list of colors, here you can provide new one in hex format with ";" separator);
  4. size - new icon size (in pixels); our element supports only square icons;
  5. class - class name which will be added to icon element;


There are several ways on how to change the size of the icon. Basic solution is to use the single argument: "size":

[lord-icon icon="1-cloud-outline" animation="hover" size="120"][/lord-icon]

Our shortcode also supports the "class" attribute with the help of which you can assign a class that will be subsequently processed by the CSS with the template:

[lord-icon icon="1-cloud-outline" animation="hover" size="120" class="myicon"][/lord-icon]

As follow in the template:

.myicon { width: 100px; height: 100px; }

WordPress supports the addition of CSS code even to existing templates (in the sense of not modifying their template). You can conveniently use it now (appearance -> customize -> additional css).

Someone who use this shortcode should also be aware of what appears in the place: element "lord-icon" which is also easy to style with CSS:

lord-icon { width: 32px; height: 32px; }


This aspect does not apply to us. It refers to the basics of the HTML or CSS field. The icon can be positioned like any other "inline" object (image, etc.).

New palette

[lord-icon icon="1-cloud-outline" animation="hover" palette="#ff0000;#ff0000"][/lord-icon]


You can find internal details about Shortcode implementation here and here.