Home / Shortcodes / Image Icons

Image Icons

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

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

Options

Argument Default Description
image (required} None Name of icon, see below.
align left How to align icon image – left, right, center, none.
width 45 The width of the image.

Available Icons

[icon image=”accepted” align=”center”]

accepted

[icon image=”add” align=”center”]

add

[icon image=”app” align=”center”]

app

[icon image=”arrow_down” align=”center”]

arrow_down

[icon image=”arrow_down_green” align=”center”]

arrow_down_green

[icon image=”arrow_left” align=”center”]

arrow_left

[clear]
[icon image=”arrow_left_green” align=”center”]

arrow_left_green

[icon image=”arrow_right” align=”center”]

arrow_right

[icon image=”arrow_right_green” align=”center”]

arrow_right_green

[icon image=”arrow_up” align=”center”]

arrow_up

[icon image=”arrow_up_green” align=”center”]

arrow_up_green

[icon image=”beer” align=”center”]

beer

[clear]
[icon image=”blue_speech_bubble” align=”center”]

blue_speech_bubble

[icon image=”book” align=”center”]

book

[icon image=”box” align=”center”]

box

[icon image=”box_download” align=”center”]

box_download

[icon image=”box_upload” align=”center”]

box_upload

[icon image=”camera” align=”center”]

camera

[clear]
[icon image=”cancel” align=”center”]

cancel

[icon image=”cd” align=”center”]

cd

[icon image=”circle_blue” align=”center”]

circle_blue

[icon image=”circle_green” align=”center”]

circle_green

[icon image=”circle_orange” align=”center”]

circle_orange

[icon image=”circle_red” align=”center”]

circle_red

[clear]
[icon image=”clock” align=”center”]

clock

[icon image=”coffee” align=”center”]

coffee

[icon image=”coffee_mug” align=”center”]

coffee_mug

[icon image=”comment” align=”center”]

comment

[icon image=”computer” align=”center”]

computer

[icon image=”cross” align=”center”]

cross

[clear]
[icon image=”database” align=”center”]

database

[icon image=”floppy_disk” align=”center”]

floppy_disk

[icon image=”folder” align=”center”]

folder

[icon image=”globe” align=”center”]

globe

[icon image=”heart” align=”center”]

heart

[icon image=”home” align=”center”]

home

[clear]
[icon image=”image” align=”center”]

image

[icon image=”lightbulb” align=”center”]

lightbulb

[icon image=”lock” align=”center”]

lock

[icon image=”lock_open” align=”center”]

lock_open

[icon image=”mail” align=”center”]

mail

[icon image=”mouse” align=”center”]

mouse

[clear]
[icon image=”navigate” align=”center”]

navigate

[icon image=”newspaper” align=”center”]

newspaper

[icon image=”paper” align=”center”]

paper

[icon image=”paper_and_pencil” align=”center”]

paper_and_pencil

[icon image=”paper_content” align=”center”]

paper_content

[icon image=”paper_content_chart” align=”center”]

paper_content_chart

[clear]
[icon image=”paper_content_pencil” align=”center”]

paper_content_pencil

[icon image=”pencil” align=”center”]

pencil

[icon image=”pie_chart” align=”center”]

pie_chart

[icon image=”printer” align=”center”]

printer

[icon image=”questionmark” align=”center”]

questionmark

[icon image=”refresh” align=”center”]

refresh

[clear]
[icon image=”rss” align=”center”]

rss

[icon image=”search” align=”center”]

search

[icon image=”smile_grin” align=”center”]

smile_grin

[icon image=”smile_sad” align=”center”]

smile_sad

[icon image=”spanner” align=”center”]

spanner

[icon image=”speech_bubble” align=”center”]

speech_bubble

[clear]
[icon image=”star” align=”center”]

star

[icon image=”star_half” align=”center”]

star_half

[icon image=”star_off” align=”center”]

star_off

[icon image=”table” align=”center”]

table

[icon image=”tabs” align=”center”]

tabs

[icon image=”thumbs_down” align=”center”]

thumbs_down

[clear]
[icon image=”thumbs_up” align=”center”]

thumbs_up

[icon image=”usb” align=”center”]

usb

[icon image=”user” align=”center”]

user

[icon image=”users_two” align=”center”]

users_two

[icon image=”warning” align=”center”]

warning

[icon image=”iphone” align=”center”]

iphone

[clear]
[icon image=”macbook” align=”center”]

macbook

[icon image=”wordpress” align=”center”]

wordpress

[icon image=”html5″ align=”center”]

html5

[icon image=”colors” align=”center”]

colors

[icon image=”support” align=”center”]

support

[icon image=”google” align=”center”]

google

[clear]
[icon image=”analytics” align=”center”]

analytics

[icon image=”billing” align=”center”]

billing

[icon image=”audio” align=”center”]

audio

[icon image=”movies” align=”center”]

movies

[icon image=”clipboard” align=”center”]

clipboard

[icon image=”bullseye” align=”center”]

bullseye

[clear]
[icon image=”stop” align=”center”]

stop

[icon image=”monitor” align=”center”]

monitor

[icon image=”news” align=”center”]

news

[icon image=”calculator” align=”center”]

calculator

[icon image=”direction” align=”center”]

direction

[icon image=”cart” align=”center”]

cart

[clear]
[icon image=”megaphone” align=”center”]

megaphone

[icon image=”license” align=”center”]

license

[icon image=”package” align=”center”]

package

[icon image=”secure” align=”center”]

secure

[icon image=”award” align=”center”]

award

[icon image=”mobile” align=”center”]

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, or even override some of the theme’s default ones, it’s quite easy.

In your Child theme’s main directory create a folder called “icons” and put any PNG icons you want in there.

So, for example, when you use [icon image=”example”] in your site, first the theme will look for:

Your Child Theme/icons/example.png

And then if this doesn’t exist, it will look for “example.png” within the Parent theme.

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/assets/images/shortcodes/icons/{your-icon-name}.png" class="alignleft" />

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *