Intense - WordPress Plugin

Shortcodes

[intense_icon]

Description

Used to add image icons. Choose from hundreds of different icons. You can also stack icons on top of each other, make them spin, rotate them, flip them, and more.

Dialog

Attributes

Attribute	Type	Dialog Title	Default	Available Values
type	icon	Icon		see list below
size	dropdown	Size	1	1 - 1 2 - 2 3 - 3 4 - 4 5 - 5
color	color_advanced	Color		option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
spin	checkbox	Spin		1 = true, 0 = false
rotate	dropdown	Rotate		- 90 - 90 degrees 180 - 180 degrees 270 - 270 degrees
flip	dropdown	Flip		- horizontal - Horizontal vertical - Vertical
stack_type	icon	Stack Icon		see list below
stack_color	color_advanced	Stack Color		option colors - primary, error, info, inverse, muted, success, warning, link web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
extra_class	text	Extra CSS Class

Icons

There are thousands of default icons to choose from. You can add your own icons by creating an intense/icons folder within your theme or child theme. Inside of that folder, create another folder and place your icons inside of it. Here is an example of what the folder structure should look like.

theme/
  intense/
    icons/
      my-icons/
        myicon.svg
        anothericon.svg

If the icons are designed to be one color, you may need to manually remove the fill color from the individual SVG files. This will let you set the color using the shortcode. For multicolored icons, this isn't necessary since you will want the fill color of the icon.

There is also a pack.json file that you can put in the folder to add more details about the icons. This isn't necessary but, if you are curious, you can find examples within the plugin's icon folders.

Compatibility

Spinning icons aren't compatible with Internet Explorer 9 and earlier.

Examples

[intense_content_section]
[intense_row]
[intense_column size="3"]
<h2>Stacked</h2>
[intense_icon type="star" stack_type="circle" color="#fff" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="info" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="success" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="warning" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="error" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="inverse" /]

[intense_icon type="exclamation" stack_type="circle" color="#fff" size="2" /][intense_icon type="exclamation" stack_type="stop" color="success" stack_color="lightgreen" size="2" /][intense_icon type="exclamation" stack_type="sign-blank" color="#fff"  size="2" /][intense_icon type="exclamation" stack_type="certificate" color="#fff" size="2" /][intense_icon type="exclamation" stack_type="star" color="#fff" size="2" /][intense_icon type="plus" stack_type="heart" color="pink" stack_color="error" size="2" /][intense_icon type="exclamation" stack_type="check-empty" color="error" size="2" /][intense_icon type="bolt" stack_type="cloud" color="info" stack_color="lightblue" size="2" /][intense_icon type="ellipsis-horizontal" stack_type="calendar-empty" color="warning"  size="2" /][intense_icon type="question" stack_type="comment" color="white" stack_color="inverse" size="2" /][intense_icon type="ok" stack_type="bell-alt" color="#fff" stack_color="warning" size="2" /][intense_icon type="plane" stack_type="envelope" color="black" size="2" /][intense_icon type="exclamation" stack_type="folder-close" color="#fff" size="2" /][intense_icon type="exclamation" stack_type="user" color="#fff"  size="2" /][intense_icon type="thumbs-up" stack_type="beer" color="black"  size="2" /][intense_icon type="long-arrow-up" stack_type="trophy" color="white" stack_color="info" size="2" /] 
<br />
...infinite colors with any two icons

[/intense_column]
[intense_column size="3"]
<h2>Sizes</h2>
[intense_icon type="heart" size="1"][intense_icon type="heart" size="2"][intense_icon type="heart" size="3"][intense_icon type="heart" size="4"][intense_icon type="heart" size="5"]

[intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" size="1" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" size="2" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" size="3" /]
[intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" size="4" /][intense_icon type="star" stack_type="circle" color="#fff" stack_color="primary" size="5" /]
[/intense_column]
[intense_column size="3"]
<h2>Spin</h2>
[intense_icon type="spinner" spin="true" size="4"] [intense_icon type="refresh" spin="true" size="4"] [intense_icon type="repeat" spin="true" size="4"] [intense_icon type="heart" spin="true" size="4"]
[/intense_column]
[intense_column size="3"]
<h2>Rotate and Flip</h2>
[intense_icon type="shield" size="2" /] - shield
[intense_icon type="shield" size="2" rotate="90" /] - rotate 90
[intense_icon type="shield" size="2" rotate="180" /] - rotate 180
[intense_icon type="shield" size="2" rotate="270" /] - rotate 270

[intense_icon type="shield" size="2" flip="horizontal" /] - flip horizontal
[intense_icon type="shield" size="2" flip="vertical" /] - flip vertical
[/intense_column]
[/intense_row]
[/intense_content_section]