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

icon

Attributes

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
typeiconIconsee list below
sizedropdownSize11 - 1
2 - 2
3 - 3
4 - 4
5 - 5
colorcolor_advancedColoroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
spincheckboxSpin1 = true, 0 = false
rotatedropdownRotate -
90 - 90 degrees
180 - 180 degrees
270 - 270 degrees
flipdropdownFlip -
horizontal - Horizontal
vertical - Vertical
stack_typeiconStack Iconsee list below
stack_colorcolor_advancedStack Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
extra_classtextExtra 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]