Icon Shortcodes

Now you can easily add any of our 400+ built in icons to your posts and pages with our new icon shortcodes. Or if you prefer, you can even upload your own. Our Icon Shortcodes come in three flavors, single icons, icon teasers and icon banners.

1 Shortcode Generator
2 Single Icons
3 Icon Teasers
4 Icon Banners
5 Live Demos
6 Full Color Icon Pack
7 Mysitemyway Icon Packs
8 Additional Free Icon Packs

Shortcode Generator

The code snippets we provide here are for only for your convenience. You can just as easily select the icon you'd like to use in our shortcode generator popup shown below.

Learn More About Using Our Shortcode Generator

Single Icons

Insert any of the hundreds of icons we include anywhere on your site with the syntax shown below.
Click here to see all available icon "types"

Syntax:

// The "Leaf" icon from the "black" icon set
[icon style="black" type="Leaf"]

// The "lock" icon from the "full_color" icon set
[icon style="full_color" type="lock"]

// The "Wordpress" icon from the "inset_silver" icon set
[icon style="inset_silver" type="Wordpress"]

Options:

style      // This specifies the icon pack to use
type       // This specifies which icon to use within the icon pack
align      // Optional {align="left" or align="right"}

Icon Teasers

Icon teasers will fill whatever space you put them in so you can use them alone or wrap them in a column shortcodes to constrain their proportions.
Click here to see all available icon "types"

Wrapped in one_third example:

Icon Title

Lorem ipsum dolor sit amet. This is the icon description

Learn More

Icon Title

Lorem ipsum dolor sit amet. This is the icon description

Learn More

Icon Title

Lorem ipsum dolor sit amet. This is the icon description

Learn More

Unwrapped example:

Icon Title

Etiam auctor aliquam neque sed adipiscing. Nullam et sodales dolor. Praesent urna diam, sollicitudin vitae rhoncus elementum, dictum in lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Syntax:

//Wrapped in one_third example
[one_third]
[icon_teaser style="black" type="InfoAbout" title="Icon Title" link="#" link_text="Learn More"]
Lorem ipsum dolor sit amet. This is the icon description
[/icon_teaser]
[/one_third]
//Unwrappec Example
[icon_teaser style="inset_silver" type="Wordpress" title="Icon Header"]
Etiam auctor aliquam neque sed adipiscing. Nullam et sodales dolor. Praesent urna diam, sollicitudin vitae rhoncus elementum, dictum in lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
[/icon_teaser]

Options:

style      // This specifies the icon pack to use
type       // This specifies which icon to use within the icon pack
title      // Icon Teaser Title
link       // Icon Teaser Link
link_text  // Icon Teaser Link Text

Icon Banners

Icon banners can differ on a theme by theme and skin by skin basis, but there will always be the same 200 icon "types" for you to choose from.
Icon banners fill whatever space you put them in so you can use them alone or wrap them in a column shortcodes to constrain their proportions like the examples below:
Click here to see all available icon "types"

[one_half]
[icon_banner type="Leaf"]
[/one_half]

[one_third]
[icon_banner type="Leaf"]
[/one_third]

[one_fourth]
[icon_banner type="Leaf"]
[/one_fourth]

Syntax:

[icon_banner type="Leaf"]

Options:

type  // choose which icon to use from the 200 icons included

Live Demos

Many shortcode graphical styles vary on a theme by theme and skin by skin basis, so don't forget to check out the live demo of your specific theme, where you will find "get the code snippets" and more usage examples.

Full Color Icon Pack

This set includes 50 icons. You can get additional icons in this style here: http://www.jonasraskdesign.com/

type="address_books"
type="advanced"
type="archive"
type="back_alt"
type="calculator"
type="cash"
type="color"
type="Computer_On"
type="down_alt"
type="edit"
type="exclamation"
type="folder"
type="forward_alt"
type="Graphite_Desktop"
type="help"

type="iChat"
type="info"
type="iPhone"
type="library_bookmarked"
type="lock"
type="minus_white"
type="monitor"
type="moon_3"
type="movies_alt"
type="movies"
type="music_2"
type="new_mail"
type="picture"
type="Podcast"

type="refresh"
type="RSS_alt"
type="search"
type="server"
type="smiley_sad"
type="smiley"
type="splash_green"
type="star"
type="stop"
type="terminal"
type="trash"
type="up_alt"
type="user"
type="users"

Mysitemyway Icon Packs

All themes also come with at least two more icon packs containing the 200 icons "types" shown below. Typically these are greyscale, but you can download additional icon packs below to match all our core color variations:

Download Additional Icon Packs

Also, visit iconSweets & iconSweets2 to download the great photoshop shapes we used to makes these.

type="Abacus"
type="AccesDenied"
type="AddressBook"
type="Airplane"
type="AlarmBell"
type="AlarmClock"
type="Alert"
type="Alert2"
type="AmericanExpress"
type="Android"
type="Applications"
type="ArrowDown"
type="ArrowLeft"
type="ArrowRight"
type="ArrowUp"
type="Balloons"
type="Bandaid"
type="BarGraph"
type="Battery"
type="BillsStack"
type="Blackberry"
type="Bluetooth"
type="Bluray"
type="Book"
type="Bookmark"
type="Buildings"
type="Calculator"
type="Calendar"
type="Camera"
type="Car"
type="Cart"
type="Chair"
type="Chart"
type="Check"
type="Chemical"
type="Chrome"
type="Clapboard"
type="Clipboard"
type="Clock"
type="Cloud"
type="CloudDownload"
type="CloudUpload"
type="Computer"
type="Construction"
type="CreateWrite"
type="Cross"
type="Cup"
type="Delicious"
type="Digg"
type="Documents"
type="DogTags"
type="Download"
type="Dribbble"
type="Dropbox"
type="Drupal"
type="DVD"
type="Excel"
type="Exit"
type="ExpressionEngine"
type="Eyedropper"
type="Facebook"
type="Favorite"
type="FileWord"
type="FilmCamera"
type="FilmStrip"
type="Firefox"
type="Flag"

type="Folder"
type="Footprints"
type="Gear"
type="Gears"
type="GKey"
type="Globe"
type="Globe2"
type="Graph"
type="Group"
type="HardDisk"
type="HD"
type="Headphones"
type="Heart"
type="Help"
type="Home"
type="HourGlass"
type="iChat"
type="iDeal"
type="Image"
type="ImageFile"
type="Images"
type="InfoAbout"
type="iPad"
type="iPhone"
type="iPodNano"
type="iPodShuffle"
type="Joomla"
type="Key"
type="Keyboard"
type="Lamp"
type="Laptop"
type="LastFM"
type="Leaf"
type="Lightbulb"
type="Link"
type="Link2"
type="Linux"
type="List"
type="ListwImages"
type="LoadingBar"
type="Locked"
type="Locked2"
type="LockedFolder"
type="MacOS"
type="MagnifyingGlass"
type="Mail"
type="Mail2"
type="Map"
type="Marker"
type="Mastercard"
type="MedicalCase"
type="Megaphone"
type="Microphone"
type="Minus"
type="MobilePhone"
type="MonthCalendar"
type="Mouse"
type="MusicalKeyboard"
type="MusicFolder"
type="MySpace"
type="NoteBook"
type="PaintBrush"
type="Paperclip"
type="Paypal"
type="PDF"
type="Pencil"
type="PersonalFolder"

type="Phone"
type="PhoneHook"
type="PiggyBank"
type="Platediner"
type="Plug"
type="Plus"
type="PostCard"
type="Power"
type="PowerPoint"
type="Presentation"
type="Preview"
type="PriceTag"
type="Printer"
type="Quicktime"
type="Recycle"
type="RecycledBag"
type="Refresh"
type="Refresh2"
type="Repeat"
type="Robot"
type="RSS"
type="Ruler"
type="Safari"
type="ScanLabel"
type="Scissors"
type="SD"
type="Settings"
type="Shades"
type="ShoppingBag"
type="ShoppingBasket"
type="ShoppingCart"
type="Shuffle"
type="SignPost"
type="Skype"
type="Sound"
type="SpeechBubble"
type="SpeechBubbles"
type="StopWatch"
type="StubleUpon"
type="Suitcase"
type="Tag"
type="Tags"
type="Tools"
type="Trashcan"
type="Tree"
type="Truck"
type="Tumbler"
type="Twitter"
type="Umbrella"
type="UniversalAcces"
type="Unlocked"
type="Upload"
type="USB"
type="User"
type="UserComment"
type="Users"
type="Vcard"
type="Vimeo"
type="Visa"
type="Wifi"
type="Wifisignal"
type="Windows"
type="WineGlass"
type="Wordpress"
type="YouTube"
type="Zip"

Additional Free Icon Packs

To install additional free icon styles for use with our icon shortcodes follow the instructions below.

Download and unzip the icon packs.
Upload the folder containing all the icons that you just unzipped to your theme's /images/icons/ directory.
Now you should see a new tab when using your shortcode generator that contains your new icon style.

Retrieved from "http://mysitemyway.com/docs/index.php/Icon_Shortcodes"