How to add your own icon to icons shortcode

Posted in: ,

Overview

This article describes how to custom code your own icons into the Vision Shortcodes Plugin and the Sterling WordPress theme.

In this example we will use the 48×48 firefox icon available from Mozilla:

http://blog.mozilla.org/faaborg/2009/06/18/the-new-firefox-icon/

1) Navigate to the above mentioned url.

2) Right click on 48×48 firefox icon, and select “Save Image As”, and name it icon-firefox.png and save onto your computer.

3) ftp the icon-firefox.png to your icons folder in Sterling Theme on your web hosting server, the folder path is Sterling/images/shortcodes/icons/
- For Vision Plugin the path is Vision/images/shortcodes/icons

4) Use ftp to open up Sterling/framework/theme-specific/tinymce/config.php and go to line 248, you will see ‘icon-alarm’ => ‘Alarm’,
- For Vision Plugin the path is Vision/config.php and line 420

5) Add ‘icon-firefox’ => ‘Firefox’, before it. Remember to add in the comma. Now the codes will look something like this.

// Icons
$tt_shortcodes['icons'] = array(
	'params' => array(

		'style' => array(
			'type' => 'select',
			'label' => __('Icon', 'framework_localize'),
			'desc' => __('Select your desired icon', 'framework_localize'),
			'options' => array(
			       'icon-firefox' => 'Firefox',
				'icon-alarm' => 'Alarm',
				'icon-arrow-down-a' => 'Arrow Down',
				'icon-arrow-down-b' => 'Arrown Down 2',
				'icon-arrow-up-a' => 'Arrow Up',
				'icon-arrow-up-b' => 'Arrown Up 2',
				'icon-calculator' => 'Calculator',
				'icon-calendar-day' => 'Calendar - Day',
				'icon-calendar-month' => 'Calendar - Month',
				'icon-camera' => 'Camera',
				'icon-cart-add' => 'Cart - Ecommerce',
				'icon-caution' => 'Caution',
				'icon-cellphone' => 'Cell Phone',
				'icon-chat' => 'Chat (speech bubble)',
				'icon-chat-2' => 'Chat 2 (speech bubble)',
				'icon-checklist' => 'Checklist',
				'icon-checkmark' => 'Checkmark',
				'icon-clipboard' => 'Clipboard',
				'icon-clock' => 'Clock',
				'icon-gear' => 'Cog (sprocket)',
				'icon-contacts' => 'Contacts',
				'icon-crate' => 'Crate (wooden box)',
				'icon-database' => 'Database',
				'icon-document-edit' => 'Document edit',
				'icon-dvd' => 'DVD',
				'icon-email-send' => 'Email',
				'icon-flag' => 'Flag',
				'icon-games' => 'Games',
				'icon-globe' => 'Globe',
				'icon-globe-download' => 'Globe - download',
				'icon-globe-upload' => 'Globe - upload',
				'icon-drive' => 'Hard Drive (HDD)',
				'icon-hdtv' => 'HDTV',
				'icon-heart' => 'Heart',
				'icon-history' => 'History',
				'icon-home' => 'Home',
				'icon-info' => 'Info',
				'icon-laptop' => 'Laptop',
				'icon-light-on' => 'Lightbulb',
				'icon-lock-closed' => 'Lock',
				'icon-magnify' => 'Magnifying Glass',
				'icon-megaphone' => 'Megaphone',
				'icon-money' => 'Money',
				'icon-movie' => 'Movie',
				'icon-mp3' => 'MP3 Player',
				'icon-ms-word' => 'MS Word Document',
				'icon-music' => 'Music',
				'icon-network' => 'Network',
				'icon-news' => 'News',
				'icon-notebook' => 'Notebook',
				'icon-pdf' => 'PDF Document',
				'icon-photos' => 'Photos',
				'icon-notebook' => 'Notebook',
				'icon-refresh' => 'Refresh',
				'icon-rss' => 'RSS',
				'icon-shield-blue' => 'Shield (blue)',
				'icon-shield-green' => 'Shield (green)',
				'icon-smart-phone' => 'Smartphone',
				'icon-star' => 'Star',
				'icon-support' => 'Support',
				'icon-tools' => 'Tools',
				'icon-user-group' => 'Users',
				'icon-vcard' => 'vCard',
				'icon-video-camera' => 'Video Camera',
				'icon-x' => 'X'
			)
		),

6) Use ftp to open up Sterling/style.css.
- For Vision Plugin the path is Vision/vision-shortcodes.css

7) Go to line 3409 and add in the following codes. The css class must be the same as what you had entered in Sterling/framework/theme-specific/tinymce/config.php, which is icon-firefox. Make sure the image name is what you had saved the image as.
- For Vision Plugin the line is 1570. CSS class same as you entered in Vision/config.php

.icon-firefox{
background:url(images/shortcodes/icons/icon-firefox.png) 0 0 no-repeat;
}

For Sterling 2.1.4 and higher you must use :before in the CSS class like so:

.icon-firefox:before{
background:url(images/shortcodes/icons/icon-firefox.png) 0 0 no-repeat;
}

8 ) Login in to WordPress admin > Add Pages and Click on your shortcodes manager > icons and you will see the following.

9) Proceed to fill up the form and click insert shortcode button. Publish the page and view it.

Thats’ all! You can repeat the above steps to add more icons to your shortcodes manager.