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
accepted
add
app
arrow_down
arrow_down_green
arrow_left
arrow_left_green
arrow_right
arrow_right_green
arrow_up
arrow_up_green
beer
blue_speech_bubble
book
box
box_download
box_upload
camera
cancel
cd
circle_blue
circle_green
circle_orange
circle_red
clock
coffee
coffee_mug
comment
computer
cross
database
floppy_disk
folder
globe
heart
home
image
lightbulb
lock
lock_open
mouse
navigate
newspaper
paper
paper_and_pencil
paper_content
paper_content_chart
paper_content_pencil
pencil
pie_chart
printer
questionmark
refresh
rss
search
smile_grin
smile_sad
spanner
speech_bubble
star
star_half
star_off
table
tabs
thumbs_down
thumbs_up
usb
user
users_two
warning
iphone
macbook
wordpress
html5
colors
support
analytics
billing
audio
movies
clipboard
bullseye
stop
monitor
news
calculator
direction
cart
megaphone
license
package
secure
award
mobile
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" />