Shortcodes - Icons

Usage Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum enim. Nunc in est vitae leo imperdiet suscipit et sagittis leo. Nullam consectetur placerat sem, vitae feugiat lorem posuere nec. Etiam et magna nunc, et faucibus elit. Integer vitae pretium sem. Duis vitae lorem magna, ac tincidunt dolor. Phasellus justo metus, luctus in hendrerit eu, mattis eget lacus. Donec nulla turpis, euismod aliquam aliquam sed, semper vitae enim. Sed venenatis ligula eu enim tempor eget imperdiet dui pulvinar. Nulla pulvinar felis id nisi rutrum nec luctus nunc pellentesque. Phasellus mattis enim at velit mattis posuere. Nam pharetra tristique dolor, ultricies lobortis sem convallis ut. Phasellus vel orci risus. Fusce ultrices scelerisque tellus, luctus fringilla urna ullamcorper quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum enim. Nunc in est vitae leo imperdiet suscipit et sagittis leo. Nullam consectetur placerat sem, vitae feugiat lorem posuere nec. Etiam et magna nunc, et faucibus elit. Integer vitae pretium sem. Duis vitae lorem magna, ac tincidunt dolor. Phasellus justo metus, luctus in hendrerit eu, mattis eget lacus. Donec nulla turpis, euismod aliquam aliquam sed, semper vitae enim. Sed venenatis ligula eu enim tempor eget imperdiet dui pulvinar. Nulla pulvinar felis id nisi rutrum nec luctus nunc pellentesque. Phasellus mattis enim at velit mattis posuere. Nam pharetra tristique dolor, ultricies lobortis sem convallis ut. Phasellus vel orci risus. Fusce ultrices scelerisque tellus, luctus fringilla urna ullamcorper quis.

Usage Instructions

You can insert an icon into your page, post, or layout builder element like this:

[icon image="name_of_icon" align="left"]

Options

Required arguments
 - image: Name of icon's image {image_name}.png, see below for image names

Optional arguments:
 - align: left, right, center, none

Available Icons

accepted

add

app

arrow_down

arrow_down_green

arrow_left

[clear]

arrow_left_green

arrow_right

arrow_right_green

arrow_up

arrow_up_green

beer

[clear]

blue_speech_bubble

book

box

box_download

box_upload

camera

[clear]

cancel

cd

circle_blue

circle_green

circle_orange

circle_red

[clear]

clock

coffee

coffee_mug

comment

computer

cross

[clear]

database

floppy_disk

folder

globe

heart

home

[clear]

image

lightbulb

lock

lock_open

mail

mouse

[clear]

navigate

newspaper

paper

paper_and_pencil

paper_content

paper_content_chart

[clear]

paper_content_pencil

pencil

pie_chart

printer

questionmark

refresh

[clear]

rss

search

smile_grin

smile_sad

spanner

speech_bubble

[clear]

star

star_half

star_off

table

tabs

thumbs_down

[clear]

thumbs_up

usb

user

users_two

warning

iphone

[clear]

macbook

wordpress

html5

colors

support

google

[clear]

analytics

billing

audio

movies

clipboard

bullseye

[clear]

stop

monitor

news

calculator

direction

cart

[clear]

megaphone

license

package

secure

award

mobile

[clear]

Looking to add more icons?

This [icon] shortcode is really just a way for us to provide you with some icons out-of-the box with the theme. If you’re wanting to add icons for use in this shortcode, it’s quite easy. You’d just add your PNG icon here within the theme here:

/framework/frontend/assets/images/icons/{your-icon-name}.png

And then you’d access it like this: [icon image="{your-icon-name}"]

Additionally, if you’re comfortable with basic HTML, you really don’t even need to use this shortcode. The equivalent would be just to do this with HTML:

<img src="https://yoursite.com/wp-content/themes/{theme-name}/framework/frontend/assets/images/icons/{your-icon-name}.png" class="alignleft" />