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
- width: width used on img tag, default is 45
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/frontend/assets/images/shortcodes/icons/{your-icon-name}.png" class="alignleft" />