Shortcodes – Icons

Usage Example

[raw]
[one_half]

[icon image=»thumbs_up»]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.

[/one_half]

[one_half last]

[icon image=»thumbs_down»]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.

[/one_half]
[/raw]

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

[one_sixth]
[icon image=»accepted» align=»center»]

accepted

[/one_sixth]

[one_sixth]
[icon image=»add» align=»center»]

add

[/one_sixth]

[one_sixth]
[icon image=»app» align=»center»]

app

[/one_sixth]

[one_sixth]
[icon image=»arrow_down» align=»center»]

arrow_down

[/one_sixth]

[one_sixth]
[icon image=»arrow_down_green» align=»center»]

arrow_down_green

[/one_sixth]

[one_sixth last]
[icon image=»arrow_left» align=»center»]

arrow_left

[/one_sixth]

[clear]

[one_sixth]
[icon image=»arrow_left_green» align=»center»]

arrow_left_green

[/one_sixth]

[one_sixth]
[icon image=»arrow_right» align=»center»]

arrow_right

[/one_sixth]

[one_sixth]
[icon image=»arrow_right_green» align=»center»]

arrow_right_green

[/one_sixth]

[one_sixth]
[icon image=»arrow_up» align=»center»]

arrow_up

[/one_sixth]

[one_sixth]
[icon image=»arrow_up_green» align=»center»]

arrow_up_green

[/one_sixth]

[one_sixth last]
[icon image=»beer» align=»center»]

beer

[/one_sixth]

[clear]

[one_sixth]
[icon image=»blue_speech_bubble» align=»center»]

blue_speech_bubble

[/one_sixth]

[one_sixth]
[icon image=»book» align=»center»]

book

[/one_sixth]

[one_sixth]
[icon image=»box» align=»center»]

box

[/one_sixth]

[one_sixth]
[icon image=»box_download» align=»center»]

box_download

[/one_sixth]

[one_sixth]
[icon image=»box_upload» align=»center»]

box_upload

[/one_sixth]

[one_sixth last]
[icon image=»camera» align=»center»]

camera

[/one_sixth]

[clear]

[one_sixth]
[icon image=»cancel» align=»center»]

cancel

[/one_sixth]

[one_sixth]
[icon image=»cd» align=»center»]

cd

[/one_sixth]

[one_sixth]
[icon image=»circle_blue» align=»center»]

circle_blue

[/one_sixth]

[one_sixth]
[icon image=»circle_green» align=»center»]

circle_green

[/one_sixth]

[one_sixth]
[icon image=»circle_orange» align=»center»]

circle_orange

[/one_sixth]

[one_sixth last]
[icon image=»circle_red» align=»center»]

circle_red

[/one_sixth]

[clear]

[one_sixth]
[icon image=»clock» align=»center»]

clock

[/one_sixth]

[one_sixth]
[icon image=»coffee» align=»center»]

coffee

[/one_sixth]

[one_sixth]
[icon image=»coffee_mug» align=»center»]

coffee_mug

[/one_sixth]

[one_sixth]
[icon image=»comment» align=»center»]

comment

[/one_sixth]

[one_sixth]
[icon image=»computer» align=»center»]

computer

[/one_sixth]

[one_sixth last]
[icon image=»cross» align=»center»]

cross

[/one_sixth]

[clear]

[one_sixth]
[icon image=»database» align=»center»]

database

[/one_sixth]

[one_sixth]
[icon image=»floppy_disk» align=»center»]

floppy_disk

[/one_sixth]

[one_sixth]
[icon image=»folder» align=»center»]

folder

[/one_sixth]

[one_sixth]
[icon image=»globe» align=»center»]

globe

[/one_sixth]

[one_sixth]
[icon image=»heart» align=»center»]

heart

[/one_sixth]

[one_sixth last]
[icon image=»home» align=»center»]

home

[/one_sixth]

[clear]

[one_sixth]
[icon image=»image» align=»center»]

image

[/one_sixth]

[one_sixth]
[icon image=»lightbulb» align=»center»]

lightbulb

[/one_sixth]

[one_sixth]
[icon image=»lock» align=»center»]

lock

[/one_sixth]

[one_sixth]
[icon image=»lock_open» align=»center»]

lock_open

[/one_sixth]

[one_sixth]
[icon image=»mail» align=»center»]

mail

[/one_sixth]

[one_sixth last]
[icon image=»mouse» align=»center»]

mouse

[/one_sixth]

[clear]

[one_sixth]
[icon image=»navigate» align=»center»]

navigate

[/one_sixth]

[one_sixth]
[icon image=»newspaper» align=»center»]

newspaper

[/one_sixth]

[one_sixth]
[icon image=»paper» align=»center»]

paper

[/one_sixth]

[one_sixth]
[icon image=»paper_and_pencil» align=»center»]

paper_and_pencil

[/one_sixth]

[one_sixth]
[icon image=»paper_content» align=»center»]

paper_content

[/one_sixth]

[one_sixth last]
[icon image=»paper_content_chart» align=»center»]

paper_content_chart

[/one_sixth]

[clear]

[one_sixth]
[icon image=»paper_content_pencil» align=»center»]

paper_content_pencil

[/one_sixth]

[one_sixth]
[icon image=»pencil» align=»center»]

pencil

[/one_sixth]

[one_sixth]
[icon image=»pie_chart» align=»center»]

pie_chart

[/one_sixth]

[one_sixth]
[icon image=»printer» align=»center»]

printer

[/one_sixth]

[one_sixth]
[icon image=»questionmark» align=»center»]

questionmark

[/one_sixth]

[one_sixth last]
[icon image=»refresh» align=»center»]

refresh

[/one_sixth]

[clear]

[one_sixth]
[icon image=»rss» align=»center»]

rss

[/one_sixth]

[one_sixth]
[icon image=»search» align=»center»]

search

[/one_sixth]

[one_sixth]
[icon image=»smile_grin» align=»center»]

smile_grin

[/one_sixth]

[one_sixth]
[icon image=»smile_sad» align=»center»]

smile_sad

[/one_sixth]

[one_sixth]
[icon image=»spanner» align=»center»]

spanner

[/one_sixth]

[one_sixth last]
[icon image=»speech_bubble» align=»center»]

speech_bubble

[/one_sixth]

[clear]

[one_sixth]
[icon image=»star» align=»center»]

star

[/one_sixth]

[one_sixth]
[icon image=»star_half» align=»center»]

star_half

[/one_sixth]

[one_sixth]
[icon image=»star_off» align=»center»]

star_off

[/one_sixth]

[one_sixth]
[icon image=»table» align=»center»]

table

[/one_sixth]

[one_sixth]
[icon image=»tabs» align=»center»]

tabs

[/one_sixth]

[one_sixth last]
[icon image=»thumbs_down» align=»center»]

thumbs_down

[/one_sixth]

[clear]

[one_sixth]
[icon image=»thumbs_up» align=»center»]

thumbs_up

[/one_sixth]

[one_sixth]
[icon image=»usb» align=»center»]

usb

[/one_sixth]

[one_sixth]
[icon image=»user» align=»center»]

user

[/one_sixth]

[one_sixth]
[icon image=»users_two» align=»center»]

users_two

[/one_sixth]

[one_sixth]
[icon image=»warning» align=»center»]

warning

[/one_sixth]

[one_sixth last]
[icon image=»iphone» align=»center»]

iphone

[/one_sixth]

[clear]

[one_sixth]
[icon image=»macbook» align=»center»]

macbook

[/one_sixth]

[one_sixth]
[icon image=»wordpress» align=»center»]

wordpress

[/one_sixth]

[one_sixth]
[icon image=»html5″ align=»center»]

html5

[/one_sixth]

[one_sixth]
[icon image=»colors» align=»center»]

colors

[/one_sixth]

[one_sixth]
[icon image=»support» align=»center»]

support

[/one_sixth]

[one_sixth last]
[icon image=»google» align=»center»]

google

[/one_sixth]

[clear]

[one_sixth]
[icon image=»analytics» align=»center»]

analytics

[/one_sixth]

[one_sixth]
[icon image=»billing» align=»center»]

billing

[/one_sixth]

[one_sixth]
[icon image=»audio» align=»center»]

audio

[/one_sixth]

[one_sixth]
[icon image=»movies» align=»center»]

movies

[/one_sixth]

[one_sixth]
[icon image=»clipboard» align=»center»]

clipboard

[/one_sixth]

[one_sixth last]
[icon image=»bullseye» align=»center»]

bullseye

[/one_sixth]

[clear]

[one_sixth]
[icon image=»stop» align=»center»]

stop

[/one_sixth]

[one_sixth]
[icon image=»monitor» align=»center»]

monitor

[/one_sixth]

[one_sixth]
[icon image=»news» align=»center»]

news

[/one_sixth]

[one_sixth]
[icon image=»calculator» align=»center»]

calculator

[/one_sixth]

[one_sixth]
[icon image=»direction» align=»center»]

direction

[/one_sixth]

[one_sixth last]
[icon image=»cart» align=»center»]

cart

[/one_sixth]

[clear]

[one_sixth]
[icon image=»megaphone» align=»center»]

megaphone

[/one_sixth]

[one_sixth]
[icon image=»license» align=»center»]

license

[/one_sixth]

[one_sixth]
[icon image=»package» align=»center»]

package

[/one_sixth]

[one_sixth]
[icon image=»secure» align=»center»]

secure

[/one_sixth]

[one_sixth]
[icon image=»award» align=»center»]

award

[/one_sixth]

[one_sixth last]
[icon image=»mobile» align=»center»]

mobile

[/one_sixth]

[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="http://yoursite.com/wp-content/themes/{theme-name}/framework/frontend/assets/images/icons/{your-icon-name}.png" class="alignleft" />