Menu Social Icons - Version 1.3.9

Version Description

Fix: Change use_latest filter to request "latest" version of FontAwesome, rather than stopping at 4.0.0. Current version is 4.0.3.

Release Info

Developer	pdclark
Plugin	Menu Social Icons
Version	1.3.9
Comparing to
See all releases

Code changes from version 1.3.7 to 1.3.9

Files changed (26) hide show

classes/msi-admin.php +72 -72
classes/msi-bwp-compatibility.php +11 -11
classes/msi-frontend.php +280 -280
css/menu-social-icons-admin.css +45 -45
font-awesome-test.html +266 -266
js/menu-social-icons-admin.js +194 -194
plugin.php +49 -49
readme.txt +241 -233
trunk/classes/msi-admin.php +73 -0
trunk/classes/msi-bwp-compatibility.php +12 -0
trunk/classes/msi-frontend.php +281 -0
trunk/css/menu-social-icons-admin.css +45 -0
trunk/font-awesome-test.html +267 -0
trunk/js/menu-social-icons-admin.js +195 -0
trunk/msi-templates/hide-text.php +1 -0
trunk/msi-templates/icon.php +1 -0
trunk/msi-templates/stylesheet.php +6 -0
trunk/plugin.php +49 -0
trunk/readme.txt +241 -0
trunk/screenshot-1.png +0 -0
trunk/screenshot-2.png +0 -0
trunk/screenshot-3.png +0 -0
trunk/screenshot-4.png +0 -0
trunk/screenshot-5.png +0 -0
trunk/screenshot-6.png +0 -0
trunk/screenshot-7.png +0 -0

classes/msi-admin.php CHANGED Viewed

@@ -1,73 +1,73 @@
-            -
            <?php
-            -
-            -
            class MSI_Admin {
-            -
            	/**
-            -
            	 * @var Storm_Menu_Social_Icons Instance of the class.
-            -
            	 */
-            -
            	private static $instance = false;
-            -
-            -
            	/**
-            -
            	 * Don't use this. Use ::get_instance() instead.
-            -
            	 */
-            -
            	public function __construct() {
-            -
            		if ( !self::$instance ) {
-            -
            			$message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
-            -
            			wp_die( $message );
-            -
            		}
-            -
            	}
-            -
-            -
            	public static function get_instance() {
-            -
            		if ( !is_a( self::$instance, __CLASS__ ) ) {
-            -
            			self::$instance = true;
-            -
            			self::$instance = new self();
-            -
            			self::$instance->init();
-            -
            		}
-            -
            		return self::$instance;
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Initial setup. Called by get_instance.
-            -
            	 */
-            -
            	protected function init() {
-            -
-            -
            		add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
-            -
-            -
            	}
-            -
-            -
            	public function admin_enqueue_scripts( $page ) {
-            -
-            -
            		if ( 'nav-menus.php' == $page ) {
-            -
            			$msi_frontend = MSI_Frontend::get_instance();
-            -
-            -
            			$msi_frontend->wp_enqueue_scripts();
-            -
-            -
            			wp_enqueue_script( 'menu-social-icons-admin', plugins_url( 'js/menu-social-icons-admin.js', MSI_PLUGIN_FILE ), array( 'jquery' ), MSI_VERSION, true );
-            -
            			wp_enqueue_style(  'menu-social-icons-admin', plugins_url( 'css/menu-social-icons-admin.css', MSI_PLUGIN_FILE ), array(), MSI_VERSION );
-            -
-            -
            			wp_localize_script( 'menu-social-icons-admin', 'MenuSocialIconsNetworks', $this->get_networks() );
-            -
            		}
-            -
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Get networks array to pass to javascript
-            -
            	 * Set icon-sign values as icon values if icon-sign in use.
-            -
            	 * Strip remaining icon-sign values
-            -
            	 */
-            -
            	public function get_networks() {
-            -
            		$msi_frontend = MSI_Frontend::get_instance();
-            -
-            -
            		$networks = $msi_frontend->networks;
-            -
-            -
            		foreach ( $networks as &$network ) {
-            -
            			if ( 'icon-sign' == $msi_frontend->type ) {
-            -
            				$network['icon'] = $network['icon-sign'];
-            -
            			}
-            -
            			unset( $network['icon-sign'] );
-            -
            		}
-            -
-            -
            		return $networks;
-            -
            	}
-            -
-            -
+            }


1	+ <?php
2	+
3	+ class MSI_Admin {
4	+ /**
5	+ * @var Storm_Menu_Social_Icons Instance of the class.
6	+ */
7	+ private static $instance = false;
8	+
9	+ /**
10	+ * Don't use this. Use ::get_instance() instead.
11	+ */
12	+ public function __construct() {
13	+ if ( !self::$instance ) {
14	+ $message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
15	+ wp_die( $message );
16	+ }
17	+ }
18	+
19	+ public static function get_instance() {
20	+ if ( !is_a( self::$instance, __CLASS__ ) ) {
21	+ self::$instance = true;
22	+ self::$instance = new self();
23	+ self::$instance->init();
24	+ }
25	+ return self::$instance;
26	+ }
27	+
28	+ /**
29	+ * Initial setup. Called by get_instance.
30	+ */
31	+ protected function init() {
32	+
33	+ add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
34	+
35	+ }
36	+
37	+ public function admin_enqueue_scripts( $page ) {
38	+
39	+ if ( 'nav-menus.php' == $page ) {
40	+ $msi_frontend = MSI_Frontend::get_instance();
41	+
42	+ $msi_frontend->wp_enqueue_scripts();
43	+
44	+ wp_enqueue_script( 'menu-social-icons-admin', plugins_url( 'js/menu-social-icons-admin.js', MSI_PLUGIN_FILE ), array( 'jquery' ), MSI_VERSION, true );
45	+ wp_enqueue_style( 'menu-social-icons-admin', plugins_url( 'css/menu-social-icons-admin.css', MSI_PLUGIN_FILE ), array(), MSI_VERSION );
46	+
47	+ wp_localize_script( 'menu-social-icons-admin', 'MenuSocialIconsNetworks', $this->get_networks() );
48	+ }
49	+
50	+ }
51	+
52	+ /**
53	+ * Get networks array to pass to javascript
54	+ * Set icon-sign values as icon values if icon-sign in use.
55	+ * Strip remaining icon-sign values
56	+ */
57	+ public function get_networks() {
58	+ $msi_frontend = MSI_Frontend::get_instance();
59	+
60	+ $networks = $msi_frontend->networks;
61	+
62	+ foreach ( $networks as &$network ) {
63	+ if ( 'icon-sign' == $msi_frontend->type ) {
64	+ $network['icon'] = $network['icon-sign'];
65	+ }
66	+ unset( $network['icon-sign'] );
67	+ }
68	+
69	+ return $networks;
70	+ }
71	+
72	+
73	}

classes/msi-bwp-compatibility.php CHANGED Viewed

@@ -1,12 +1,12 @@
-            -
            <?php
-            -
            /**
-            -
             * Better WordPress Minify fails to recognize URLs starting with "//"
-            -
             * Force BWP to ignore NetDNA-hosted fontawesome scripts.
-            -
             *
-            -
             * @see http://wordpress.org/plugins/bwp-minify/
-            -
             */
-            -
            function msi_bwp_dont_minify_fontawesome($excluded) {
-            -
            	$excluded = array('fontawesome', 'fontawesome-ie');
-            -
            	return $excluded;
-            -
            }
             add_filter('bwp_minify_style_ignore', 'msi_bwp_dont_minify_fontawesome');


1	+ <?php
2	+ /**
3	+ * Better WordPress Minify fails to recognize URLs starting with "//"
4	+ * Force BWP to ignore NetDNA-hosted fontawesome scripts.
5	+ *
6	+ * @see http://wordpress.org/plugins/bwp-minify/
7	+ */
8	+ function msi_bwp_dont_minify_fontawesome($excluded) {
9	+ $excluded = array('fontawesome', 'fontawesome-ie');
10	+ return $excluded;
11	+ }
12	add_filter('bwp_minify_style_ignore', 'msi_bwp_dont_minify_fontawesome');

classes/msi-frontend.php CHANGED Viewed

@@ -1,281 +1,281 @@
-            -
            <?php
-            -
-            -
            class MSI_Frontend {
-            -
-            -
            	/**
-            -
            	 * Should we hide the original menu text, or put the icon before it?
-            -
            	 * Override with storm_social_icons_hide_text filter
-            -
            	 *
-            -
            	 * @var bool
-            -
            	 */
-            -
            	var $hide_text = true;
-            -
-            -
            	/**
-            -
            	 * Contains 3.2.1 FontAwesome icons only. See $networks_latest for additional 4.0 icons.
-            -
            	 * @var array links social site URLs with CSS classes for icons
-            -
            	 */
-            -
            	var $networks = array(
-            -
            		'bitbucket.org'      => array( 'name' => 'Bitbucket',      'class' => 'bitbucket',     'icon' => 'icon-bitbucket',     'icon-sign' => 'icon-bitbucket-sign'   ),
-            -
            		'dribbble.com'       => array( 'name' => 'Dribbble',       'class' => 'dribbble',      'icon' => 'icon-dribbble',      'icon-sign' => 'icon-dribbble'         ),
-            -
            		'dropbox.com'        => array( 'name' => 'Dropbox',        'class' => 'dropbox',       'icon' => 'icon-dropbox',       'icon-sign' => 'icon-dropbox'          ),
-            -
            		'facebook.com'       => array( 'name' => 'Facebook',       'class' => 'facebook',      'icon' => 'icon-facebook',      'icon-sign' => 'icon-facebook-sign'    ),
-            -
            		'flickr.com'         => array( 'name' => 'Flickr',         'class' => 'flickr',        'icon' => 'icon-flickr',        'icon-sign' => 'icon-flickr'           ),
-            -
            		'foursquare.com'     => array( 'name' => 'Foursquare',     'class' => 'foursquare',    'icon' => 'icon-foursquare',    'icon-sign' => 'icon-foursquare'       ),
-            -
            		'github.com'         => array( 'name' => 'Github',         'class' => 'github',        'icon' => 'icon-github',        'icon-sign' => 'icon-github-sign'      ),
-            -
            		'gittip.com'         => array( 'name' => 'GitTip',         'class' => 'gittip',        'icon' => 'icon-gittip',        'icon-sign' => 'icon-gittip'           ),
-            -
            		'instagr.am'         => array( 'name' => 'Instagram',      'class' => 'instagram',     'icon' => 'icon-instagram',     'icon-sign' => 'icon-instagram'        ),
-            -
            		'instagram.com'      => array( 'name' => 'Instagram',      'class' => 'instagram',     'icon' => 'icon-instagram',     'icon-sign' => 'icon-instagram'        ),
-            -
            		'linkedin.com'       => array( 'name' => 'LinkedIn',       'class' => 'linkedin',      'icon' => 'icon-linkedin',      'icon-sign' => 'icon-linkedin-sign'    ),
-            -
            		'mailto:'            => array( 'name' => 'Email',          'class' => 'envelope',      'icon' => 'icon-envelope',      'icon-sign' => 'icon-envelope-alt'     ),
-            -
            		'pinterest.com'      => array( 'name' => 'Pinterest',      'class' => 'pinterest',     'icon' => 'icon-pinterest',     'icon-sign' => 'icon-pinterest-sign'   ),
-            -
            		'plus.google.com'    => array( 'name' => 'Google+',        'class' => 'google-plus',   'icon' => 'icon-google-plus',   'icon-sign' => 'icon-google-plus-sign' ),
-            -
            		'renren.com'         => array( 'name' => 'RenRen',         'class' => 'renren',        'icon' => 'icon-renren',        'icon-sign' => 'icon-renren'           ),
-            -
            		'stackoverflow.com'  => array( 'name' => 'Stack Exchange', 'class' => 'stackexchange', 'icon' => 'icon-stackexchange', 'icon-sign' => 'icon-stackexchange'    ),
-            -
            		'trello.com'         => array( 'name' => 'Trello',         'class' => 'trello',        'icon' => 'icon-trello',        'icon-sign' => 'icon-trello'           ),
-            -
            		'tumblr.com'         => array( 'name' => 'Tumblr',         'class' => 'tumblr',        'icon' => 'icon-tumblr',        'icon-sign' => 'icon-tumblr'           ),
-            -
            		'twitter.com'        => array( 'name' => 'Twitter',        'class' => 'twitter',       'icon' => 'icon-twitter',       'icon-sign' => 'icon-twitter-sign'     ),
-            -
            		'vk.com'             => array( 'name' => 'VK',             'class' => 'vk',            'icon' => 'icon-vk',            'icon-sign' => 'icon-vk'               ),
-            -
            		'weibo.com'          => array( 'name' => 'Weibo',          'class' => 'weibo',         'icon' => 'icon-weibo',         'icon-sign' => 'icon-weibo'            ),
-            -
            		'xing.com'           => array( 'name' => 'Xing',           'class' => 'xing',          'icon' => 'icon-xing',          'icon-sign' => 'icon-xing'             ),
-            -
            		'youtu.be'           => array( 'name' => 'YouTube',        'class' => 'youtube',       'icon' => 'icon-youtube',       'icon-sign' => 'icon-youtube-sign'     ),
-            -
            		'youtube.com'        => array( 'name' => 'YouTube',        'class' => 'youtube',       'icon' => 'icon-youtube',       'icon-sign' => 'icon-youtube-sign'     ),
-            -
            	);
-            -
-            -
            	/**
-            -
            	 * Contains 4.0+ FontAwesome icons only.
-            -
            	 * @var array links social site URLs with CSS classes for icons
-            -
            	 */
-            -
            	var $networks_latest = array(
-            -
            		'stackoverflow.com'  => array( 'name' => 'Stack Overflow', 'class' => 'stack-overflow', 'icon' => 'fa fa-stack-overflow', 'icon-sign' => 'fa fa-stack-overflow' ),
-            -
            		'stackexchange.com'  => array( 'name' => 'Stack Exchange', 'class' => 'stack-exchange', 'icon' => 'fa fa-stack-exchange', 'icon-sign' => 'fa fa-stack-exchange' ),
-            -
            		'vimeo.com'          => array( 'name' => 'Vimeo',          'class' => 'vimeo',          'icon' => 'fa fa-vimeo-square',   'icon-sign' => 'fa fa-vimeo-square'   ),
-            -
            		'mailto:'            => array( 'name' => 'Email',          'class' => 'envelope',       'icon' => 'fa fa-envelope',       'icon-sign' => 'fa fa-envelope-o'     ),
-            -
            	);
-            -
-            -
            	/**
-            -
            	 * Class to apply to the <li> of all social menu items
-            -
            	 */
-            -
            	var $li_class = 'social-icon';
-            -
-            -
            	/**
-            -
            	 * FontAwesome 4.0+ -- Size options available for icon output
-            -
            	 * These are sizes that render as "pixel perfect" according to FontAwesome.
-            -
            	 */
-            -
            	var $icon_sizes = array(
-            -
            		'normal' => '',
-            -
            		'large'  => 'fa-lg',
-            -
            		'2x'     => 'fa-2x',
-            -
            		'3x'     => 'fa-3x',
-            -
            		'4x'     => 'fa-4x',
-            -
            		'5x'     => 'fa-5x',
-            -
            	);
-            -
-            -
            	/**
-            -
            	 * FontAwesome 3.2.1 -- Size options available for icon output
-            -
            	 * These are sizes that render as "pixel perfect" according to FontAwesome.
-            -
            	 */
-            -
            	var $legacy_icon_sizes = array(
-            -
            		'normal' => '',
-            -
            		'large'  => 'icon-large',
-            -
            		'2x'     => 'icon-2x',
-            -
            		'3x'     => 'icon-3x',
-            -
            		'4x'     => 'icon-4x',
-            -
            	);
-            -
-            -
            	/**
-            -
            	 * Size of the icons to display.
-            -
            	 * Override with storm_social_icons_size filter
-            -
            	 *
-            -
            	 * @var string normal|large|2x|3x|4x
-            -
            	 */
-            -
            	var $size = '2x';
-            -
-            -
            	/**
-            -
            	 * Display normal icons, or icons cut out of a box (sign) shape?
-            -
            	 * Override with storm_social_icons_type filter
-            -
            	 *
-            -
            	 * @var string icon|icon-sign
-            -
            	 */
-            -
            	var $type = 'icon';
-            -
-            -
            	/**
-            -
            	 * @var bool If true, use FontAwesome 4.0+, which drops IE7, but adds Vimeo
-            -
            	 */
-            -
            	var $use_latest = false;
-            -
-            -
            	/**
-            -
            	 * @var Storm_Menu_Social_Icons Instance of the class.
-            -
            	 */
-            -
            	private static $instance = false;
-            -
-            -
            	/**
-            -
            	 * Don't use this. Use ::get_instance() instead.
-            -
            	 */
-            -
            	public function __construct() {
-            -
            		if ( !self::$instance ) {
-            -
            			$message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
-            -
            			wp_die( $message );
-            -
            		}
-            -
            	}
-            -
-            -
            	public static function get_instance() {
-            -
            		if ( !is_a( self::$instance, __CLASS__ ) ) {
-            -
            			self::$instance = true;
-            -
            			self::$instance = new self();
-            -
            			self::$instance->init();
-            -
            		}
-            -
            		return self::$instance;
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Initial setup. Called by get_instance.
-            -
            	 */
-            -
            	protected function init() {
-            -
-            -
            		// Option to update to FontAwesome 4.0+ format (drops IE7 support)
-            -
            		$this->use_latest = apply_filters( 'storm_social_icons_use_latest', $this->use_latest );
-            -
-            -
            		if ( $this->use_latest ) {
-            -
            			add_filter( 'storm_social_icons_networks', array( $this, 'update_network_classes' ), 1000 );
-            -
            		}
-            -
-            -
            		$this->size         = apply_filters( 'storm_social_icons_size',         $this->size );
-            -
            		$this->type         = apply_filters( 'storm_social_icons_type',         $this->type );
-            -
            		$this->hide_text    = apply_filters( 'storm_social_icons_hide_text',    $this->hide_text );
-            -
            		$this->networks     = apply_filters( 'storm_social_icons_networks',     $this->networks );
-            -
-            -
            		add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
-            -
            		add_action( 'wp_print_scripts', array( $this, 'wp_print_scripts' ) );
-            -
-            -
            		add_filter( 'wp_nav_menu_objects', array( $this, 'wp_nav_menu_objects' ), 5, 2 );
-            -
-            -
            		// Shortcode for testing all fontawesome icons: [fontawesometest]
-            -
            		add_shortcode( 'fontawesometest', array( $this, 'shortcode_fontawesometest' ) );
-            -
            		add_action( 'fontawesometest', array( $this, 'fontawesometest' ) );
-            -
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Load FontAwesome from NetDNA's Content Deliver Network (faster, likely to be cached)
-            -
            	 * @see http://www.bootstrapcdn.com/#tab_fontawesome
-            -
            	 */
-            -
            	public function wp_enqueue_scripts() {
-            -
-            -
            		if ( $this->use_latest ) {
-            -
-            -
            			// FontAwesome latest. Drops IE7 support.
-            -
            			wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css', array(), MSI_VERSION, 'all' );
-            -
-            -
            		}else {
-            -
-            -
            			// FontAwesome 3.2.1 -- support IE7, but lacks Vimeo
-            -
            			global $wp_styles;
-            -
            			wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css', array(), MSI_VERSION, 'all' );
-            -
            			wp_enqueue_style( 'fontawesome-ie', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css', array( 'fontawesome' ), MSI_VERSION );
-            -
-            -
            			// Internet Explorer conditional comment
-            -
            			$wp_styles->add_data( 'fontawesome-ie', 'conditional', 'IE 7' );
-            -
-            -
            		}
-            -
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Hide text visually, but keep available for screen readers.
-            -
            	 * Just a few lines of stylesheet, so loading inline rather than adding another HTTP request.
-            -
            	 */
-            -
            	public function wp_print_scripts() {
-            -
            		?>
-            -
            		<style>
-            -
            			/* Accessible for screen readers but hidden from view */
-            -
            			.fa-hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
-            -
            			.rtl .fa-hidden { left:10000px; }
-            -
            			.fa-showtext { margin-right: 5px; }
-            -
            		</style>
-            -
            		<?php
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Get icon HTML with appropriate classes depending on size and icon type
-            -
            	 */
-            -
            	public function get_icon( $network ) {
-            -
-            -
            		// Switch between legacy or current icon size classes
-            -
            		$icon_sizes = ( $this->use_latest ) ?  $this->icon_sizes : $this->legacy_icon_sizes;
-            -
-            -
            		$size = $icon_sizes[ $this->size ];
-            -
            		$icon = $network[ $this->type ];
-            -
            		$show_text = $this->hide_text ? '' : 'fa-showtext';
-            -
-            -
            		$html = "<i class='$size $icon $show_text'></i>";
-            -
-            -
            		return apply_filters( 'storm_social_icons_icon_html', $html, $size, $icon, $show_text );
-            -
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Find social links in top-level menu items, add icon HTML
-            -
            	 */
-            -
            	public function wp_nav_menu_objects( $sorted_menu_items, $args ){
-            -
-            -
            		foreach( $sorted_menu_items as &$item ) {
-            -
            			if ( 0 != $item->menu_item_parent ) {
-            -
            				// Skip submenu items
-            -
            				continue;
-            -
            			}
-            -
-            -
            			foreach( $this->networks as $url => $network ) {
-            -
            				if ( false !== strpos( $item->url, $url ) ) {
-            -
-            -
            					$item->classes[] = $this->li_class;
-            -
            					$item->classes[] = $network['class'];
-            -
-            -
            					if ( $this->hide_text ) {
-            -
            						$html = "<span class='fa-hidden'>$title</span>";
-            -
            						$item->title = apply_filters( 'storm_social_icons_title_html', $html, $item->title );
-            -
            					}
-            -
-            -
            					$item->title = $this->get_icon( $network ) . $item->title ;
-            -
            				}
-            -
            			}
-            -
            		}
-            -
-            -
            		return $sorted_menu_items;
-            -
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Change size classes from 3.2.1 format to 4.0+ format.
-            -
            	 *
-            -
            	 * @param  array $networks See $this->$networks
-            -
            	 * @return array $networks Filtered to change "icon-" to "fa fa-"
-            -
            	 */
-            -
            	public function update_network_classes( $networks ) {
-            -
-            -
            		foreach ( $networks as $url => &$values ) {
-            -
            			$values['icon']      = str_replace( 'icon-', 'fa fa-', $values['icon'] );
-            -
            			$values['icon-sign'] = str_replace( 'icon-', 'fa fa-', $values['icon-sign'] );
-            -
            			$values['icon-sign'] = str_replace( '-sign', '-square', $values['icon-sign'] );
-            -
            		}
-            -
-            -
            		$networks = array_merge( $networks, $this->networks_latest );
-            -
-            -
            		return $networks;
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Test output of all FontAwesome icons
-            -
            	 */
-            -
            	public function fontawesometest( $args ) {
-            -
            		include dirname( __FILE__ ) . '/font-awesome-test.html';
-            -
            	}
-            -
-            -
            	/**
-            -
            	 * Shortcode to test output of all FontAwesome icons
-            -
            	 */
-            -
            	public function shortcode_fontawesometest( $args ) {
-            -
            		ob_start();
-            -
            		$this->fontawesometest();
-            -
            		return ob_get_clean();
-            -
            	}
+            }


1	+ <?php
2	+
3	+ class MSI_Frontend {
4	+
5	+ /**
6	+ * Should we hide the original menu text, or put the icon before it?
7	+ * Override with storm_social_icons_hide_text filter
8	+ *
9	+ * @var bool
10	+ */
11	+ var $hide_text = true;
12	+
13	+ /**
14	+ * Contains 3.2.1 FontAwesome icons only. See $networks_latest for additional 4.0 icons.
15	+ * @var array links social site URLs with CSS classes for icons
16	+ */
17	+ var $networks = array(
18	+ 'bitbucket.org' => array( 'name' => 'Bitbucket', 'class' => 'bitbucket', 'icon' => 'icon-bitbucket', 'icon-sign' => 'icon-bitbucket-sign' ),
19	+ 'dribbble.com' => array( 'name' => 'Dribbble', 'class' => 'dribbble', 'icon' => 'icon-dribbble', 'icon-sign' => 'icon-dribbble' ),
20	+ 'dropbox.com' => array( 'name' => 'Dropbox', 'class' => 'dropbox', 'icon' => 'icon-dropbox', 'icon-sign' => 'icon-dropbox' ),
21	+ 'facebook.com' => array( 'name' => 'Facebook', 'class' => 'facebook', 'icon' => 'icon-facebook', 'icon-sign' => 'icon-facebook-sign' ),
22	+ 'flickr.com' => array( 'name' => 'Flickr', 'class' => 'flickr', 'icon' => 'icon-flickr', 'icon-sign' => 'icon-flickr' ),
23	+ 'foursquare.com' => array( 'name' => 'Foursquare', 'class' => 'foursquare', 'icon' => 'icon-foursquare', 'icon-sign' => 'icon-foursquare' ),
24	+ 'github.com' => array( 'name' => 'Github', 'class' => 'github', 'icon' => 'icon-github', 'icon-sign' => 'icon-github-sign' ),
25	+ 'gittip.com' => array( 'name' => 'GitTip', 'class' => 'gittip', 'icon' => 'icon-gittip', 'icon-sign' => 'icon-gittip' ),
26	+ 'instagr.am' => array( 'name' => 'Instagram', 'class' => 'instagram', 'icon' => 'icon-instagram', 'icon-sign' => 'icon-instagram' ),
27	+ 'instagram.com' => array( 'name' => 'Instagram', 'class' => 'instagram', 'icon' => 'icon-instagram', 'icon-sign' => 'icon-instagram' ),
28	+ 'linkedin.com' => array( 'name' => 'LinkedIn', 'class' => 'linkedin', 'icon' => 'icon-linkedin', 'icon-sign' => 'icon-linkedin-sign' ),
29	+ 'mailto:' => array( 'name' => 'Email', 'class' => 'envelope', 'icon' => 'icon-envelope', 'icon-sign' => 'icon-envelope-alt' ),
30	+ 'pinterest.com' => array( 'name' => 'Pinterest', 'class' => 'pinterest', 'icon' => 'icon-pinterest', 'icon-sign' => 'icon-pinterest-sign' ),
31	+ 'plus.google.com' => array( 'name' => 'Google+', 'class' => 'google-plus', 'icon' => 'icon-google-plus', 'icon-sign' => 'icon-google-plus-sign' ),
32	+ 'renren.com' => array( 'name' => 'RenRen', 'class' => 'renren', 'icon' => 'icon-renren', 'icon-sign' => 'icon-renren' ),
33	+ 'stackoverflow.com' => array( 'name' => 'Stack Exchange', 'class' => 'stackexchange', 'icon' => 'icon-stackexchange', 'icon-sign' => 'icon-stackexchange' ),
34	+ 'trello.com' => array( 'name' => 'Trello', 'class' => 'trello', 'icon' => 'icon-trello', 'icon-sign' => 'icon-trello' ),
35	+ 'tumblr.com' => array( 'name' => 'Tumblr', 'class' => 'tumblr', 'icon' => 'icon-tumblr', 'icon-sign' => 'icon-tumblr' ),
36	+ 'twitter.com' => array( 'name' => 'Twitter', 'class' => 'twitter', 'icon' => 'icon-twitter', 'icon-sign' => 'icon-twitter-sign' ),
37	+ 'vk.com' => array( 'name' => 'VK', 'class' => 'vk', 'icon' => 'icon-vk', 'icon-sign' => 'icon-vk' ),
38	+ 'weibo.com' => array( 'name' => 'Weibo', 'class' => 'weibo', 'icon' => 'icon-weibo', 'icon-sign' => 'icon-weibo' ),
39	+ 'xing.com' => array( 'name' => 'Xing', 'class' => 'xing', 'icon' => 'icon-xing', 'icon-sign' => 'icon-xing' ),
40	+ 'youtu.be' => array( 'name' => 'YouTube', 'class' => 'youtube', 'icon' => 'icon-youtube', 'icon-sign' => 'icon-youtube-sign' ),
41	+ 'youtube.com' => array( 'name' => 'YouTube', 'class' => 'youtube', 'icon' => 'icon-youtube', 'icon-sign' => 'icon-youtube-sign' ),
42	+ );
43	+
44	+ /**
45	+ * Contains 4.0+ FontAwesome icons only.
46	+ * @var array links social site URLs with CSS classes for icons
47	+ */
48	+ var $networks_latest = array(
49	+ 'stackoverflow.com' => array( 'name' => 'Stack Overflow', 'class' => 'stack-overflow', 'icon' => 'fa fa-stack-overflow', 'icon-sign' => 'fa fa-stack-overflow' ),
50	+ 'stackexchange.com' => array( 'name' => 'Stack Exchange', 'class' => 'stack-exchange', 'icon' => 'fa fa-stack-exchange', 'icon-sign' => 'fa fa-stack-exchange' ),
51	+ 'vimeo.com' => array( 'name' => 'Vimeo', 'class' => 'vimeo', 'icon' => 'fa fa-vimeo-square', 'icon-sign' => 'fa fa-vimeo-square' ),
52	+ 'mailto:' => array( 'name' => 'Email', 'class' => 'envelope', 'icon' => 'fa fa-envelope', 'icon-sign' => 'fa fa-envelope-o' ),
53	+ );
54	+
55	+ /**
56	+ * Class to apply to the <li> of all social menu items
57	+ */
58	+ var $li_class = 'social-icon';
59	+
60	+ /**
61	+ * FontAwesome 4.0+ -- Size options available for icon output
62	+ * These are sizes that render as "pixel perfect" according to FontAwesome.
63	+ */
64	+ var $icon_sizes = array(
65	+ 'normal' => '',
66	+ 'large' => 'fa-lg',
67	+ '2x' => 'fa-2x',
68	+ '3x' => 'fa-3x',
69	+ '4x' => 'fa-4x',
70	+ '5x' => 'fa-5x',
71	+ );
72	+
73	+ /**
74	+ * FontAwesome 3.2.1 -- Size options available for icon output
75	+ * These are sizes that render as "pixel perfect" according to FontAwesome.
76	+ */
77	+ var $legacy_icon_sizes = array(
78	+ 'normal' => '',
79	+ 'large' => 'icon-large',
80	+ '2x' => 'icon-2x',
81	+ '3x' => 'icon-3x',
82	+ '4x' => 'icon-4x',
83	+ );
84	+
85	+ /**
86	+ * Size of the icons to display.
87	+ * Override with storm_social_icons_size filter
88	+ *
89	+ * @var string normal\|large\|2x\|3x\|4x
90	+ */
91	+ var $size = '2x';
92	+
93	+ /**
94	+ * Display normal icons, or icons cut out of a box (sign) shape?
95	+ * Override with storm_social_icons_type filter
96	+ *
97	+ * @var string icon\|icon-sign
98	+ */
99	+ var $type = 'icon';
100	+
101	+ /**
102	+ * @var bool If true, use FontAwesome 4.0+, which drops IE7, but adds Vimeo
103	+ */
104	+ var $use_latest = false;
105	+
106	+ /**
107	+ * @var Storm_Menu_Social_Icons Instance of the class.
108	+ */
109	+ private static $instance = false;
110	+
111	+ /**
112	+ * Don't use this. Use ::get_instance() instead.
113	+ */
114	+ public function __construct() {
115	+ if ( !self::$instance ) {
116	+ $message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
117	+ wp_die( $message );
118	+ }
119	+ }
120	+
121	+ public static function get_instance() {
122	+ if ( !is_a( self::$instance, __CLASS__ ) ) {
123	+ self::$instance = true;
124	+ self::$instance = new self();
125	+ self::$instance->init();
126	+ }
127	+ return self::$instance;
128	+ }
129	+
130	+ /**
131	+ * Initial setup. Called by get_instance.
132	+ */
133	+ protected function init() {
134	+
135	+ // Option to update to FontAwesome 4.0+ format (drops IE7 support)
136	+ $this->use_latest = apply_filters( 'storm_social_icons_use_latest', $this->use_latest );
137	+
138	+ if ( $this->use_latest ) {
139	+ add_filter( 'storm_social_icons_networks', array( $this, 'update_network_classes' ), 1000 );
140	+ }
141	+
142	+ $this->size = apply_filters( 'storm_social_icons_size', $this->size );
143	+ $this->type = apply_filters( 'storm_social_icons_type', $this->type );
144	+ $this->hide_text = apply_filters( 'storm_social_icons_hide_text', $this->hide_text );
145	+ $this->networks = apply_filters( 'storm_social_icons_networks', $this->networks );
146	+
147	+ add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
148	+ add_action( 'wp_print_scripts', array( $this, 'wp_print_scripts' ) );
149	+
150	+ add_filter( 'wp_nav_menu_objects', array( $this, 'wp_nav_menu_objects' ), 5, 2 );
151	+
152	+ // Shortcode for testing all fontawesome icons: [fontawesometest]
153	+ add_shortcode( 'fontawesometest', array( $this, 'shortcode_fontawesometest' ) );
154	+ add_action( 'fontawesometest', array( $this, 'fontawesometest' ) );
155	+
156	+ }
157	+
158	+ /**
159	+ * Load FontAwesome from NetDNA's Content Deliver Network (faster, likely to be cached)
160	+ * @see http://www.bootstrapcdn.com/#tab_fontawesome
161	+ */
162	+ public function wp_enqueue_scripts() {
163	+
164	+ if ( $this->use_latest ) {
165	+
166	+ // FontAwesome latest. Drops IE7 support.
167	+ wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css', array(), MSI_VERSION, 'all' );
168	+
169	+ }else {
170	+
171	+ // FontAwesome 3.2.1 -- support IE7, but lacks Vimeo
172	+ global $wp_styles;
173	+ wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css', array(), MSI_VERSION, 'all' );
174	+ wp_enqueue_style( 'fontawesome-ie', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css', array( 'fontawesome' ), MSI_VERSION );
175	+
176	+ // Internet Explorer conditional comment
177	+ $wp_styles->add_data( 'fontawesome-ie', 'conditional', 'IE 7' );
178	+
179	+ }
180	+
181	+ }
182	+
183	+ /**
184	+ * Hide text visually, but keep available for screen readers.
185	+ * Just a few lines of stylesheet, so loading inline rather than adding another HTTP request.
186	+ */
187	+ public function wp_print_scripts() {
188	+ ?>
189	+ <style>
190	+ /* Accessible for screen readers but hidden from view */
191	+ .fa-hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
192	+ .rtl .fa-hidden { left:10000px; }
193	+ .fa-showtext { margin-right: 5px; }
194	+ </style>
195	+ <?php
196	+ }
197	+
198	+ /**
199	+ * Get icon HTML with appropriate classes depending on size and icon type
200	+ */
201	+ public function get_icon( $network ) {
202	+
203	+ // Switch between legacy or current icon size classes
204	+ $icon_sizes = ( $this->use_latest ) ? $this->icon_sizes : $this->legacy_icon_sizes;
205	+
206	+ $size = $icon_sizes[ $this->size ];
207	+ $icon = $network[ $this->type ];
208	+ $show_text = $this->hide_text ? '' : 'fa-showtext';
209	+
210	+ $html = "<i class='$size $icon $show_text'></i>";
211	+
212	+ return apply_filters( 'storm_social_icons_icon_html', $html, $size, $icon, $show_text );
213	+
214	+ }
215	+
216	+ /**
217	+ * Find social links in top-level menu items, add icon HTML
218	+ */
219	+ public function wp_nav_menu_objects( $sorted_menu_items, $args ){
220	+
221	+ foreach( $sorted_menu_items as &$item ) {
222	+ if ( 0 != $item->menu_item_parent ) {
223	+ // Skip submenu items
224	+ continue;
225	+ }
226	+
227	+ foreach( $this->networks as $url => $network ) {
228	+ if ( false !== strpos( $item->url, $url ) ) {
229	+
230	+ $item->classes[] = $this->li_class;
231	+ $item->classes[] = $network['class'];
232	+
233	+ if ( $this->hide_text ) {
234	+ $html = "<span class='fa-hidden'>{$item->title}</span>";
235	+ $item->title = apply_filters( 'storm_social_icons_title_html', $html, $item->title );
236	+ }
237	+
238	+ $item->title = $this->get_icon( $network ) . $item->title ;
239	+ }
240	+ }
241	+ }
242	+
243	+ return $sorted_menu_items;
244	+
245	+ }
246	+
247	+ /**
248	+ * Change size classes from 3.2.1 format to 4.0+ format.
249	+ *
250	+ * @param array $networks See $this->$networks
251	+ * @return array $networks Filtered to change "icon-" to "fa fa-"
252	+ */
253	+ public function update_network_classes( $networks ) {
254	+
255	+ foreach ( $networks as $url => &$values ) {
256	+ $values['icon'] = str_replace( 'icon-', 'fa fa-', $values['icon'] );
257	+ $values['icon-sign'] = str_replace( 'icon-', 'fa fa-', $values['icon-sign'] );
258	+ $values['icon-sign'] = str_replace( '-sign', '-square', $values['icon-sign'] );
259	+ }
260	+
261	+ $networks = array_merge( $networks, $this->networks_latest );
262	+
263	+ return $networks;
264	+ }
265	+
266	+ /**
267	+ * Test output of all FontAwesome icons
268	+ */
269	+ public function fontawesometest( $args ) {
270	+ include dirname( __FILE__ ) . '/font-awesome-test.html';
271	+ }
272	+
273	+ /**
274	+ * Shortcode to test output of all FontAwesome icons
275	+ */
276	+ public function shortcode_fontawesometest( $args ) {
277	+ ob_start();
278	+ $this->fontawesometest();
279	+ return ob_get_clean();
280	+ }
281	}

css/menu-social-icons-admin.css CHANGED Viewed

@@ -1,45 +1,45 @@
-            -
            /* Icon sizes */
-            -
            .menu-item-handle i.fa, #msi-shortcuts i.fa {
-            -
            	font-size: 28px;
-            -
            }
-            -
-            -
            /* Fixed width for FontAwesome 3.2.1 */
-            -
            i.fa-fw {
-            -
            	width: 1.2857142857142858em;
-            -
            	text-align: center;
-            -
            	display:block;
-            -
            	float:left;
-            -
            }
-            -
-            -
            #msi-shortcuts i {
-            -
            	cursor: pointer;
-            -
            	margin: 0 5px 5px 0;
-            -
            	color: #333;
-            -
            }
-            -
            #msi-shortcuts i:hover {
-            -
            	color: #1A749D;
-            -
            }
-            -
            #msi-shortcuts h4 {
-            -
            	font-weight: normal;
-            -
            	font-style: italic;
-            -
            }
-            -
            #msi-shortcuts .faq {
-            -
            	padding-top:16px;
-            -
            	display:block;
-            -
            	clear:both;
-            -
            }
-            -
-            -
            /* Add Link active icon */
-            -
            #msi-shortcuts i.active {
-            -
            	color: #1A749D;
-            -
            }
-            -
-            -
            /* Menu item handle */
-            -
            .menu-item-handle i.fa {
-            -
            	position: absolute;
-            -
            	top: 4px;
-            -
            	left: 4px;
-            -
            }
-            -
            .menu-item-handle span.has-social-icon {
-            -
            	padding-left: 33px;
-            -
            }


1	+ /* Icon sizes */
2	+ .menu-item-handle i.fa, #msi-shortcuts i.fa {
3	+ font-size: 28px;
4	+ }
5	+
6	+ /* Fixed width for FontAwesome 3.2.1 */
7	+ i.fa-fw {
8	+ width: 1.2857142857142858em;
9	+ text-align: center;
10	+ display:block;
11	+ float:left;
12	+ }
13	+
14	+ #msi-shortcuts i {
15	+ cursor: pointer;
16	+ margin: 0 5px 5px 0;
17	+ color: #333;
18	+ }
19	+ #msi-shortcuts i:hover {
20	+ color: #1A749D;
21	+ }
22	+ #msi-shortcuts h4 {
23	+ font-weight: normal;
24	+ font-style: italic;
25	+ }
26	+ #msi-shortcuts .faq {
27	+ padding-top:16px;
28	+ display:block;
29	+ clear:both;
30	+ }
31	+
32	+ /* Add Link active icon */
33	+ #msi-shortcuts i.active {
34	+ color: #1A749D;
35	+ }
36	+
37	+ /* Menu item handle */
38	+ .menu-item-handle i.fa {
39	+ position: absolute;
40	+ top: 4px;
41	+ left: 4px;
42	+ }
43	+ .menu-item-handle span.has-social-icon {
44	+ padding-left: 33px;
45	+ }

font-awesome-test.html CHANGED Viewed

@@ -1,267 +1,267 @@
-            -
            <div class="container">
-            -
              <section>
-            -
                <div class="row">
-            -
                  <div class="span4">
-            -
                    <ul class="unstyled">
-            -
                      <li><i class="icon-2x">&#xf000;</i> icon-glass <span class="muted">(&amp;#xf000;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf001;</i> icon-music <span class="muted">(&amp;#xf001;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf002;</i> icon-search <span class="muted">(&amp;#xf002;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf003;</i> icon-envelope <span class="muted">(&amp;#xf003;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf004;</i> icon-heart <span class="muted">(&amp;#xf004;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf005;</i> icon-star <span class="muted">(&amp;#xf005;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf006;</i> icon-star-empty <span class="muted">(&amp;#xf006;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf007;</i> icon-user <span class="muted">(&amp;#xf007;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf008;</i> icon-film <span class="muted">(&amp;#xf008;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf009;</i> icon-th-large <span class="muted">(&amp;#xf009;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf00a;</i> icon-th <span class="muted">(&amp;#xf00a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf00b;</i> icon-th-list <span class="muted">(&amp;#xf00b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf00c;</i> icon-ok <span class="muted">(&amp;#xf00c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf00d;</i> icon-remove <span class="muted">(&amp;#xf00d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf00e;</i> icon-zoom-in <span class="muted">(&amp;#xf00e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf010;</i> icon-zoom-out <span class="muted">(&amp;#xf010;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf011;</i> icon-off <span class="muted">(&amp;#xf011;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf012;</i> icon-signal <span class="muted">(&amp;#xf012;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf013;</i> icon-cog <span class="muted">(&amp;#xf013;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf014;</i> icon-trash <span class="muted">(&amp;#xf014;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf015;</i> icon-home <span class="muted">(&amp;#xf015;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf016;</i> icon-file <span class="muted">(&amp;#xf016;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf017;</i> icon-time <span class="muted">(&amp;#xf017;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf018;</i> icon-road <span class="muted">(&amp;#xf018;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf019;</i> icon-download-alt <span class="muted">(&amp;#xf019;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf01a;</i> icon-download <span class="muted">(&amp;#xf01a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf01b;</i> icon-upload <span class="muted">(&amp;#xf01b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf01c;</i> icon-inbox <span class="muted">(&amp;#xf01c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf01d;</i> icon-play-circle <span class="muted">(&amp;#xf01d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf01e;</i> icon-repeat <span class="muted">(&amp;#xf01e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf021;</i> icon-refresh <span class="muted">(&amp;#xf021;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf022;</i> icon-list-alt <span class="muted">(&amp;#xf022;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf023;</i> icon-lock <span class="muted">(&amp;#xf023;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf024;</i> icon-flag <span class="muted">(&amp;#xf024;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf025;</i> icon-headphones <span class="muted">(&amp;#xf025;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf026;</i> icon-volume-off <span class="muted">(&amp;#xf026;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf027;</i> icon-volume-down <span class="muted">(&amp;#xf027;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf028;</i> icon-volume-up <span class="muted">(&amp;#xf028;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf029;</i> icon-qrcode <span class="muted">(&amp;#xf029;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02a;</i> icon-barcode <span class="muted">(&amp;#xf02a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02b;</i> icon-tag <span class="muted">(&amp;#xf02b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02c;</i> icon-tags <span class="muted">(&amp;#xf02c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02d;</i> icon-book <span class="muted">(&amp;#xf02d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02e;</i> icon-bookmark <span class="muted">(&amp;#xf02e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf02f;</i> icon-print <span class="muted">(&amp;#xf02f;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf030;</i> icon-camera <span class="muted">(&amp;#xf030;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf031;</i> icon-font <span class="muted">(&amp;#xf031;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf032;</i> icon-bold <span class="muted">(&amp;#xf032;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf033;</i> icon-italic <span class="muted">(&amp;#xf033;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf034;</i> icon-text-height <span class="muted">(&amp;#xf034;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf035;</i> icon-text-width <span class="muted">(&amp;#xf035;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf036;</i> icon-align-left <span class="muted">(&amp;#xf036;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf037;</i> icon-align-center <span class="muted">(&amp;#xf037;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf038;</i> icon-align-right <span class="muted">(&amp;#xf038;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf039;</i> icon-align-justify <span class="muted">(&amp;#xf039;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf03a;</i> icon-list <span class="muted">(&amp;#xf03a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf03b;</i> icon-indent-left <span class="muted">(&amp;#xf03b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf03c;</i> icon-indent-right <span class="muted">(&amp;#xf03c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf03d;</i> icon-facetime-video <span class="muted">(&amp;#xf03d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf03e;</i> icon-picture <span class="muted">(&amp;#xf03e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf040;</i> icon-pencil <span class="muted">(&amp;#xf040;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf041;</i> icon-map-marker <span class="muted">(&amp;#xf041;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf042;</i> icon-adjust <span class="muted">(&amp;#xf042;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf043;</i> icon-tint <span class="muted">(&amp;#xf043;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf044;</i> icon-edit <span class="muted">(&amp;#xf044;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf045;</i> icon-share <span class="muted">(&amp;#xf045;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf046;</i> icon-check <span class="muted">(&amp;#xf046;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf047;</i> icon-move <span class="muted">(&amp;#xf047;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf048;</i> icon-step-backward <span class="muted">(&amp;#xf048;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf049;</i> icon-fast-backward <span class="muted">(&amp;#xf049;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf04a;</i> icon-backward <span class="muted">(&amp;#xf04a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf04b;</i> icon-play <span class="muted">(&amp;#xf04b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf04c;</i> icon-pause <span class="muted">(&amp;#xf04c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf04d;</i> icon-stop <span class="muted">(&amp;#xf04d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf04e;</i> icon-forward <span class="muted">(&amp;#xf04e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf050;</i> icon-fast-forward <span class="muted">(&amp;#xf050;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf051;</i> icon-step-forward <span class="muted">(&amp;#xf051;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf052;</i> icon-eject <span class="muted">(&amp;#xf052;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf053;</i> icon-chevron-left <span class="muted">(&amp;#xf053;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf054;</i> icon-chevron-right <span class="muted">(&amp;#xf054;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf055;</i> icon-plus-sign <span class="muted">(&amp;#xf055;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf056;</i> icon-minus-sign <span class="muted">(&amp;#xf056;)</span></li>
-            -
                    </ul>
-            -
                  </div>
-            -
                  <div class="span4">
-            -
                    <ul class="unstyled">
-            -
                      <li><i class="icon-2x">&#xf057;</i> icon-remove-sign <span class="muted">(&amp;#xf057;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf058;</i> icon-ok-sign <span class="muted">(&amp;#xf058;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf059;</i> icon-question-sign <span class="muted">(&amp;#xf059;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf05a;</i> icon-info-sign <span class="muted">(&amp;#xf05a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf05b;</i> icon-screenshot <span class="muted">(&amp;#xf05b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf05c;</i> icon-remove-circle <span class="muted">(&amp;#xf05c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf05d;</i> icon-ok-circle <span class="muted">(&amp;#xf05d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf05e;</i> icon-ban-circle <span class="muted">(&amp;#xf05e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf060;</i> icon-arrow-left <span class="muted">(&amp;#xf060;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf061;</i> icon-arrow-right <span class="muted">(&amp;#xf061;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf062;</i> icon-arrow-up <span class="muted">(&amp;#xf062;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf063;</i> icon-arrow-down <span class="muted">(&amp;#xf063;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf064;</i> icon-share-alt <span class="muted">(&amp;#xf064;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf065;</i> icon-resize-full <span class="muted">(&amp;#xf065;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf066;</i> icon-resize-small <span class="muted">(&amp;#xf066;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf067;</i> icon-plus <span class="muted">(&amp;#xf067;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf068;</i> icon-minus <span class="muted">(&amp;#xf068;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf069;</i> icon-asterisk <span class="muted">(&amp;#xf069;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf06a;</i> icon-exclamation-sign <span class="muted">(&amp;#xf06a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf06b;</i> icon-gift <span class="muted">(&amp;#xf06b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf06c;</i> icon-leaf <span class="muted">(&amp;#xf06c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf06d;</i> icon-fire <span class="muted">(&amp;#xf06d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf06e;</i> icon-eye-open <span class="muted">(&amp;#xf06e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf070;</i> icon-eye-close <span class="muted">(&amp;#xf070;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf071;</i> icon-warning-sign <span class="muted">(&amp;#xf071;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf072;</i> icon-plane <span class="muted">(&amp;#xf072;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf073;</i> icon-calendar <span class="muted">(&amp;#xf073;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf074;</i> icon-random <span class="muted">(&amp;#xf074;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf075;</i> icon-comment <span class="muted">(&amp;#xf075;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf076;</i> icon-magnet <span class="muted">(&amp;#xf076;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf077;</i> icon-chevron-up <span class="muted">(&amp;#xf077;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf078;</i> icon-chevron-down <span class="muted">(&amp;#xf078;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf079;</i> icon-retweet <span class="muted">(&amp;#xf079;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf07a;</i> icon-shopping-cart <span class="muted">(&amp;#xf07a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf07b;</i> icon-folder-close <span class="muted">(&amp;#xf07b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf07c;</i> icon-folder-open <span class="muted">(&amp;#xf07c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf07d;</i> icon-resize-vertical <span class="muted">(&amp;#xf07d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf07e;</i> icon-resize-horizontal <span class="muted">(&amp;#xf07e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf080;</i> icon-bar-chart <span class="muted">(&amp;#xf080;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf081;</i> icon-twitter-sign <span class="muted">(&amp;#xf081;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf082;</i> icon-facebook-sign <span class="muted">(&amp;#xf082;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf083;</i> icon-camera-retro <span class="muted">(&amp;#xf083;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf084;</i> icon-key <span class="muted">(&amp;#xf084;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf085;</i> icon-cogs <span class="muted">(&amp;#xf085;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf086;</i> icon-comments <span class="muted">(&amp;#xf086;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf087;</i> icon-thumbs-up <span class="muted">(&amp;#xf087;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf088;</i> icon-thumbs-down <span class="muted">(&amp;#xf088;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf089;</i> icon-star-half <span class="muted">(&amp;#xf089;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf08a;</i> icon-heart-empty <span class="muted">(&amp;#xf08a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf08b;</i> icon-signout <span class="muted">(&amp;#xf08b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf08c;</i> icon-linkedin-sign <span class="muted">(&amp;#xf08c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf08d;</i> icon-pushpin <span class="muted">(&amp;#xf08d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf08e;</i> icon-external-link <span class="muted">(&amp;#xf08e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf090;</i> icon-signin <span class="muted">(&amp;#xf090;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf091;</i> icon-trophy <span class="muted">(&amp;#xf091;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf092;</i> icon-github-sign <span class="muted">(&amp;#xf092;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf093;</i> icon-upload-alt <span class="muted">(&amp;#xf093;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf094;</i> icon-lemon <span class="muted">(&amp;#xf094;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf095;</i> icon-phone <span class="muted">(&amp;#xf095;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf096;</i> icon-check-empty <span class="muted">(&amp;#xf096;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf097;</i> icon-bookmark-empty <span class="muted">(&amp;#xf097;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf098;</i> icon-phone-sign <span class="muted">(&amp;#xf098;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf099;</i> icon-twitter <span class="muted">(&amp;#xf099;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf09a;</i> icon-facebook <span class="muted">(&amp;#xf09a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf09b;</i> icon-github <span class="muted">(&amp;#xf09b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf09c;</i> icon-unlock <span class="muted">(&amp;#xf09c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf09d;</i> icon-credit-card <span class="muted">(&amp;#xf09d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf09e;</i> icon-rss <span class="muted">(&amp;#xf09e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a0;</i> icon-hdd <span class="muted">(&amp;#xf0a0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a1;</i> icon-bullhorn <span class="muted">(&amp;#xf0a1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a2;</i> icon-bell <span class="muted">(&amp;#xf0a2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a3;</i> icon-certificate <span class="muted">(&amp;#xf0a3;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a4;</i> icon-hand-right <span class="muted">(&amp;#xf0a4;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a5;</i> icon-hand-left <span class="muted">(&amp;#xf0a5;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a6;</i> icon-hand-up <span class="muted">(&amp;#xf0a6;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a7;</i> icon-hand-down <span class="muted">(&amp;#xf0a7;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a8;</i> icon-circle-arrow-left <span class="muted">(&amp;#xf0a8;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0a9;</i> icon-circle-arrow-right <span class="muted">(&amp;#xf0a9;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0aa;</i> icon-circle-arrow-up <span class="muted">(&amp;#xf0aa;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ab;</i> icon-circle-arrow-down <span class="muted">(&amp;#xf0ab;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ac;</i> icon-globe <span class="muted">(&amp;#xf0ac;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ad;</i> icon-wrench <span class="muted">(&amp;#xf0ad;)</span></li>
-            -
                    </ul>
-            -
                  </div>
-            -
                  <div class="span4">
-            -
                    <ul class="unstyled">
-            -
                      <li><i class="icon-2x">&#xf0ae;</i> icon-tasks <span class="muted">(&amp;#xf0ae;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0b0;</i> icon-filter <span class="muted">(&amp;#xf0b0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0b1;</i> icon-briefcase <span class="muted">(&amp;#xf0b1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0b2;</i> icon-fullscreen <span class="muted">(&amp;#xf0b2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c0;</i> icon-group <span class="muted">(&amp;#xf0c0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c1;</i> icon-link <span class="muted">(&amp;#xf0c1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c2;</i> icon-cloud <span class="muted">(&amp;#xf0c2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c3;</i> icon-beaker <span class="muted">(&amp;#xf0c3;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c4;</i> icon-cut <span class="muted">(&amp;#xf0c4;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c5;</i> icon-copy <span class="muted">(&amp;#xf0c5;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c6;</i> icon-paper-clip <span class="muted">(&amp;#xf0c6;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c7;</i> icon-save <span class="muted">(&amp;#xf0c7;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c8;</i> icon-sign-blank <span class="muted">(&amp;#xf0c8;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0c9;</i> icon-reorder <span class="muted">(&amp;#xf0c9;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ca;</i> icon-list-ul <span class="muted">(&amp;#xf0ca;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0cb;</i> icon-list-ol <span class="muted">(&amp;#xf0cb;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0cc;</i> icon-strikethrough <span class="muted">(&amp;#xf0cc;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0cd;</i> icon-underline <span class="muted">(&amp;#xf0cd;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ce;</i> icon-table <span class="muted">(&amp;#xf0ce;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d0;</i> icon-magic <span class="muted">(&amp;#xf0d0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d1;</i> icon-truck <span class="muted">(&amp;#xf0d1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d2;</i> icon-pinterest <span class="muted">(&amp;#xf0d2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d3;</i> icon-pinterest-sign <span class="muted">(&amp;#xf0d3;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d4;</i> icon-google-plus-sign <span class="muted">(&amp;#xf0d4;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d5;</i> icon-google-plus <span class="muted">(&amp;#xf0d5;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d6;</i> icon-money <span class="muted">(&amp;#xf0d6;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d7;</i> icon-caret-down <span class="muted">(&amp;#xf0d7;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d8;</i> icon-caret-up <span class="muted">(&amp;#xf0d8;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0d9;</i> icon-caret-left <span class="muted">(&amp;#xf0d9;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0da;</i> icon-caret-right <span class="muted">(&amp;#xf0da;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0db;</i> icon-columns <span class="muted">(&amp;#xf0db;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0dc;</i> icon-sort <span class="muted">(&amp;#xf0dc;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0dd;</i> icon-sort-down <span class="muted">(&amp;#xf0dd;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0de;</i> icon-sort-up <span class="muted">(&amp;#xf0de;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e0;</i> icon-envelope-alt <span class="muted">(&amp;#xf0e0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e1;</i> icon-linkedin <span class="muted">(&amp;#xf0e1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e2;</i> icon-undo <span class="muted">(&amp;#xf0e2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e3;</i> icon-legal <span class="muted">(&amp;#xf0e3;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e4;</i> icon-dashboard <span class="muted">(&amp;#xf0e4;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e5;</i> icon-comment-alt <span class="muted">(&amp;#xf0e5;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e6;</i> icon-comments-alt <span class="muted">(&amp;#xf0e6;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e7;</i> icon-bolt <span class="muted">(&amp;#xf0e7;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e8;</i> icon-sitemap <span class="muted">(&amp;#xf0e8;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0e9;</i> icon-umbrella <span class="muted">(&amp;#xf0e9;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ea;</i> icon-paste <span class="muted">(&amp;#xf0ea;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0eb;</i> icon-lightbulb <span class="muted">(&amp;#xf0eb;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ec;</i> icon-exchange <span class="muted">(&amp;#xf0ec;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ed;</i> icon-cloud-download <span class="muted">(&amp;#xf0ed;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0ee;</i> icon-cloud-upload <span class="muted">(&amp;#xf0ee;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f0;</i> icon-user-md <span class="muted">(&amp;#xf0f0;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f1;</i> icon-stethoscope <span class="muted">(&amp;#xf0f1;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f2;</i> icon-suitcase <span class="muted">(&amp;#xf0f2;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f3;</i> icon-bell-alt <span class="muted">(&amp;#xf0f3;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f4;</i> icon-coffee <span class="muted">(&amp;#xf0f4;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f5;</i> icon-food <span class="muted">(&amp;#xf0f5;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f6;</i> icon-file-alt <span class="muted">(&amp;#xf0f6;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f7;</i> icon-building <span class="muted">(&amp;#xf0f7;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f8;</i> icon-hospital <span class="muted">(&amp;#xf0f8;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0f9;</i> icon-ambulance <span class="muted">(&amp;#xf0f9;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0fa;</i> icon-medkit <span class="muted">(&amp;#xf0fa;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0fb;</i> icon-fighter-jet <span class="muted">(&amp;#xf0fb;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0fc;</i> icon-beer <span class="muted">(&amp;#xf0fc;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0fd;</i> icon-h-sign <span class="muted">(&amp;#xf0fd;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf0fe;</i> icon-plus-sign-alt <span class="muted">(&amp;#xf0fe;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf100;</i> icon-double-angle-left <span class="muted">(&amp;#xf100;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf101;</i> icon-double-angle-right <span class="muted">(&amp;#xf101;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf102;</i> icon-double-angle-up <span class="muted">(&amp;#xf102;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf103;</i> icon-double-angle-down <span class="muted">(&amp;#xf103;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf104;</i> icon-angle-left <span class="muted">(&amp;#xf104;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf105;</i> icon-angle-right <span class="muted">(&amp;#xf105;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf106;</i> icon-angle-up <span class="muted">(&amp;#xf106;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf107;</i> icon-angle-down <span class="muted">(&amp;#xf107;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf108;</i> icon-desktop <span class="muted">(&amp;#xf108;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf109;</i> icon-laptop <span class="muted">(&amp;#xf109;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf10a;</i> icon-tablet <span class="muted">(&amp;#xf10a;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf10b;</i> icon-mobile-phone <span class="muted">(&amp;#xf10b;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf10c;</i> icon-circle-blank <span class="muted">(&amp;#xf10c;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf10d;</i> icon-quote-left <span class="muted">(&amp;#xf10d;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf10e;</i> icon-quote-right <span class="muted">(&amp;#xf10e;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf110;</i> icon-spinner <span class="muted">(&amp;#xf110;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf111;</i> icon-circle <span class="muted">(&amp;#xf111;)</span></li>
-            -
                      <li><i class="icon-2x">&#xf112;</i> icon-reply <span class="muted">(&amp;#xf112;)</span></li>
-            -
                    </ul>
-            -
                  </div>
-            -
                </div>
-            -
              </section>
-            -
-            -
              <style>
-            -
                .span4{width:300px} ul.unstyled,ol.unstyled{margin-left:0;list-style:none} .row:before,.row:after{display:table;content:"";line-height:0}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px} .container{margin-right:auto;margin-left:auto;*zoom:1}.container:before,.container:after{display:table;content:"";line-height:0}.container:after{clear:both}
               </style>


1	+ <div class="container">
2	+ <section>
3	+ <div class="row">
4	+ <div class="span4">
5	+ <ul class="unstyled">
6	+ <li><i class="icon-2x"></i> icon-glass <span class="muted">(&#xf000;)</span></li>
7	+ <li><i class="icon-2x"></i> icon-music <span class="muted">(&#xf001;)</span></li>
8	+ <li><i class="icon-2x"></i> icon-search <span class="muted">(&#xf002;)</span></li>
9	+ <li><i class="icon-2x"></i> icon-envelope <span class="muted">(&#xf003;)</span></li>
10	+ <li><i class="icon-2x"></i> icon-heart <span class="muted">(&#xf004;)</span></li>
11	+ <li><i class="icon-2x"></i> icon-star <span class="muted">(&#xf005;)</span></li>
12	+ <li><i class="icon-2x"></i> icon-star-empty <span class="muted">(&#xf006;)</span></li>
13	+ <li><i class="icon-2x"></i> icon-user <span class="muted">(&#xf007;)</span></li>
14	+ <li><i class="icon-2x"></i> icon-film <span class="muted">(&#xf008;)</span></li>
15	+ <li><i class="icon-2x"></i> icon-th-large <span class="muted">(&#xf009;)</span></li>
16	+ <li><i class="icon-2x"></i> icon-th <span class="muted">(&#xf00a;)</span></li>
17	+ <li><i class="icon-2x"></i> icon-th-list <span class="muted">(&#xf00b;)</span></li>
18	+ <li><i class="icon-2x"></i> icon-ok <span class="muted">(&#xf00c;)</span></li>
19	+ <li><i class="icon-2x"></i> icon-remove <span class="muted">(&#xf00d;)</span></li>
20	+ <li><i class="icon-2x"></i> icon-zoom-in <span class="muted">(&#xf00e;)</span></li>
21	+ <li><i class="icon-2x"></i> icon-zoom-out <span class="muted">(&#xf010;)</span></li>
22	+ <li><i class="icon-2x"></i> icon-off <span class="muted">(&#xf011;)</span></li>
23	+ <li><i class="icon-2x"></i> icon-signal <span class="muted">(&#xf012;)</span></li>
24	+ <li><i class="icon-2x"></i> icon-cog <span class="muted">(&#xf013;)</span></li>
25	+ <li><i class="icon-2x"></i> icon-trash <span class="muted">(&#xf014;)</span></li>
26	+ <li><i class="icon-2x"></i> icon-home <span class="muted">(&#xf015;)</span></li>
27	+ <li><i class="icon-2x"></i> icon-file <span class="muted">(&#xf016;)</span></li>
28	+ <li><i class="icon-2x"></i> icon-time <span class="muted">(&#xf017;)</span></li>
29	+ <li><i class="icon-2x"></i> icon-road <span class="muted">(&#xf018;)</span></li>
30	+ <li><i class="icon-2x"></i> icon-download-alt <span class="muted">(&#xf019;)</span></li>
31	+ <li><i class="icon-2x"></i> icon-download <span class="muted">(&#xf01a;)</span></li>
32	+ <li><i class="icon-2x"></i> icon-upload <span class="muted">(&#xf01b;)</span></li>
33	+ <li><i class="icon-2x"></i> icon-inbox <span class="muted">(&#xf01c;)</span></li>
34	+ <li><i class="icon-2x"></i> icon-play-circle <span class="muted">(&#xf01d;)</span></li>
35	+ <li><i class="icon-2x"></i> icon-repeat <span class="muted">(&#xf01e;)</span></li>
36	+ <li><i class="icon-2x"></i> icon-refresh <span class="muted">(&#xf021;)</span></li>
37	+ <li><i class="icon-2x"></i> icon-list-alt <span class="muted">(&#xf022;)</span></li>
38	+ <li><i class="icon-2x"></i> icon-lock <span class="muted">(&#xf023;)</span></li>
39	+ <li><i class="icon-2x"></i> icon-flag <span class="muted">(&#xf024;)</span></li>
40	+ <li><i class="icon-2x"></i> icon-headphones <span class="muted">(&#xf025;)</span></li>
41	+ <li><i class="icon-2x"></i> icon-volume-off <span class="muted">(&#xf026;)</span></li>
42	+ <li><i class="icon-2x"></i> icon-volume-down <span class="muted">(&#xf027;)</span></li>
43	+ <li><i class="icon-2x"></i> icon-volume-up <span class="muted">(&#xf028;)</span></li>
44	+ <li><i class="icon-2x"></i> icon-qrcode <span class="muted">(&#xf029;)</span></li>
45	+ <li><i class="icon-2x"></i> icon-barcode <span class="muted">(&#xf02a;)</span></li>
46	+ <li><i class="icon-2x"></i> icon-tag <span class="muted">(&#xf02b;)</span></li>
47	+ <li><i class="icon-2x"></i> icon-tags <span class="muted">(&#xf02c;)</span></li>
48	+ <li><i class="icon-2x"></i> icon-book <span class="muted">(&#xf02d;)</span></li>
49	+ <li><i class="icon-2x"></i> icon-bookmark <span class="muted">(&#xf02e;)</span></li>
50	+ <li><i class="icon-2x"></i> icon-print <span class="muted">(&#xf02f;)</span></li>
51	+ <li><i class="icon-2x"></i> icon-camera <span class="muted">(&#xf030;)</span></li>
52	+ <li><i class="icon-2x"></i> icon-font <span class="muted">(&#xf031;)</span></li>
53	+ <li><i class="icon-2x"></i> icon-bold <span class="muted">(&#xf032;)</span></li>
54	+ <li><i class="icon-2x"></i> icon-italic <span class="muted">(&#xf033;)</span></li>
55	+ <li><i class="icon-2x"></i> icon-text-height <span class="muted">(&#xf034;)</span></li>
56	+ <li><i class="icon-2x"></i> icon-text-width <span class="muted">(&#xf035;)</span></li>
57	+ <li><i class="icon-2x"></i> icon-align-left <span class="muted">(&#xf036;)</span></li>
58	+ <li><i class="icon-2x"></i> icon-align-center <span class="muted">(&#xf037;)</span></li>
59	+ <li><i class="icon-2x"></i> icon-align-right <span class="muted">(&#xf038;)</span></li>
60	+ <li><i class="icon-2x"></i> icon-align-justify <span class="muted">(&#xf039;)</span></li>
61	+ <li><i class="icon-2x"></i> icon-list <span class="muted">(&#xf03a;)</span></li>
62	+ <li><i class="icon-2x"></i> icon-indent-left <span class="muted">(&#xf03b;)</span></li>
63	+ <li><i class="icon-2x"></i> icon-indent-right <span class="muted">(&#xf03c;)</span></li>
64	+ <li><i class="icon-2x"></i> icon-facetime-video <span class="muted">(&#xf03d;)</span></li>
65	+ <li><i class="icon-2x"></i> icon-picture <span class="muted">(&#xf03e;)</span></li>
66	+ <li><i class="icon-2x"></i> icon-pencil <span class="muted">(&#xf040;)</span></li>
67	+ <li><i class="icon-2x"></i> icon-map-marker <span class="muted">(&#xf041;)</span></li>
68	+ <li><i class="icon-2x"></i> icon-adjust <span class="muted">(&#xf042;)</span></li>
69	+ <li><i class="icon-2x"></i> icon-tint <span class="muted">(&#xf043;)</span></li>
70	+ <li><i class="icon-2x"></i> icon-edit <span class="muted">(&#xf044;)</span></li>
71	+ <li><i class="icon-2x"></i> icon-share <span class="muted">(&#xf045;)</span></li>
72	+ <li><i class="icon-2x"></i> icon-check <span class="muted">(&#xf046;)</span></li>
73	+ <li><i class="icon-2x"></i> icon-move <span class="muted">(&#xf047;)</span></li>
74	+ <li><i class="icon-2x"></i> icon-step-backward <span class="muted">(&#xf048;)</span></li>
75	+ <li><i class="icon-2x"></i> icon-fast-backward <span class="muted">(&#xf049;)</span></li>
76	+ <li><i class="icon-2x"></i> icon-backward <span class="muted">(&#xf04a;)</span></li>
77	+ <li><i class="icon-2x"></i> icon-play <span class="muted">(&#xf04b;)</span></li>
78	+ <li><i class="icon-2x"></i> icon-pause <span class="muted">(&#xf04c;)</span></li>
79	+ <li><i class="icon-2x"></i> icon-stop <span class="muted">(&#xf04d;)</span></li>
80	+ <li><i class="icon-2x"></i> icon-forward <span class="muted">(&#xf04e;)</span></li>
81	+ <li><i class="icon-2x"></i> icon-fast-forward <span class="muted">(&#xf050;)</span></li>
82	+ <li><i class="icon-2x"></i> icon-step-forward <span class="muted">(&#xf051;)</span></li>
83	+ <li><i class="icon-2x"></i> icon-eject <span class="muted">(&#xf052;)</span></li>
84	+ <li><i class="icon-2x"></i> icon-chevron-left <span class="muted">(&#xf053;)</span></li>
85	+ <li><i class="icon-2x"></i> icon-chevron-right <span class="muted">(&#xf054;)</span></li>
86	+ <li><i class="icon-2x"></i> icon-plus-sign <span class="muted">(&#xf055;)</span></li>
87	+ <li><i class="icon-2x"></i> icon-minus-sign <span class="muted">(&#xf056;)</span></li>
88	+ </ul>
89	+ </div>
90	+ <div class="span4">
91	+ <ul class="unstyled">
92	+ <li><i class="icon-2x"></i> icon-remove-sign <span class="muted">(&#xf057;)</span></li>
93	+ <li><i class="icon-2x"></i> icon-ok-sign <span class="muted">(&#xf058;)</span></li>
94	+ <li><i class="icon-2x"></i> icon-question-sign <span class="muted">(&#xf059;)</span></li>
95	+ <li><i class="icon-2x"></i> icon-info-sign <span class="muted">(&#xf05a;)</span></li>
96	+ <li><i class="icon-2x"></i> icon-screenshot <span class="muted">(&#xf05b;)</span></li>
97	+ <li><i class="icon-2x"></i> icon-remove-circle <span class="muted">(&#xf05c;)</span></li>
98	+ <li><i class="icon-2x"></i> icon-ok-circle <span class="muted">(&#xf05d;)</span></li>
99	+ <li><i class="icon-2x"></i> icon-ban-circle <span class="muted">(&#xf05e;)</span></li>
100	+ <li><i class="icon-2x"></i> icon-arrow-left <span class="muted">(&#xf060;)</span></li>
101	+ <li><i class="icon-2x"></i> icon-arrow-right <span class="muted">(&#xf061;)</span></li>
102	+ <li><i class="icon-2x"></i> icon-arrow-up <span class="muted">(&#xf062;)</span></li>
103	+ <li><i class="icon-2x"></i> icon-arrow-down <span class="muted">(&#xf063;)</span></li>
104	+ <li><i class="icon-2x"></i> icon-share-alt <span class="muted">(&#xf064;)</span></li>
105	+ <li><i class="icon-2x"></i> icon-resize-full <span class="muted">(&#xf065;)</span></li>
106	+ <li><i class="icon-2x"></i> icon-resize-small <span class="muted">(&#xf066;)</span></li>
107	+ <li><i class="icon-2x"></i> icon-plus <span class="muted">(&#xf067;)</span></li>
108	+ <li><i class="icon-2x"></i> icon-minus <span class="muted">(&#xf068;)</span></li>
109	+ <li><i class="icon-2x"></i> icon-asterisk <span class="muted">(&#xf069;)</span></li>
110	+ <li><i class="icon-2x"></i> icon-exclamation-sign <span class="muted">(&#xf06a;)</span></li>
111	+ <li><i class="icon-2x"></i> icon-gift <span class="muted">(&#xf06b;)</span></li>
112	+ <li><i class="icon-2x"></i> icon-leaf <span class="muted">(&#xf06c;)</span></li>
113	+ <li><i class="icon-2x"></i> icon-fire <span class="muted">(&#xf06d;)</span></li>
114	+ <li><i class="icon-2x"></i> icon-eye-open <span class="muted">(&#xf06e;)</span></li>
115	+ <li><i class="icon-2x"></i> icon-eye-close <span class="muted">(&#xf070;)</span></li>
116	+ <li><i class="icon-2x"></i> icon-warning-sign <span class="muted">(&#xf071;)</span></li>
117	+ <li><i class="icon-2x"></i> icon-plane <span class="muted">(&#xf072;)</span></li>
118	+ <li><i class="icon-2x"></i> icon-calendar <span class="muted">(&#xf073;)</span></li>
119	+ <li><i class="icon-2x"></i> icon-random <span class="muted">(&#xf074;)</span></li>
120	+ <li><i class="icon-2x"></i> icon-comment <span class="muted">(&#xf075;)</span></li>
121	+ <li><i class="icon-2x"></i> icon-magnet <span class="muted">(&#xf076;)</span></li>
122	+ <li><i class="icon-2x"></i> icon-chevron-up <span class="muted">(&#xf077;)</span></li>
123	+ <li><i class="icon-2x"></i> icon-chevron-down <span class="muted">(&#xf078;)</span></li>
124	+ <li><i class="icon-2x"></i> icon-retweet <span class="muted">(&#xf079;)</span></li>
125	+ <li><i class="icon-2x"></i> icon-shopping-cart <span class="muted">(&#xf07a;)</span></li>
126	+ <li><i class="icon-2x"></i> icon-folder-close <span class="muted">(&#xf07b;)</span></li>
127	+ <li><i class="icon-2x"></i> icon-folder-open <span class="muted">(&#xf07c;)</span></li>
128	+ <li><i class="icon-2x"></i> icon-resize-vertical <span class="muted">(&#xf07d;)</span></li>
129	+ <li><i class="icon-2x"></i> icon-resize-horizontal <span class="muted">(&#xf07e;)</span></li>
130	+ <li><i class="icon-2x"></i> icon-bar-chart <span class="muted">(&#xf080;)</span></li>
131	+ <li><i class="icon-2x"></i> icon-twitter-sign <span class="muted">(&#xf081;)</span></li>
132	+ <li><i class="icon-2x"></i> icon-facebook-sign <span class="muted">(&#xf082;)</span></li>
133	+ <li><i class="icon-2x"></i> icon-camera-retro <span class="muted">(&#xf083;)</span></li>
134	+ <li><i class="icon-2x"></i> icon-key <span class="muted">(&#xf084;)</span></li>
135	+ <li><i class="icon-2x"></i> icon-cogs <span class="muted">(&#xf085;)</span></li>
136	+ <li><i class="icon-2x"></i> icon-comments <span class="muted">(&#xf086;)</span></li>
137	+ <li><i class="icon-2x"></i> icon-thumbs-up <span class="muted">(&#xf087;)</span></li>
138	+ <li><i class="icon-2x"></i> icon-thumbs-down <span class="muted">(&#xf088;)</span></li>
139	+ <li><i class="icon-2x"></i> icon-star-half <span class="muted">(&#xf089;)</span></li>
140	+ <li><i class="icon-2x"></i> icon-heart-empty <span class="muted">(&#xf08a;)</span></li>
141	+ <li><i class="icon-2x"></i> icon-signout <span class="muted">(&#xf08b;)</span></li>
142	+ <li><i class="icon-2x"></i> icon-linkedin-sign <span class="muted">(&#xf08c;)</span></li>
143	+ <li><i class="icon-2x"></i> icon-pushpin <span class="muted">(&#xf08d;)</span></li>
144	+ <li><i class="icon-2x"></i> icon-external-link <span class="muted">(&#xf08e;)</span></li>
145	+ <li><i class="icon-2x"></i> icon-signin <span class="muted">(&#xf090;)</span></li>
146	+ <li><i class="icon-2x"></i> icon-trophy <span class="muted">(&#xf091;)</span></li>
147	+ <li><i class="icon-2x"></i> icon-github-sign <span class="muted">(&#xf092;)</span></li>
148	+ <li><i class="icon-2x"></i> icon-upload-alt <span class="muted">(&#xf093;)</span></li>
149	+ <li><i class="icon-2x"></i> icon-lemon <span class="muted">(&#xf094;)</span></li>
150	+ <li><i class="icon-2x"></i> icon-phone <span class="muted">(&#xf095;)</span></li>
151	+ <li><i class="icon-2x"></i> icon-check-empty <span class="muted">(&#xf096;)</span></li>
152	+ <li><i class="icon-2x"></i> icon-bookmark-empty <span class="muted">(&#xf097;)</span></li>
153	+ <li><i class="icon-2x"></i> icon-phone-sign <span class="muted">(&#xf098;)</span></li>
154	+ <li><i class="icon-2x"></i> icon-twitter <span class="muted">(&#xf099;)</span></li>
155	+ <li><i class="icon-2x"></i> icon-facebook <span class="muted">(&#xf09a;)</span></li>
156	+ <li><i class="icon-2x"></i> icon-github <span class="muted">(&#xf09b;)</span></li>
157	+ <li><i class="icon-2x"></i> icon-unlock <span class="muted">(&#xf09c;)</span></li>
158	+ <li><i class="icon-2x"></i> icon-credit-card <span class="muted">(&#xf09d;)</span></li>
159	+ <li><i class="icon-2x"></i> icon-rss <span class="muted">(&#xf09e;)</span></li>
160	+ <li><i class="icon-2x"></i> icon-hdd <span class="muted">(&#xf0a0;)</span></li>
161	+ <li><i class="icon-2x"></i> icon-bullhorn <span class="muted">(&#xf0a1;)</span></li>
162	+ <li><i class="icon-2x"></i> icon-bell <span class="muted">(&#xf0a2;)</span></li>
163	+ <li><i class="icon-2x"></i> icon-certificate <span class="muted">(&#xf0a3;)</span></li>
164	+ <li><i class="icon-2x"></i> icon-hand-right <span class="muted">(&#xf0a4;)</span></li>
165	+ <li><i class="icon-2x"></i> icon-hand-left <span class="muted">(&#xf0a5;)</span></li>
166	+ <li><i class="icon-2x"></i> icon-hand-up <span class="muted">(&#xf0a6;)</span></li>
167	+ <li><i class="icon-2x"></i> icon-hand-down <span class="muted">(&#xf0a7;)</span></li>
168	+ <li><i class="icon-2x"></i> icon-circle-arrow-left <span class="muted">(&#xf0a8;)</span></li>
169	+ <li><i class="icon-2x"></i> icon-circle-arrow-right <span class="muted">(&#xf0a9;)</span></li>
170	+ <li><i class="icon-2x"></i> icon-circle-arrow-up <span class="muted">(&#xf0aa;)</span></li>
171	+ <li><i class="icon-2x"></i> icon-circle-arrow-down <span class="muted">(&#xf0ab;)</span></li>
172	+ <li><i class="icon-2x"></i> icon-globe <span class="muted">(&#xf0ac;)</span></li>
173	+ <li><i class="icon-2x"></i> icon-wrench <span class="muted">(&#xf0ad;)</span></li>
174	+ </ul>
175	+ </div>
176	+ <div class="span4">
177	+ <ul class="unstyled">
178	+ <li><i class="icon-2x"></i> icon-tasks <span class="muted">(&#xf0ae;)</span></li>
179	+ <li><i class="icon-2x"></i> icon-filter <span class="muted">(&#xf0b0;)</span></li>
180	+ <li><i class="icon-2x"></i> icon-briefcase <span class="muted">(&#xf0b1;)</span></li>
181	+ <li><i class="icon-2x"></i> icon-fullscreen <span class="muted">(&#xf0b2;)</span></li>
182	+ <li><i class="icon-2x"></i> icon-group <span class="muted">(&#xf0c0;)</span></li>
183	+ <li><i class="icon-2x"></i> icon-link <span class="muted">(&#xf0c1;)</span></li>
184	+ <li><i class="icon-2x"></i> icon-cloud <span class="muted">(&#xf0c2;)</span></li>
185	+ <li><i class="icon-2x"></i> icon-beaker <span class="muted">(&#xf0c3;)</span></li>
186	+ <li><i class="icon-2x"></i> icon-cut <span class="muted">(&#xf0c4;)</span></li>
187	+ <li><i class="icon-2x"></i> icon-copy <span class="muted">(&#xf0c5;)</span></li>
188	+ <li><i class="icon-2x"></i> icon-paper-clip <span class="muted">(&#xf0c6;)</span></li>
189	+ <li><i class="icon-2x"></i> icon-save <span class="muted">(&#xf0c7;)</span></li>
190	+ <li><i class="icon-2x"></i> icon-sign-blank <span class="muted">(&#xf0c8;)</span></li>
191	+ <li><i class="icon-2x"></i> icon-reorder <span class="muted">(&#xf0c9;)</span></li>
192	+ <li><i class="icon-2x"></i> icon-list-ul <span class="muted">(&#xf0ca;)</span></li>
193	+ <li><i class="icon-2x"></i> icon-list-ol <span class="muted">(&#xf0cb;)</span></li>
194	+ <li><i class="icon-2x"></i> icon-strikethrough <span class="muted">(&#xf0cc;)</span></li>
195	+ <li><i class="icon-2x"></i> icon-underline <span class="muted">(&#xf0cd;)</span></li>
196	+ <li><i class="icon-2x"></i> icon-table <span class="muted">(&#xf0ce;)</span></li>
197	+ <li><i class="icon-2x"></i> icon-magic <span class="muted">(&#xf0d0;)</span></li>
198	+ <li><i class="icon-2x"></i> icon-truck <span class="muted">(&#xf0d1;)</span></li>
199	+ <li><i class="icon-2x"></i> icon-pinterest <span class="muted">(&#xf0d2;)</span></li>
200	+ <li><i class="icon-2x"></i> icon-pinterest-sign <span class="muted">(&#xf0d3;)</span></li>
201	+ <li><i class="icon-2x"></i> icon-google-plus-sign <span class="muted">(&#xf0d4;)</span></li>
202	+ <li><i class="icon-2x"></i> icon-google-plus <span class="muted">(&#xf0d5;)</span></li>
203	+ <li><i class="icon-2x"></i> icon-money <span class="muted">(&#xf0d6;)</span></li>
204	+ <li><i class="icon-2x"></i> icon-caret-down <span class="muted">(&#xf0d7;)</span></li>
205	+ <li><i class="icon-2x"></i> icon-caret-up <span class="muted">(&#xf0d8;)</span></li>
206	+ <li><i class="icon-2x"></i> icon-caret-left <span class="muted">(&#xf0d9;)</span></li>
207	+ <li><i class="icon-2x"></i> icon-caret-right <span class="muted">(&#xf0da;)</span></li>
208	+ <li><i class="icon-2x"></i> icon-columns <span class="muted">(&#xf0db;)</span></li>
209	+ <li><i class="icon-2x"></i> icon-sort <span class="muted">(&#xf0dc;)</span></li>
210	+ <li><i class="icon-2x"></i> icon-sort-down <span class="muted">(&#xf0dd;)</span></li>
211	+ <li><i class="icon-2x"></i> icon-sort-up <span class="muted">(&#xf0de;)</span></li>
212	+ <li><i class="icon-2x"></i> icon-envelope-alt <span class="muted">(&#xf0e0;)</span></li>
213	+ <li><i class="icon-2x"></i> icon-linkedin <span class="muted">(&#xf0e1;)</span></li>
214	+ <li><i class="icon-2x"></i> icon-undo <span class="muted">(&#xf0e2;)</span></li>
215	+ <li><i class="icon-2x"></i> icon-legal <span class="muted">(&#xf0e3;)</span></li>
216	+ <li><i class="icon-2x"></i> icon-dashboard <span class="muted">(&#xf0e4;)</span></li>
217	+ <li><i class="icon-2x"></i> icon-comment-alt <span class="muted">(&#xf0e5;)</span></li>
218	+ <li><i class="icon-2x"></i> icon-comments-alt <span class="muted">(&#xf0e6;)</span></li>
219	+ <li><i class="icon-2x"></i> icon-bolt <span class="muted">(&#xf0e7;)</span></li>
220	+ <li><i class="icon-2x"></i> icon-sitemap <span class="muted">(&#xf0e8;)</span></li>
221	+ <li><i class="icon-2x"></i> icon-umbrella <span class="muted">(&#xf0e9;)</span></li>
222	+ <li><i class="icon-2x"></i> icon-paste <span class="muted">(&#xf0ea;)</span></li>
223	+ <li><i class="icon-2x"></i> icon-lightbulb <span class="muted">(&#xf0eb;)</span></li>
224	+ <li><i class="icon-2x"></i> icon-exchange <span class="muted">(&#xf0ec;)</span></li>
225	+ <li><i class="icon-2x"></i> icon-cloud-download <span class="muted">(&#xf0ed;)</span></li>
226	+ <li><i class="icon-2x"></i> icon-cloud-upload <span class="muted">(&#xf0ee;)</span></li>
227	+ <li><i class="icon-2x"></i> icon-user-md <span class="muted">(&#xf0f0;)</span></li>
228	+ <li><i class="icon-2x"></i> icon-stethoscope <span class="muted">(&#xf0f1;)</span></li>
229	+ <li><i class="icon-2x"></i> icon-suitcase <span class="muted">(&#xf0f2;)</span></li>
230	+ <li><i class="icon-2x"></i> icon-bell-alt <span class="muted">(&#xf0f3;)</span></li>
231	+ <li><i class="icon-2x"></i> icon-coffee <span class="muted">(&#xf0f4;)</span></li>
232	+ <li><i class="icon-2x"></i> icon-food <span class="muted">(&#xf0f5;)</span></li>
233	+ <li><i class="icon-2x"></i> icon-file-alt <span class="muted">(&#xf0f6;)</span></li>
234	+ <li><i class="icon-2x"></i> icon-building <span class="muted">(&#xf0f7;)</span></li>
235	+ <li><i class="icon-2x"></i> icon-hospital <span class="muted">(&#xf0f8;)</span></li>
236	+ <li><i class="icon-2x"></i> icon-ambulance <span class="muted">(&#xf0f9;)</span></li>
237	+ <li><i class="icon-2x"></i> icon-medkit <span class="muted">(&#xf0fa;)</span></li>
238	+ <li><i class="icon-2x"></i> icon-fighter-jet <span class="muted">(&#xf0fb;)</span></li>
239	+ <li><i class="icon-2x"></i> icon-beer <span class="muted">(&#xf0fc;)</span></li>
240	+ <li><i class="icon-2x"></i> icon-h-sign <span class="muted">(&#xf0fd;)</span></li>
241	+ <li><i class="icon-2x"></i> icon-plus-sign-alt <span class="muted">(&#xf0fe;)</span></li>
242	+ <li><i class="icon-2x"></i> icon-double-angle-left <span class="muted">(&#xf100;)</span></li>
243	+ <li><i class="icon-2x"></i> icon-double-angle-right <span class="muted">(&#xf101;)</span></li>
244	+ <li><i class="icon-2x"></i> icon-double-angle-up <span class="muted">(&#xf102;)</span></li>
245	+ <li><i class="icon-2x"></i> icon-double-angle-down <span class="muted">(&#xf103;)</span></li>
246	+ <li><i class="icon-2x"></i> icon-angle-left <span class="muted">(&#xf104;)</span></li>
247	+ <li><i class="icon-2x"></i> icon-angle-right <span class="muted">(&#xf105;)</span></li>
248	+ <li><i class="icon-2x"></i> icon-angle-up <span class="muted">(&#xf106;)</span></li>
249	+ <li><i class="icon-2x"></i> icon-angle-down <span class="muted">(&#xf107;)</span></li>
250	+ <li><i class="icon-2x"></i> icon-desktop <span class="muted">(&#xf108;)</span></li>
251	+ <li><i class="icon-2x"></i> icon-laptop <span class="muted">(&#xf109;)</span></li>
252	+ <li><i class="icon-2x"></i> icon-tablet <span class="muted">(&#xf10a;)</span></li>
253	+ <li><i class="icon-2x"></i> icon-mobile-phone <span class="muted">(&#xf10b;)</span></li>
254	+ <li><i class="icon-2x"></i> icon-circle-blank <span class="muted">(&#xf10c;)</span></li>
255	+ <li><i class="icon-2x"></i> icon-quote-left <span class="muted">(&#xf10d;)</span></li>
256	+ <li><i class="icon-2x"></i> icon-quote-right <span class="muted">(&#xf10e;)</span></li>
257	+ <li><i class="icon-2x"></i> icon-spinner <span class="muted">(&#xf110;)</span></li>
258	+ <li><i class="icon-2x"></i> icon-circle <span class="muted">(&#xf111;)</span></li>
259	+ <li><i class="icon-2x"></i> icon-reply <span class="muted">(&#xf112;)</span></li>
260	+ </ul>
261	+ </div>
262	+ </div>
263	+ </section>
264	+
265	+ <style>
266	+ .span4{width:300px} ul.unstyled,ol.unstyled{margin-left:0;list-style:none} .row:before,.row:after{display:table;content:"";line-height:0}.row:after{clear:both}[class="span"]{float:left;min-height:1px;margin-left:20px} .container{margin-right:auto;margin-left:auto;zoom:1}.container:before,.container:after{display:table;content:"";line-height:0}.container:after{clear:both}
267	</style>

js/menu-social-icons-admin.js CHANGED Viewed

@@ -1,195 +1,195 @@
-            -
            (function( $, icons ){
-            -
            	/**
-            -
            	 * Variable "icons" from MenuSocialIconsNetworks, PHP: MSI_Frontend::$networks)
-            -
            	 */
-            -
-            -
            	/**
-            -
            	 * List of URLs to search for
-            -
            	 */
-            -
            	var icon_urls = Object.keys( icons );
-            -
-            -
            	/**
-            -
            	 * Iterate over all menu items, add icon if URL matches
-            -
            	 */
-            -
            	var check_menu_item = function(){
-            -
            		var $input = $(this);
-            -
            		var url_value = $input.val();
-            -
-            -
            		var icon_url = get_icon_if_exists_for_url( url_value );
-            -
-            -
            		if ( icon_url ){
-            -
            			add_icon( $input, icon_url );
-            -
            		}else {
-            -
            			remove_icon( $input );
-            -
            		}
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Check a URL to see if we have an icon for it
-            -
            	 * @return string|bool valid URL|false
-            -
            	 */
-            -
            	var get_icon_if_exists_for_url = function( url_value ) {
-            -
            		for (var i = 0; i < icon_urls.length; i++) {
-            -
            			if ( -1 != url_value.indexOf( icon_urls[i] ) ){
-            -
            				return icon_urls[i];
-            -
            			}
-            -
            		}
-            -
-            -
            		return false;
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Add icon, either from New Link area or menu item title
-            -
            	 */
-            -
            	var add_icon = function( $input, icon_url ){
-            -
            		if ( "custom-menu-item-url" == $input.attr('id') ) {
-            -
            			add_icon_to_new_link( $input, icon_url );
-            -
            		}else {
-            -
            			add_icon_to_title( $input, icon_url );
-            -
            		}
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Remove icon, either from New Link area or menu item title
-            -
            	 */
-            -
            	var remove_icon = function( $input ){
-            -
            		if ( "custom-menu-item-url" == $input.attr('id') ) {
-            -
            			remove_icon_from_new_link();
-            -
            		}else {
-            -
            			remove_icon_from_title( $input );
-            -
            		}
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Add icon to New Link area
-            -
            	 */
-            -
            	var add_icon_to_new_link = function( $input, icon_url ){
-            -
            		remove_icon_from_new_link();
-            -
-            -
            		$('#msi-shortcuts i').each( function(){
-            -
            			if ( icon_url == $(this).data('url') ) {
-            -
            				$(this).addClass('active');
-            -
            			}
-            -
            		});
-            -
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Add an icon to menu title bar
-            -
            	 */
-            -
            	var add_icon_to_title = function( $input, icon_url ){
-            -
            		// Identify title element and build appropriate icon
-            -
            		var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
-            -
-            -
            		var $icon = get_icon_from_url( icon_url );
-            -
-            -
            		// Add icon and move title text over
-            -
            		remove_icon_from_title( $input );
-            -
            		$title.prepend( $icon );
-            -
            		$title.find("span.item-title").addClass("has-social-icon");
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Remove icon from title area of menu item
-            -
            	 */
-            -
            	var remove_icon_from_title = function( $input ) {
-            -
            		var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
-            -
-            -
            		$title.children('i').remove();
-            -
            		$title.find("span.item-title").removeClass("has-social-icon");
-            -
            	};
-            -
-            -
            	/**
-            -
            	 *	Remove icon from New Link area
-            -
            	 */
-            -
            	var remove_icon_from_new_link = function(){
-            -
            		$('#msi-shortcuts i').removeClass('active');
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Take a matched URL and create an icon from info looked up in icons object
-            -
            	 */
-            -
            	var get_icon_from_url = function( url ){
-            -
            		var $icon = $("<i>").addClass( icons[ url ].icon ).addClass('fa').addClass('fa-fw');
-            -
-            -
            		return $icon;
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Take a matched URL and return the network name
-            -
            	 */
-            -
            	var get_name_from_url = function( url ){
-            -
            		return icons[ url ].name;
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Add shortcuts to all icons in Links menu
-            -
            	 */
-            -
            	var display_icon_shortcuts = function(){
-            -
            		var $icon, name;
-            -
            		var $wrapper = $('<div>').attr('id', 'msi-shortcuts');
-            -
-            -
            		$wrapper.append( '<h4>Social Icons</h4>');
-            -
-            -
            		for (var i = 0; i < icon_urls.length; i++) {
-            -
            			// Skip short-links (duplicates)
-            -
            			if ( 'youtu.be' == icon_urls[i] || 'instagr.am' == icon_urls[i] ) {
-            -
            				continue;
-            -
            			}
-            -
-            -
            			$icon = get_icon_from_url( icon_urls[i] );
-            -
            			name = get_name_from_url( icon_urls[i] );
-            -
-            -
            			$icon.data( 'url', icon_urls[i] );
-            -
            			$icon.data( 'name', name );
-            -
-            -
            			$icon.click( update_link_fields );
-            -
-            -
            			$wrapper.append( $icon );
-            -
            		}
-            -
-            -
            		$faq = $('<ul>').addClass('faq');
-            -
-            -
            		$faq.append( "<li><a href='http://youtube.com/watch?v=hA2rjDwmvms' target='_blank'>How to edit icon appearance</a></li>" );
-            -
            		$faq.append( "<li><a href='http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons' target='_blank'>How to request new icons</a></li>" );
-            -
-            -
            		$wrapper.append( $faq );
-            -
-            -
            		$('#customlinkdiv').append( $wrapper );
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Insert icon URL into input field when icon is clicked
-            -
            	 */
-            -
            	var update_link_fields = function(){
-            -
            		var url = $(this).data('url');
-            -
            		var name = $(this).data('name');
-            -
-            -
            		remove_icon_from_new_link();
-            -
            		$(this).addClass('active');
-            -
-            -
            		$('#custom-menu-item-url').val( 'http://' + url );
-            -
            		$('#custom-menu-item-name').val( name ).removeClass('input-with-default-title');
-            -
            	};
-            -
-            -
            	/**
-            -
            	 * Initial search and change event hook
-            -
            	 */
-            -
            	var init = function(){
-            -
            		$( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
-            -
            		$( '#menu-to-edit input.edit-menu-item-url' ).on( 'keyup', check_menu_item );
-            -
            		$( '#custom-menu-item-url' ).on( 'keyup', check_menu_item );
-            -
-            -
            		// Closest thing I can find to an event on new link add
-            -
            		$( '#custom-menu-item-name' ).on( 'blur', function(){
-            -
            			$( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
-            -
            			remove_icon_from_new_link();
-            -
            		});
-            -
-            -
            		display_icon_shortcuts();
-            -
            	};
-            -
-            -
            	// Fire this plugin
-            -
            	init();
-            -
             })( jQuery, MenuSocialIconsNetworks );


1	+ (function( $, icons ){
2	+ /**
3	+ * Variable "icons" from MenuSocialIconsNetworks, PHP: MSI_Frontend::$networks)
4	+ */
5	+
6	+ /**
7	+ * List of URLs to search for
8	+ */
9	+ var icon_urls = Object.keys( icons );
10	+
11	+ /**
12	+ * Iterate over all menu items, add icon if URL matches
13	+ */
14	+ var check_menu_item = function(){
15	+ var $input = $(this);
16	+ var url_value = $input.val();
17	+
18	+ var icon_url = get_icon_if_exists_for_url( url_value );
19	+
20	+ if ( icon_url ){
21	+ add_icon( $input, icon_url );
22	+ }else {
23	+ remove_icon( $input );
24	+ }
25	+ };
26	+
27	+ /**
28	+ * Check a URL to see if we have an icon for it
29	+ * @return string\|bool valid URL\|false
30	+ */
31	+ var get_icon_if_exists_for_url = function( url_value ) {
32	+ for (var i = 0; i < icon_urls.length; i++) {
33	+ if ( -1 != url_value.indexOf( icon_urls[i] ) ){
34	+ return icon_urls[i];
35	+ }
36	+ }
37	+
38	+ return false;
39	+ };
40	+
41	+ /**
42	+ * Add icon, either from New Link area or menu item title
43	+ */
44	+ var add_icon = function( $input, icon_url ){
45	+ if ( "custom-menu-item-url" == $input.attr('id') ) {
46	+ add_icon_to_new_link( $input, icon_url );
47	+ }else {
48	+ add_icon_to_title( $input, icon_url );
49	+ }
50	+ };
51	+
52	+ /**
53	+ * Remove icon, either from New Link area or menu item title
54	+ */
55	+ var remove_icon = function( $input ){
56	+ if ( "custom-menu-item-url" == $input.attr('id') ) {
57	+ remove_icon_from_new_link();
58	+ }else {
59	+ remove_icon_from_title( $input );
60	+ }
61	+ };
62	+
63	+ /**
64	+ * Add icon to New Link area
65	+ */
66	+ var add_icon_to_new_link = function( $input, icon_url ){
67	+ remove_icon_from_new_link();
68	+
69	+ $('#msi-shortcuts i').each( function(){
70	+ if ( icon_url == $(this).data('url') ) {
71	+ $(this).addClass('active');
72	+ }
73	+ });
74	+
75	+ };
76	+
77	+ /**
78	+ * Add an icon to menu title bar
79	+ */
80	+ var add_icon_to_title = function( $input, icon_url ){
81	+ // Identify title element and build appropriate icon
82	+ var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
83	+
84	+ var $icon = get_icon_from_url( icon_url );
85	+
86	+ // Add icon and move title text over
87	+ remove_icon_from_title( $input );
88	+ $title.prepend( $icon );
89	+ $title.find("span.item-title").addClass("has-social-icon");
90	+ };
91	+
92	+ /**
93	+ * Remove icon from title area of menu item
94	+ */
95	+ var remove_icon_from_title = function( $input ) {
96	+ var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
97	+
98	+ $title.children('i').remove();
99	+ $title.find("span.item-title").removeClass("has-social-icon");
100	+ };
101	+
102	+ /**
103	+ * Remove icon from New Link area
104	+ */
105	+ var remove_icon_from_new_link = function(){
106	+ $('#msi-shortcuts i').removeClass('active');
107	+ };
108	+
109	+ /**
110	+ * Take a matched URL and create an icon from info looked up in icons object
111	+ */
112	+ var get_icon_from_url = function( url ){
113	+ var $icon = $("<i>").addClass( icons[ url ].icon ).addClass('fa').addClass('fa-fw');
114	+
115	+ return $icon;
116	+ };
117	+
118	+ /**
119	+ * Take a matched URL and return the network name
120	+ */
121	+ var get_name_from_url = function( url ){
122	+ return icons[ url ].name;
123	+ };
124	+
125	+ /**
126	+ * Add shortcuts to all icons in Links menu
127	+ */
128	+ var display_icon_shortcuts = function(){
129	+ var $icon, name;
130	+ var $wrapper = $('<div>').attr('id', 'msi-shortcuts');
131	+
132	+ $wrapper.append( '<h4>Social Icons</h4>');
133	+
134	+ for (var i = 0; i < icon_urls.length; i++) {
135	+ // Skip short-links (duplicates)
136	+ if ( 'youtu.be' == icon_urls[i] \|\| 'instagr.am' == icon_urls[i] ) {
137	+ continue;
138	+ }
139	+
140	+ $icon = get_icon_from_url( icon_urls[i] );
141	+ name = get_name_from_url( icon_urls[i] );
142	+
143	+ $icon.data( 'url', icon_urls[i] );
144	+ $icon.data( 'name', name );
145	+
146	+ $icon.click( update_link_fields );
147	+
148	+ $wrapper.append( $icon );
149	+ }
150	+
151	+ $faq = $('<ul>').addClass('faq');
152	+
153	+ $faq.append( "<li><a href='http://youtube.com/watch?v=hA2rjDwmvms' target='_blank'>How to edit icon appearance</a></li>" );
154	+ $faq.append( "<li><a href='http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons' target='_blank'>How to request new icons</a></li>" );
155	+
156	+ $wrapper.append( $faq );
157	+
158	+ $('#customlinkdiv').append( $wrapper );
159	+ };
160	+
161	+ /**
162	+ * Insert icon URL into input field when icon is clicked
163	+ */
164	+ var update_link_fields = function(){
165	+ var url = $(this).data('url');
166	+ var name = $(this).data('name');
167	+
168	+ remove_icon_from_new_link();
169	+ $(this).addClass('active');
170	+
171	+ $('#custom-menu-item-url').val( 'http://' + url );
172	+ $('#custom-menu-item-name').val( name ).removeClass('input-with-default-title');
173	+ };
174	+
175	+ /**
176	+ * Initial search and change event hook
177	+ */
178	+ var init = function(){
179	+ $( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
180	+ $( '#menu-to-edit input.edit-menu-item-url' ).on( 'keyup', check_menu_item );
181	+ $( '#custom-menu-item-url' ).on( 'keyup', check_menu_item );
182	+
183	+ // Closest thing I can find to an event on new link add
184	+ $( '#custom-menu-item-name' ).on( 'blur', function(){
185	+ $( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
186	+ remove_icon_from_new_link();
187	+ });
188	+
189	+ display_icon_shortcuts();
190	+ };
191	+
192	+ // Fire this plugin
193	+ init();
194	+
195	})( jQuery, MenuSocialIconsNetworks );

plugin.php CHANGED Viewed

@@ -1,49 +1,49 @@
-            -
            <?php
-            -
            /*
-            -
            Plugin Name: Menu Social Icons
-            -
            Description: Change menu links to social sites to icons automatically. Uses <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a> and supports: Bitbucket, Dribbble, Dropbox, Flickr, Foursquare, Gittip, Instagram, RenRen, Stack Overflow, Trello, Tumblr, VK, Weibo, Xing, and YouTube.
-            -
            Version: 1.3.7
-            -
            Author: Brainstorm Media
-            -
            Author URI: http://brainstormmedia.com
-            -
            License: GPLv2 or later
-            -
            License URI: http://www.gnu.org/licenses/gpl-2.0.html
-            -
            */
-            -
-            -
            define( 'MSI_PLUGIN_FILE', __FILE__ );
-            -
            define( 'MSI_VERSION', '1.3.7' );
-            -
-            -
            add_action( 'init', 'storm_menu_social_icons_init' );
-            -
-            -
            function storm_menu_social_icons_init() {
-            -
-            -
            	// PHP Version Check
-            -
            	$php_is_outdated = version_compare( PHP_VERSION, '5.2', '<' );
-            -
-            -
            	// Only exit and warn if on admin page
-            -
            	$okay_to_exit = is_admin() && ( !defined('DOING_AJAX') || !DOING_AJAX );
-            -
-            -
            	if ( $php_is_outdated ) {
-            -
                if ( $okay_to_exit ) {
-            -
                  require_once ABSPATH . '/wp-admin/includes/plugin.php';
-            -
                  deactivate_plugins( __FILE__ );
-            -
                  wp_die( sprintf( __( 'Menu Social Icons requires PHP 5.2 or higher, as does WordPress 3.2 and higher. The plugin has now disabled itself. For information on upgrading, %ssee this article%s.', 'menu-social-icons'), '<a href="http://codex.wordpress.org/Switching_to_PHP5" target="_blank">', '</a>') );
-            -
                } else {
-            -
                  return;
-            -
                }
-            -
            	}
-            -
-            -
            	require_once dirname ( __FILE__ ) . '/classes/msi-frontend.php';
-            -
            	require_once dirname ( __FILE__ ) . '/classes/msi-admin.php';
-            -
-            -
            	if ( class_exists( 'BWP_MINIFY' ) ) {
-            -
            		require_once dirname ( __FILE__ ) . '/classes/msi-bwp-compatibility.php';
-            -
            	}
-            -
-            -
            	// Frontend actions
-            -
            	// WP E-Commerce blocks other template_redirect actions by exiting at priority 10.
-            -
            	add_action( 'template_redirect', 'MSI_Frontend::get_instance', 5 );
-            -
-            -
            	// Admin actions
-            -
            	add_action( 'admin_init', 'MSI_Admin::get_instance' );
-            -
-            -
            }


1	+ <?php
2	+ /*
3	+ Plugin Name: Menu Social Icons
4	+ Description: Change menu links to social sites to icons automatically. Uses <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a> and supports: Bitbucket, Dribbble, Dropbox, Flickr, Foursquare, Gittip, Instagram, RenRen, Stack Overflow, Trello, Tumblr, VK, Weibo, Xing, and YouTube.
5	+ Version: 1.3.9
6	+ Author: Paul Clark
7	+ Author URI: http://pdclark.com
8	+ License: GPLv2 or later
9	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10	+ */
11	+
12	+ define( 'MSI_PLUGIN_FILE', __FILE__ );
13	+ define( 'MSI_VERSION', '1.3.9' );
14	+
15	+ add_action( 'init', 'storm_menu_social_icons_init' );
16	+
17	+ function storm_menu_social_icons_init() {
18	+
19	+ // PHP Version Check
20	+ $php_is_outdated = version_compare( PHP_VERSION, '5.2', '<' );
21	+
22	+ // Only exit and warn if on admin page
23	+ $okay_to_exit = is_admin() && ( !defined('DOING_AJAX') \|\| !DOING_AJAX );
24	+
25	+ if ( $php_is_outdated ) {
26	+ if ( $okay_to_exit ) {
27	+ require_once ABSPATH . '/wp-admin/includes/plugin.php';
28	+ deactivate_plugins( __FILE__ );
29	+ wp_die( sprintf( __( 'Menu Social Icons requires PHP 5.2 or higher, as does WordPress 3.2 and higher. The plugin has now disabled itself. For information on upgrading, %ssee this article%s.', 'menu-social-icons'), '<a href="http://codex.wordpress.org/Switching_to_PHP5" target="_blank">', '</a>') );
30	+ } else {
31	+ return;
32	+ }
33	+ }
34	+
35	+ require_once dirname ( __FILE__ ) . '/classes/msi-frontend.php';
36	+ require_once dirname ( __FILE__ ) . '/classes/msi-admin.php';
37	+
38	+ if ( class_exists( 'BWP_MINIFY' ) ) {
39	+ require_once dirname ( __FILE__ ) . '/classes/msi-bwp-compatibility.php';
40	+ }
41	+
42	+ // Frontend actions
43	+ // WP E-Commerce blocks other template_redirect actions by exiting at priority 10.
44	+ add_action( 'template_redirect', 'MSI_Frontend::get_instance', 5 );
45	+
46	+ // Admin actions
47	+ add_action( 'admin_init', 'MSI_Admin::get_instance' );
48	+
49	+ }

readme.txt CHANGED Viewed

@@ -1,233 +1,241 @@
-            -
            === Menu Social Icons ===
-            -
            Contributors: brainstormmedia, pdclark
-            -
            Plugin URI: https://github.com/brainstormmedia/menu-social-icons
-            -
            Author URI: http://brainstormmedia.com
-            -
            Tags: social, icons, menus, FontAwesome, social media, easy
-            -
            Requires at least: 3.4
-            -
            Tested up to: 3.7.1
-            -
            Stable tag: 1.3.7
-            -
            License: GPLv2
-            -
            License URI: http://www.gnu.org/licenses/gpl-2.0.html
-            -
-            -
            Add social icons to your WordPress menu items automatically.
-            -
-            -
            == Description ==
-            -
-            -
            This plugin changes social website links in any of your WordPress menus to use icons from FontAwesome.
-            -
-            -
            No configuration is necessary, other having links to your social media profiles in the built-in WordPress menus. Add links to any of these social sites under `Appearance > Menus`, then enable the plugin.
-            -
-            -
            http://www.youtube.com/watch?v=AS3hLeyV4S0
-            -
-            -
            **Supported Sites**
-            -
-            -
            `
-            -
            bitbucket.org           dribbble.com         dropbox.com
-            -
            facebook.com            flickr.com           foursquare.com
-            -
            github.com              gittip.com           instagram.com
-            -
            linkedin.com            mailto:(email)       pinterest.com
-            -
            plus.google.com         renren.com           stackoverflow.com
-            -
            *stackexchange.com      trello.com           tumblr.com
-            -
            twitter.com             *vimeo.com           vk.com
-            -
            weibo.com               xing.com             youtube.com
-            -
-            -
            *Requires storm_social_icons_use_latest be turned on. (See below.)
-            -
            `
-            -
-            -
            **Changing Icon Appearance**
-            -
-            -
            If you want to edit the appearance of the icons in ways that the options below don't provide, you can do more with custom CSS to match your theme. This video walks through the process:
-            -
-            -
            http://youtube.com/watch?v=hA2rjDwmvms
-            -
-            -
            **Option: Add Vimeo and Stack Exchange**
-            -
-            -
            To use FontAwesome 4.0, which drops support for **IE7**, but adds **vimeo.com** and **stackexchange.com**, add this to your theme's **functions.php** file:
-            -
            `add_filter( 'storm_social_icons_use_latest', '__return_true' );`
-            -
-            -
            **Option: Show Text**
-            -
-            -
            To show menu item text in addition to the icons, add this to your theme's **functions.php** file:
-            -
            `add_filter( 'storm_social_icons_hide_text', '__return_false' );`
-            -
-            -
            **Option: Alternate Icons**
-            -
-            -
            To show an alternative icon style, where logos are cut out of signs, , add this to your theme's **functions.php** file:
-            -
            `add_filter( 'storm_social_icons_type', create_function( '', 'return "icon-sign";' ) );`
-            -
-            -
            **Option: Icon Sizes**
-            -
-            -
            To vary icon sizes, add this to your theme's **functions.php** file: (Default is 2x)
-            -
-            -
                add_filter( 'storm_social_icons_size', create_function( '', 'return "normal";' ) );
-            -
                add_filter( 'storm_social_icons_size', create_function( '', 'return "large";' ) );
-            -
                add_filter( 'storm_social_icons_size', create_function( '', 'return "2x";' ) );
-            -
                add_filter( 'storm_social_icons_size', create_function( '', 'return "3x";' ) );
-            -
                add_filter( 'storm_social_icons_size', create_function( '', 'return "4x";' ) );
-            -
-            -
            **Option: Add More Icons**
-            -
-            -
            Add icons from [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for other URLs. For example, an RSS feed:
-            -
-            -
                add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
-            -
                function storm_social_icons_networks( $networks ) {
-            -
-            -
                    $extra_icons = array (
-            -
            	        '/feed' => array(                  // Enable this icon for any URL containing this text
-            -
                            'name' => 'RSS',               // Default menu item label
-            -
                            'class' => 'rss',              // Custom class
-            -
                            'icon' => 'icon-rss',          // FontAwesome class
-            -
                            'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
-            -
                        ),
-            -
                    );
-            -
-            -
                    $extra_icons = array_merge( $networks, $extra_icons );
-            -
                    return $extra_icons;
-            -
-            -
                }
-            -
-            -
            **Option: Change HTML Output**
-            -
-            -
            This is useful for developers using the plugin with custom icon sets.
-            -
-            -
            Edit icon HTML output:
-            -
            `
-            -
            add_filter( 'storm_social_icons_icon_html', 'storm_social_icons_icon_html', 10, 4 );
-            -
-            -
            function storm_social_icons_icon_html( $html, $size, $icon, $show_text ) {
-            -
                $html = "<i class='$size $icon $show_text'></i>";
-            -
                return $html;
-            -
            }
-            -
            `
-            -
-            -
            Edit title HTML output:
-            -
            `
-            -
            add_filter( 'storm_social_icons_title_html', 'storm_social_icons_title_html', 10, 2 );
-            -
-            -
            function storm_social_icons_title_html( $html, $title ){
-            -
                $html = "<span class='fa-hidden'>$title</span>";
-            -
                return $html;
-            -
            }
-            -
            `
-            -
-            -
            Edit all link attributes (WordPress core filter):
-            -
-            -
            `
-            -
            add_filter( 'wp_nav_menu_objects', 'storm_wp_nav_menu_objects', 7, 2 );
-            -
-            -
            function storm_wp_nav_menu_objects( $sorted_menu_items, $args ){
-            -
-            -
                foreach( $sorted_menu_items as &$item ) {
-            -
-            -
                    if ( 0 != $item->menu_item_parent ) {
-            -
                        // Skip submenu items
-            -
                        continue;
-            -
                    }
-            -
-            -
                    // Only apply changes to links containing this text.
-            -
                    $search_url = 'facebook.com';
-            -
-            -
                    if ( false !== strpos( $item->url, $search_url ) ) {
-            -
-            -
                        // Add a custom class
-            -
                        $item->classes[] = 'some-custom-class';
-            -
-            -
                        // Add custom HTML inside the link
-            -
                        $item->title = '<strong>custom html</strong>' . $item->title;
-            -
-            -
                    }
-            -
                }
-            -
-            -
                return $sorted_menu_items;
-            -
-            -
            }
-            -
            `
-            -
-            -
            == Installation ==
-            -
-            -
            1. Search for "Menu Social Icons" under `WordPress Admin > Plugins > Add New`
-            -
            1. Activate the plugin.
-            -
-            -
            == Screenshots ==
-            -
-            -
            1. Icons and shortcuts in WordPress Menu Editor.
-            -
            1. Menu without the plugin activated.
-            -
            1. Menu with default settings.
-            -
            1. Alternative "icon-sign" display.
-            -
            1. Hidden text disabled.
-            -
            1. "normal" icon size
-            -
            1. "4x" icon size
-            -
-            -
            == Frequently Asked Questions ==
-            -
-            -
            = Can you add X icon? =
-            -
-            -
            Menu Social Icons is dependent on the [FontAwesome icon library](http://fortawesome.github.io/Font-Awesome). If an icon exists in FontAwesome, you can add a filter for it using the `storm_social_icons_networks` example shown in the plugin description.
-            -
-            -
            If an icon does not exist in FontAwesome, you can request see FontAwesome's instructions for [requesting new icons](http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons).
-            -
-            -
            = How can I change how the icons are aligned, positioned, colored, sized, etc. =
-            -
-            -
            See the tutorial video on editing appearance and the code samples for various options in the [plugin description](http://wordpress.org/plugins/menu-social-icons/).
-            -
-            -
            = Does this plugin install all of FontAwesome? =
-            -
-            -
            Yes. The plugin installs the complete FontAwesome package. You can use any of the icons in your HTML.
-            -
-            -
            = I don't see FontAwesome anywhere in the plugin! =
-            -
-            -
            We load FontAwesome onto your site using NetDNA's [Bootstrap CDN](http://www.bootstrapcdn.com/#tab_fontawesome) service. This makes it load much faster for your users.
-            -
-            -
            == Changelog ==
-            -
-            -
            = 1.3.7 =
-            -
-            -
            * New: Remove templates folder. Replace with filters `storm_social_icons_title_html` and `storm_social_icons_icon_html`. Add example of core `wp_nav_menu_objects` filter to readme.
-            -
-            -
            = 1.3.6 =
-            -
-            -
            * New: Allow themes to override HTML output with msi-templates directory.
-            -
-            -
            = 1.3.5 =
-            -
-            -
            * Fix: Horizontal scrollbar on RTL layouts. Thanks [@mascatu](http://wordpress.org/support/profile/mascatu) for the [bug report](http://wordpress.org/support/topic/rtl-issue-1).
-            -
-            -
            = 1.3.4 =
-            -
-            -
            * Fix: Work around compatibility issue with [Better WordPress Minify](http://wordpress.org/plugins/bwp-minify/) plugin.
-            -
-            -
            = 1.3.3 =
-            -
-            -
            * Fix: Work around bug in WP E-commerce that causes other plugins to not load properly on product pages. Thanks [@elfary](http://wordpress.org/support/topic/menu-with-e-commerce). See [bug report to WP E-commerce](http://wordpress.org/support/topic/other-plugins-blocked-from-loading-on-product-pages).
-            -
-            -
            = 1.3.2 =
-            -
-            -
            * Fix: Properly enqueue stylesheets
-            -
            * Fix: Set FontAwesome 4.0 to off by default
-            -
-            -
            = 1.3 =
-            -
-            -
            * New: Preview icons and shortcuts in the WordPress Menu Editor.
-            -
            * New: vimeo.com and stackexchange.com icons when FontAwesome 4.0 is turned on.
-            -
            * Notice: FontAwesome 4.0 removes support for IE7, so it is off by default. Use the filter `storm_social_icons_use_latest` shown in the readme to turn on FontAwesome 4.0.
-            -
-            -
            = 1.2 =
-            -
-            -
            * New: Filter for custom icons and URLs.
-            -
            * New: Icon for `mailto:` links.
-            -
            * [Thanks to mmcginnis](http://wordpress.org/support/topic/just-works-40) for both of these changes.
-            -
-            -
            = 1.1 =
-            -
-            -
            * New: Upgrade to FontAwesome 3.2.1
-            -
            * New: ots of new site icons: bitbucket.org, dribbble.com, dropbox.com, flickr.com, foursquare.com, gittip.com, instagram.com, renren.com, stackoverflow.com, trello.com, tumblr.com, vk.com, weibo.com, xing.com, youtube.com
-            -
-            -
            = 1.0 =
-            -
-            -
            * Initial public release.
-            -
-            -
            == Upgrade Notice ==
-            -
-            -
            = 1.3.7 =
-            -
-            -
            * New: Remove templates folder. Replace with filters `storm_social_icons_title_html` and `storm_social_icons_icon_html`. Add example of core `wp_nav_menu_objects` filter to readme.


1	+ === Menu Social Icons ===
2	+ Contributors: pdclark
3	+ Plugin URI: https://github.com/pdclark/menu-social-icons
4	+ Author URI: http://pdclark.com
5	+ Tags: social, icons, menus, FontAwesome, social media, easy
6	+ Requires at least: 3.4
7	+ Tested up to: 3.8.1
8	+ Stable tag: 1.3.9
9	+ License: GPLv2
10	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
11	+
12	+ Add social icons to your WordPress menu items automatically.
13	+
14	+ == Description ==
15	+
16	+ This plugin changes social website links in any of your WordPress menus to use icons from FontAwesome.
17	+
18	+ No configuration is necessary, other having links to your social media profiles in the built-in WordPress menus. Add links to any of these social sites under `Appearance > Menus`, then enable the plugin.
19	+
20	+ http://www.youtube.com/watch?v=AS3hLeyV4S0
21	+
22	+ Supported Sites
23	+
24	+ `
25	+ bitbucket.org dribbble.com dropbox.com
26	+ facebook.com flickr.com foursquare.com
27	+ github.com gittip.com instagram.com
28	+ linkedin.com mailto:(email) pinterest.com
29	+ plus.google.com renren.com stackoverflow.com
30	+ *stackexchange.com trello.com tumblr.com
31	+ twitter.com *vimeo.com vk.com
32	+ weibo.com xing.com youtube.com
33	+
34	+ *Requires storm_social_icons_use_latest be turned on. (See below.)
35	+ `
36	+
37	+ Changing Icon Appearance
38	+
39	+ If you want to edit the appearance of the icons in ways that the options below don't provide, you can do more with custom CSS to match your theme. This video walks through the process:
40	+
41	+ http://youtube.com/watch?v=hA2rjDwmvms
42	+
43	+ Option: Add Vimeo and Stack Exchange
44	+
45	+ To use FontAwesome 4.0+, which drops support for IE7, but adds vimeo.com and stackexchange.com, add this to your theme's functions.php file:
46	+ `add_filter( 'storm_social_icons_use_latest', '__return_true' );`
47	+
48	+ Option: Show Text
49	+
50	+ To show menu item text in addition to the icons, add this to your theme's functions.php file:
51	+ `add_filter( 'storm_social_icons_hide_text', '__return_false' );`
52	+
53	+ Option: Alternate Icons
54	+
55	+ To show an alternative icon style, where logos are cut out of signs, , add this to your theme's functions.php file:
56	+ `add_filter( 'storm_social_icons_type', create_function( '', 'return "icon-sign";' ) );`
57	+
58	+ Option: Icon Sizes
59	+
60	+ To vary icon sizes, add this to your theme's functions.php file: (Default is 2x)
61	+
62	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "normal";' ) );
63	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "large";' ) );
64	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "2x";' ) );
65	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "3x";' ) );
66	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "4x";' ) );
67	+
68	+ Option: Add More Icons
69	+
70	+ Add icons from [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for other URLs. For example, an RSS feed:
71	+
72	+ add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
73	+ function storm_social_icons_networks( $networks ) {
74	+
75	+ $extra_icons = array (
76	+ '/feed' => array( // Enable this icon for any URL containing this text
77	+ 'name' => 'RSS', // Default menu item label
78	+ 'class' => 'rss', // Custom class
79	+ 'icon' => 'icon-rss', // FontAwesome class
80	+ 'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
81	+ ),
82	+ );
83	+
84	+ $extra_icons = array_merge( $networks, $extra_icons );
85	+ return $extra_icons;
86	+
87	+ }
88	+
89	+ Option: Change HTML Output
90	+
91	+ This is useful for developers using the plugin with custom icon sets.
92	+
93	+ Edit icon HTML output:
94	+ `
95	+ add_filter( 'storm_social_icons_icon_html', 'storm_social_icons_icon_html', 10, 4 );
96	+
97	+ function storm_social_icons_icon_html( $html, $size, $icon, $show_text ) {
98	+ $html = "<i class='$size $icon $show_text'></i>";
99	+ return $html;
100	+ }
101	+ `
102	+
103	+ Edit title HTML output:
104	+ `
105	+ add_filter( 'storm_social_icons_title_html', 'storm_social_icons_title_html', 10, 2 );
106	+
107	+ function storm_social_icons_title_html( $html, $title ){
108	+ $html = "<span class='fa-hidden'>$title</span>";
109	+ return $html;
110	+ }
111	+ `
112	+
113	+ Edit all link attributes (WordPress core filter):
114	+
115	+ `
116	+ add_filter( 'wp_nav_menu_objects', 'storm_wp_nav_menu_objects', 7, 2 );
117	+
118	+ function storm_wp_nav_menu_objects( $sorted_menu_items, $args ){
119	+
120	+ foreach( $sorted_menu_items as &$item ) {
121	+
122	+ if ( 0 != $item->menu_item_parent ) {
123	+ // Skip submenu items
124	+ continue;
125	+ }
126	+
127	+ // Only apply changes to links containing this text.
128	+ $search_url = 'facebook.com';
129	+
130	+ if ( false !== strpos( $item->url, $search_url ) ) {
131	+
132	+ // Add a custom class
133	+ $item->classes[] = 'some-custom-class';
134	+
135	+ // Add custom HTML inside the link
136	+ $item->title = '<strong>custom html</strong>' . $item->title;
137	+
138	+ }
139	+ }
140	+
141	+ return $sorted_menu_items;
142	+
143	+ }
144	+ `
145	+
146	+ == Installation ==
147	+
148	+ 1. Search for "Menu Social Icons" under `WordPress Admin > Plugins > Add New`
149	+ 1. Activate the plugin.
150	+
151	+ == Screenshots ==
152	+
153	+ 1. Icons and shortcuts in WordPress Menu Editor.
154	+ 1. Menu without the plugin activated.
155	+ 1. Menu with default settings.
156	+ 1. Alternative "icon-sign" display.
157	+ 1. Hidden text disabled.
158	+ 1. "normal" icon size
159	+ 1. "4x" icon size
160	+
161	+ == Frequently Asked Questions ==
162	+
163	+ = Can you add X icon? =
164	+
165	+ Menu Social Icons is dependent on the [FontAwesome icon library](http://fortawesome.github.io/Font-Awesome). If an icon exists in FontAwesome, you can add a filter for it using the `storm_social_icons_networks` example shown in the plugin description.
166	+
167	+ If an icon does not exist in FontAwesome, you can request see FontAwesome's instructions for [requesting new icons](http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons).
168	+
169	+ = How can I change how the icons are aligned, positioned, colored, sized, etc. =
170	+
171	+ See the tutorial video on editing appearance and the code samples for various options in the [plugin description](http://wordpress.org/plugins/menu-social-icons/).
172	+
173	+ = Does this plugin install all of FontAwesome? =
174	+
175	+ Yes. The plugin installs the complete FontAwesome package. You can use any of the icons in your HTML.
176	+
177	+ = I don't see FontAwesome anywhere in the plugin! =
178	+
179	+ We load FontAwesome onto your site using NetDNA's [Bootstrap CDN](http://www.bootstrapcdn.com/#tab_fontawesome) service. This makes it load much faster for your users.
180	+
181	+ == Changelog ==
182	+
183	+ = 1.3.9 =
184	+
185	+ * Fix: Change `use_latest` filter to request "latest" version of FontAwesome, rather than stopping at `4.0.0`. Current version is `4.0.3`.
186	+
187	+ = 1.3.8 =
188	+
189	+ * Fix: Title notice.
190	+
191	+ = 1.3.7 =
192	+
193	+ * New: Remove templates folder. Replace with filters `storm_social_icons_title_html` and `storm_social_icons_icon_html`. Add example of core `wp_nav_menu_objects` filter to readme.
194	+
195	+ = 1.3.6 =
196	+
197	+ * New: Allow themes to override HTML output with msi-templates directory.
198	+
199	+ = 1.3.5 =
200	+
201	+ * Fix: Horizontal scrollbar on RTL layouts. Thanks [@mascatu](http://wordpress.org/support/profile/mascatu) for the [bug report](http://wordpress.org/support/topic/rtl-issue-1).
202	+
203	+ = 1.3.4 =
204	+
205	+ * Fix: Work around compatibility issue with [Better WordPress Minify](http://wordpress.org/plugins/bwp-minify/) plugin.
206	+
207	+ = 1.3.3 =
208	+
209	+ * Fix: Work around bug in WP E-commerce that causes other plugins to not load properly on product pages. Thanks [@elfary](http://wordpress.org/support/topic/menu-with-e-commerce). See [bug report to WP E-commerce](http://wordpress.org/support/topic/other-plugins-blocked-from-loading-on-product-pages).
210	+
211	+ = 1.3.2 =
212	+
213	+ * Fix: Properly enqueue stylesheets
214	+ * Fix: Set FontAwesome 4.0 to off by default
215	+
216	+ = 1.3 =
217	+
218	+ * New: Preview icons and shortcuts in the WordPress Menu Editor.
219	+ * New: vimeo.com and stackexchange.com icons when FontAwesome 4.0 is turned on.
220	+ * Notice: FontAwesome 4.0 removes support for IE7, so it is off by default. Use the filter `storm_social_icons_use_latest` shown in the readme to turn on FontAwesome 4.0.
221	+
222	+ = 1.2 =
223	+
224	+ * New: Filter for custom icons and URLs.
225	+ * New: Icon for `mailto:` links.
226	+ * [Thanks to mmcginnis](http://wordpress.org/support/topic/just-works-40) for both of these changes.
227	+
228	+ = 1.1 =
229	+
230	+ * New: Upgrade to FontAwesome 3.2.1
231	+ * New: ots of new site icons: bitbucket.org, dribbble.com, dropbox.com, flickr.com, foursquare.com, gittip.com, instagram.com, renren.com, stackoverflow.com, trello.com, tumblr.com, vk.com, weibo.com, xing.com, youtube.com
232	+
233	+ = 1.0 =
234	+
235	+ * Initial public release.
236	+
237	+ == Upgrade Notice ==
238	+
239	+ = 1.3.9 =
240	+
241	+ * Fix: Change `use_latest` filter to request "latest" version of FontAwesome, rather than stopping at `4.0.0`. Current version is `4.0.3`.

trunk/classes/msi-admin.php ADDED Viewed

	@@ -0,0 +1,73 @@


1	+ <?php
2	+
3	+ class MSI_Admin {
4	+ /**
5	+ * @var Storm_Menu_Social_Icons Instance of the class.
6	+ */
7	+ private static $instance = false;
8	+
9	+ /**
10	+ * Don't use this. Use ::get_instance() instead.
11	+ */
12	+ public function __construct() {
13	+ if ( !self::$instance ) {
14	+ $message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
15	+ wp_die( $message );
16	+ }
17	+ }
18	+
19	+ public static function get_instance() {
20	+ if ( !is_a( self::$instance, __CLASS__ ) ) {
21	+ self::$instance = true;
22	+ self::$instance = new self();
23	+ self::$instance->init();
24	+ }
25	+ return self::$instance;
26	+ }
27	+
28	+ /**
29	+ * Initial setup. Called by get_instance.
30	+ */
31	+ protected function init() {
32	+
33	+ add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
34	+
35	+ }
36	+
37	+ public function admin_enqueue_scripts( $page ) {
38	+
39	+ if ( 'nav-menus.php' == $page ) {
40	+ $msi_frontend = MSI_Frontend::get_instance();
41	+
42	+ $msi_frontend->wp_enqueue_scripts();
43	+
44	+ wp_enqueue_script( 'menu-social-icons-admin', plugins_url( 'js/menu-social-icons-admin.js', MSI_PLUGIN_FILE ), array( 'jquery' ), MSI_VERSION, true );
45	+ wp_enqueue_style( 'menu-social-icons-admin', plugins_url( 'css/menu-social-icons-admin.css', MSI_PLUGIN_FILE ), array(), MSI_VERSION );
46	+
47	+ wp_localize_script( 'menu-social-icons-admin', 'MenuSocialIconsNetworks', $this->get_networks() );
48	+ }
49	+
50	+ }
51	+
52	+ /**
53	+ * Get networks array to pass to javascript
54	+ * Set icon-sign values as icon values if icon-sign in use.
55	+ * Strip remaining icon-sign values
56	+ */
57	+ public function get_networks() {
58	+ $msi_frontend = MSI_Frontend::get_instance();
59	+
60	+ $networks = $msi_frontend->networks;
61	+
62	+ foreach ( $networks as &$network ) {
63	+ if ( 'icon-sign' == $msi_frontend->type ) {
64	+ $network['icon'] = $network['icon-sign'];
65	+ }
66	+ unset( $network['icon-sign'] );
67	+ }
68	+
69	+ return $networks;
70	+ }
71	+
72	+
73	+ }

trunk/classes/msi-bwp-compatibility.php ADDED Viewed

	@@ -0,0 +1,12 @@


1	+ <?php
2	+ /**
3	+ * Better WordPress Minify fails to recognize URLs starting with "//"
4	+ * Force BWP to ignore NetDNA-hosted fontawesome scripts.
5	+ *
6	+ * @see http://wordpress.org/plugins/bwp-minify/
7	+ */
8	+ function msi_bwp_dont_minify_fontawesome($excluded) {
9	+ $excluded = array('fontawesome', 'fontawesome-ie');
10	+ return $excluded;
11	+ }
12	+ add_filter('bwp_minify_style_ignore', 'msi_bwp_dont_minify_fontawesome');

trunk/classes/msi-frontend.php ADDED Viewed

	@@ -0,0 +1,281 @@


1	+ <?php
2	+
3	+ class MSI_Frontend {
4	+
5	+ /**
6	+ * Should we hide the original menu text, or put the icon before it?
7	+ * Override with storm_social_icons_hide_text filter
8	+ *
9	+ * @var bool
10	+ */
11	+ var $hide_text = true;
12	+
13	+ /**
14	+ * Contains 3.2.1 FontAwesome icons only. See $networks_latest for additional 4.0 icons.
15	+ * @var array links social site URLs with CSS classes for icons
16	+ */
17	+ var $networks = array(
18	+ 'bitbucket.org' => array( 'name' => 'Bitbucket', 'class' => 'bitbucket', 'icon' => 'icon-bitbucket', 'icon-sign' => 'icon-bitbucket-sign' ),
19	+ 'dribbble.com' => array( 'name' => 'Dribbble', 'class' => 'dribbble', 'icon' => 'icon-dribbble', 'icon-sign' => 'icon-dribbble' ),
20	+ 'dropbox.com' => array( 'name' => 'Dropbox', 'class' => 'dropbox', 'icon' => 'icon-dropbox', 'icon-sign' => 'icon-dropbox' ),
21	+ 'facebook.com' => array( 'name' => 'Facebook', 'class' => 'facebook', 'icon' => 'icon-facebook', 'icon-sign' => 'icon-facebook-sign' ),
22	+ 'flickr.com' => array( 'name' => 'Flickr', 'class' => 'flickr', 'icon' => 'icon-flickr', 'icon-sign' => 'icon-flickr' ),
23	+ 'foursquare.com' => array( 'name' => 'Foursquare', 'class' => 'foursquare', 'icon' => 'icon-foursquare', 'icon-sign' => 'icon-foursquare' ),
24	+ 'github.com' => array( 'name' => 'Github', 'class' => 'github', 'icon' => 'icon-github', 'icon-sign' => 'icon-github-sign' ),
25	+ 'gittip.com' => array( 'name' => 'GitTip', 'class' => 'gittip', 'icon' => 'icon-gittip', 'icon-sign' => 'icon-gittip' ),
26	+ 'instagr.am' => array( 'name' => 'Instagram', 'class' => 'instagram', 'icon' => 'icon-instagram', 'icon-sign' => 'icon-instagram' ),
27	+ 'instagram.com' => array( 'name' => 'Instagram', 'class' => 'instagram', 'icon' => 'icon-instagram', 'icon-sign' => 'icon-instagram' ),
28	+ 'linkedin.com' => array( 'name' => 'LinkedIn', 'class' => 'linkedin', 'icon' => 'icon-linkedin', 'icon-sign' => 'icon-linkedin-sign' ),
29	+ 'mailto:' => array( 'name' => 'Email', 'class' => 'envelope', 'icon' => 'icon-envelope', 'icon-sign' => 'icon-envelope-alt' ),
30	+ 'pinterest.com' => array( 'name' => 'Pinterest', 'class' => 'pinterest', 'icon' => 'icon-pinterest', 'icon-sign' => 'icon-pinterest-sign' ),
31	+ 'plus.google.com' => array( 'name' => 'Google+', 'class' => 'google-plus', 'icon' => 'icon-google-plus', 'icon-sign' => 'icon-google-plus-sign' ),
32	+ 'renren.com' => array( 'name' => 'RenRen', 'class' => 'renren', 'icon' => 'icon-renren', 'icon-sign' => 'icon-renren' ),
33	+ 'stackoverflow.com' => array( 'name' => 'Stack Exchange', 'class' => 'stackexchange', 'icon' => 'icon-stackexchange', 'icon-sign' => 'icon-stackexchange' ),
34	+ 'trello.com' => array( 'name' => 'Trello', 'class' => 'trello', 'icon' => 'icon-trello', 'icon-sign' => 'icon-trello' ),
35	+ 'tumblr.com' => array( 'name' => 'Tumblr', 'class' => 'tumblr', 'icon' => 'icon-tumblr', 'icon-sign' => 'icon-tumblr' ),
36	+ 'twitter.com' => array( 'name' => 'Twitter', 'class' => 'twitter', 'icon' => 'icon-twitter', 'icon-sign' => 'icon-twitter-sign' ),
37	+ 'vk.com' => array( 'name' => 'VK', 'class' => 'vk', 'icon' => 'icon-vk', 'icon-sign' => 'icon-vk' ),
38	+ 'weibo.com' => array( 'name' => 'Weibo', 'class' => 'weibo', 'icon' => 'icon-weibo', 'icon-sign' => 'icon-weibo' ),
39	+ 'xing.com' => array( 'name' => 'Xing', 'class' => 'xing', 'icon' => 'icon-xing', 'icon-sign' => 'icon-xing' ),
40	+ 'youtu.be' => array( 'name' => 'YouTube', 'class' => 'youtube', 'icon' => 'icon-youtube', 'icon-sign' => 'icon-youtube-sign' ),
41	+ 'youtube.com' => array( 'name' => 'YouTube', 'class' => 'youtube', 'icon' => 'icon-youtube', 'icon-sign' => 'icon-youtube-sign' ),
42	+ );
43	+
44	+ /**
45	+ * Contains 4.0+ FontAwesome icons only.
46	+ * @var array links social site URLs with CSS classes for icons
47	+ */
48	+ var $networks_latest = array(
49	+ 'stackoverflow.com' => array( 'name' => 'Stack Overflow', 'class' => 'stack-overflow', 'icon' => 'fa fa-stack-overflow', 'icon-sign' => 'fa fa-stack-overflow' ),
50	+ 'stackexchange.com' => array( 'name' => 'Stack Exchange', 'class' => 'stack-exchange', 'icon' => 'fa fa-stack-exchange', 'icon-sign' => 'fa fa-stack-exchange' ),
51	+ 'vimeo.com' => array( 'name' => 'Vimeo', 'class' => 'vimeo', 'icon' => 'fa fa-vimeo-square', 'icon-sign' => 'fa fa-vimeo-square' ),
52	+ 'mailto:' => array( 'name' => 'Email', 'class' => 'envelope', 'icon' => 'fa fa-envelope', 'icon-sign' => 'fa fa-envelope-o' ),
53	+ );
54	+
55	+ /**
56	+ * Class to apply to the <li> of all social menu items
57	+ */
58	+ var $li_class = 'social-icon';
59	+
60	+ /**
61	+ * FontAwesome 4.0+ -- Size options available for icon output
62	+ * These are sizes that render as "pixel perfect" according to FontAwesome.
63	+ */
64	+ var $icon_sizes = array(
65	+ 'normal' => '',
66	+ 'large' => 'fa-lg',
67	+ '2x' => 'fa-2x',
68	+ '3x' => 'fa-3x',
69	+ '4x' => 'fa-4x',
70	+ '5x' => 'fa-5x',
71	+ );
72	+
73	+ /**
74	+ * FontAwesome 3.2.1 -- Size options available for icon output
75	+ * These are sizes that render as "pixel perfect" according to FontAwesome.
76	+ */
77	+ var $legacy_icon_sizes = array(
78	+ 'normal' => '',
79	+ 'large' => 'icon-large',
80	+ '2x' => 'icon-2x',
81	+ '3x' => 'icon-3x',
82	+ '4x' => 'icon-4x',
83	+ );
84	+
85	+ /**
86	+ * Size of the icons to display.
87	+ * Override with storm_social_icons_size filter
88	+ *
89	+ * @var string normal\|large\|2x\|3x\|4x
90	+ */
91	+ var $size = '2x';
92	+
93	+ /**
94	+ * Display normal icons, or icons cut out of a box (sign) shape?
95	+ * Override with storm_social_icons_type filter
96	+ *
97	+ * @var string icon\|icon-sign
98	+ */
99	+ var $type = 'icon';
100	+
101	+ /**
102	+ * @var bool If true, use FontAwesome 4.0+, which drops IE7, but adds Vimeo
103	+ */
104	+ var $use_latest = false;
105	+
106	+ /**
107	+ * @var Storm_Menu_Social_Icons Instance of the class.
108	+ */
109	+ private static $instance = false;
110	+
111	+ /**
112	+ * Don't use this. Use ::get_instance() instead.
113	+ */
114	+ public function __construct() {
115	+ if ( !self::$instance ) {
116	+ $message = '<code>' . __CLASS__ . '</code> is a singleton.<br/> Please get an instantiate it with <code>' . __CLASS__ . '::get_instance();</code>';
117	+ wp_die( $message );
118	+ }
119	+ }
120	+
121	+ public static function get_instance() {
122	+ if ( !is_a( self::$instance, __CLASS__ ) ) {
123	+ self::$instance = true;
124	+ self::$instance = new self();
125	+ self::$instance->init();
126	+ }
127	+ return self::$instance;
128	+ }
129	+
130	+ /**
131	+ * Initial setup. Called by get_instance.
132	+ */
133	+ protected function init() {
134	+
135	+ // Option to update to FontAwesome 4.0+ format (drops IE7 support)
136	+ $this->use_latest = apply_filters( 'storm_social_icons_use_latest', $this->use_latest );
137	+
138	+ if ( $this->use_latest ) {
139	+ add_filter( 'storm_social_icons_networks', array( $this, 'update_network_classes' ), 1000 );
140	+ }
141	+
142	+ $this->size = apply_filters( 'storm_social_icons_size', $this->size );
143	+ $this->type = apply_filters( 'storm_social_icons_type', $this->type );
144	+ $this->hide_text = apply_filters( 'storm_social_icons_hide_text', $this->hide_text );
145	+ $this->networks = apply_filters( 'storm_social_icons_networks', $this->networks );
146	+
147	+ add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
148	+ add_action( 'wp_print_scripts', array( $this, 'wp_print_scripts' ) );
149	+
150	+ add_filter( 'wp_nav_menu_objects', array( $this, 'wp_nav_menu_objects' ), 5, 2 );
151	+
152	+ // Shortcode for testing all fontawesome icons: [fontawesometest]
153	+ add_shortcode( 'fontawesometest', array( $this, 'shortcode_fontawesometest' ) );
154	+ add_action( 'fontawesometest', array( $this, 'fontawesometest' ) );
155	+
156	+ }
157	+
158	+ /**
159	+ * Load FontAwesome from NetDNA's Content Deliver Network (faster, likely to be cached)
160	+ * @see http://www.bootstrapcdn.com/#tab_fontawesome
161	+ */
162	+ public function wp_enqueue_scripts() {
163	+
164	+ if ( $this->use_latest ) {
165	+
166	+ // FontAwesome latest. Drops IE7 support.
167	+ wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css', array(), MSI_VERSION, 'all' );
168	+
169	+ }else {
170	+
171	+ // FontAwesome 3.2.1 -- support IE7, but lacks Vimeo
172	+ global $wp_styles;
173	+ wp_enqueue_style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css', array(), MSI_VERSION, 'all' );
174	+ wp_enqueue_style( 'fontawesome-ie', '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css', array( 'fontawesome' ), MSI_VERSION );
175	+
176	+ // Internet Explorer conditional comment
177	+ $wp_styles->add_data( 'fontawesome-ie', 'conditional', 'IE 7' );
178	+
179	+ }
180	+
181	+ }
182	+
183	+ /**
184	+ * Hide text visually, but keep available for screen readers.
185	+ * Just a few lines of stylesheet, so loading inline rather than adding another HTTP request.
186	+ */
187	+ public function wp_print_scripts() {
188	+ ?>
189	+ <style>
190	+ /* Accessible for screen readers but hidden from view */
191	+ .fa-hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
192	+ .rtl .fa-hidden { left:10000px; }
193	+ .fa-showtext { margin-right: 5px; }
194	+ </style>
195	+ <?php
196	+ }
197	+
198	+ /**
199	+ * Get icon HTML with appropriate classes depending on size and icon type
200	+ */
201	+ public function get_icon( $network ) {
202	+
203	+ // Switch between legacy or current icon size classes
204	+ $icon_sizes = ( $this->use_latest ) ? $this->icon_sizes : $this->legacy_icon_sizes;
205	+
206	+ $size = $icon_sizes[ $this->size ];
207	+ $icon = $network[ $this->type ];
208	+ $show_text = $this->hide_text ? '' : 'fa-showtext';
209	+
210	+ $html = "<i class='$size $icon $show_text'></i>";
211	+
212	+ return apply_filters( 'storm_social_icons_icon_html', $html, $size, $icon, $show_text );
213	+
214	+ }
215	+
216	+ /**
217	+ * Find social links in top-level menu items, add icon HTML
218	+ */
219	+ public function wp_nav_menu_objects( $sorted_menu_items, $args ){
220	+
221	+ foreach( $sorted_menu_items as &$item ) {
222	+ if ( 0 != $item->menu_item_parent ) {
223	+ // Skip submenu items
224	+ continue;
225	+ }
226	+
227	+ foreach( $this->networks as $url => $network ) {
228	+ if ( false !== strpos( $item->url, $url ) ) {
229	+
230	+ $item->classes[] = $this->li_class;
231	+ $item->classes[] = $network['class'];
232	+
233	+ if ( $this->hide_text ) {
234	+ $html = "<span class='fa-hidden'>{$item->title}</span>";
235	+ $item->title = apply_filters( 'storm_social_icons_title_html', $html, $item->title );
236	+ }
237	+
238	+ $item->title = $this->get_icon( $network ) . $item->title ;
239	+ }
240	+ }
241	+ }
242	+
243	+ return $sorted_menu_items;
244	+
245	+ }
246	+
247	+ /**
248	+ * Change size classes from 3.2.1 format to 4.0+ format.
249	+ *
250	+ * @param array $networks See $this->$networks
251	+ * @return array $networks Filtered to change "icon-" to "fa fa-"
252	+ */
253	+ public function update_network_classes( $networks ) {
254	+
255	+ foreach ( $networks as $url => &$values ) {
256	+ $values['icon'] = str_replace( 'icon-', 'fa fa-', $values['icon'] );
257	+ $values['icon-sign'] = str_replace( 'icon-', 'fa fa-', $values['icon-sign'] );
258	+ $values['icon-sign'] = str_replace( '-sign', '-square', $values['icon-sign'] );
259	+ }
260	+
261	+ $networks = array_merge( $networks, $this->networks_latest );
262	+
263	+ return $networks;
264	+ }
265	+
266	+ /**
267	+ * Test output of all FontAwesome icons
268	+ */
269	+ public function fontawesometest( $args ) {
270	+ include dirname( __FILE__ ) . '/font-awesome-test.html';
271	+ }
272	+
273	+ /**
274	+ * Shortcode to test output of all FontAwesome icons
275	+ */
276	+ public function shortcode_fontawesometest( $args ) {
277	+ ob_start();
278	+ $this->fontawesometest();
279	+ return ob_get_clean();
280	+ }
281	+ }

trunk/css/menu-social-icons-admin.css ADDED Viewed

	@@ -0,0 +1,45 @@


1	+ /* Icon sizes */
2	+ .menu-item-handle i.fa, #msi-shortcuts i.fa {
3	+ font-size: 28px;
4	+ }
5	+
6	+ /* Fixed width for FontAwesome 3.2.1 */
7	+ i.fa-fw {
8	+ width: 1.2857142857142858em;
9	+ text-align: center;
10	+ display:block;
11	+ float:left;
12	+ }
13	+
14	+ #msi-shortcuts i {
15	+ cursor: pointer;
16	+ margin: 0 5px 5px 0;
17	+ color: #333;
18	+ }
19	+ #msi-shortcuts i:hover {
20	+ color: #1A749D;
21	+ }
22	+ #msi-shortcuts h4 {
23	+ font-weight: normal;
24	+ font-style: italic;
25	+ }
26	+ #msi-shortcuts .faq {
27	+ padding-top:16px;
28	+ display:block;
29	+ clear:both;
30	+ }
31	+
32	+ /* Add Link active icon */
33	+ #msi-shortcuts i.active {
34	+ color: #1A749D;
35	+ }
36	+
37	+ /* Menu item handle */
38	+ .menu-item-handle i.fa {
39	+ position: absolute;
40	+ top: 4px;
41	+ left: 4px;
42	+ }
43	+ .menu-item-handle span.has-social-icon {
44	+ padding-left: 33px;
45	+ }

trunk/font-awesome-test.html ADDED Viewed

	@@ -0,0 +1,267 @@


1	+ <div class="container">
2	+ <section>
3	+ <div class="row">
4	+ <div class="span4">
5	+ <ul class="unstyled">
6	+ <li><i class="icon-2x"></i> icon-glass <span class="muted">(&#xf000;)</span></li>
7	+ <li><i class="icon-2x"></i> icon-music <span class="muted">(&#xf001;)</span></li>
8	+ <li><i class="icon-2x"></i> icon-search <span class="muted">(&#xf002;)</span></li>
9	+ <li><i class="icon-2x"></i> icon-envelope <span class="muted">(&#xf003;)</span></li>
10	+ <li><i class="icon-2x"></i> icon-heart <span class="muted">(&#xf004;)</span></li>
11	+ <li><i class="icon-2x"></i> icon-star <span class="muted">(&#xf005;)</span></li>
12	+ <li><i class="icon-2x"></i> icon-star-empty <span class="muted">(&#xf006;)</span></li>
13	+ <li><i class="icon-2x"></i> icon-user <span class="muted">(&#xf007;)</span></li>
14	+ <li><i class="icon-2x"></i> icon-film <span class="muted">(&#xf008;)</span></li>
15	+ <li><i class="icon-2x"></i> icon-th-large <span class="muted">(&#xf009;)</span></li>
16	+ <li><i class="icon-2x"></i> icon-th <span class="muted">(&#xf00a;)</span></li>
17	+ <li><i class="icon-2x"></i> icon-th-list <span class="muted">(&#xf00b;)</span></li>
18	+ <li><i class="icon-2x"></i> icon-ok <span class="muted">(&#xf00c;)</span></li>
19	+ <li><i class="icon-2x"></i> icon-remove <span class="muted">(&#xf00d;)</span></li>
20	+ <li><i class="icon-2x"></i> icon-zoom-in <span class="muted">(&#xf00e;)</span></li>
21	+ <li><i class="icon-2x"></i> icon-zoom-out <span class="muted">(&#xf010;)</span></li>
22	+ <li><i class="icon-2x"></i> icon-off <span class="muted">(&#xf011;)</span></li>
23	+ <li><i class="icon-2x"></i> icon-signal <span class="muted">(&#xf012;)</span></li>
24	+ <li><i class="icon-2x"></i> icon-cog <span class="muted">(&#xf013;)</span></li>
25	+ <li><i class="icon-2x"></i> icon-trash <span class="muted">(&#xf014;)</span></li>
26	+ <li><i class="icon-2x"></i> icon-home <span class="muted">(&#xf015;)</span></li>
27	+ <li><i class="icon-2x"></i> icon-file <span class="muted">(&#xf016;)</span></li>
28	+ <li><i class="icon-2x"></i> icon-time <span class="muted">(&#xf017;)</span></li>
29	+ <li><i class="icon-2x"></i> icon-road <span class="muted">(&#xf018;)</span></li>
30	+ <li><i class="icon-2x"></i> icon-download-alt <span class="muted">(&#xf019;)</span></li>
31	+ <li><i class="icon-2x"></i> icon-download <span class="muted">(&#xf01a;)</span></li>
32	+ <li><i class="icon-2x"></i> icon-upload <span class="muted">(&#xf01b;)</span></li>
33	+ <li><i class="icon-2x"></i> icon-inbox <span class="muted">(&#xf01c;)</span></li>
34	+ <li><i class="icon-2x"></i> icon-play-circle <span class="muted">(&#xf01d;)</span></li>
35	+ <li><i class="icon-2x"></i> icon-repeat <span class="muted">(&#xf01e;)</span></li>
36	+ <li><i class="icon-2x"></i> icon-refresh <span class="muted">(&#xf021;)</span></li>
37	+ <li><i class="icon-2x"></i> icon-list-alt <span class="muted">(&#xf022;)</span></li>
38	+ <li><i class="icon-2x"></i> icon-lock <span class="muted">(&#xf023;)</span></li>
39	+ <li><i class="icon-2x"></i> icon-flag <span class="muted">(&#xf024;)</span></li>
40	+ <li><i class="icon-2x"></i> icon-headphones <span class="muted">(&#xf025;)</span></li>
41	+ <li><i class="icon-2x"></i> icon-volume-off <span class="muted">(&#xf026;)</span></li>
42	+ <li><i class="icon-2x"></i> icon-volume-down <span class="muted">(&#xf027;)</span></li>
43	+ <li><i class="icon-2x"></i> icon-volume-up <span class="muted">(&#xf028;)</span></li>
44	+ <li><i class="icon-2x"></i> icon-qrcode <span class="muted">(&#xf029;)</span></li>
45	+ <li><i class="icon-2x"></i> icon-barcode <span class="muted">(&#xf02a;)</span></li>
46	+ <li><i class="icon-2x"></i> icon-tag <span class="muted">(&#xf02b;)</span></li>
47	+ <li><i class="icon-2x"></i> icon-tags <span class="muted">(&#xf02c;)</span></li>
48	+ <li><i class="icon-2x"></i> icon-book <span class="muted">(&#xf02d;)</span></li>
49	+ <li><i class="icon-2x"></i> icon-bookmark <span class="muted">(&#xf02e;)</span></li>
50	+ <li><i class="icon-2x"></i> icon-print <span class="muted">(&#xf02f;)</span></li>
51	+ <li><i class="icon-2x"></i> icon-camera <span class="muted">(&#xf030;)</span></li>
52	+ <li><i class="icon-2x"></i> icon-font <span class="muted">(&#xf031;)</span></li>
53	+ <li><i class="icon-2x"></i> icon-bold <span class="muted">(&#xf032;)</span></li>
54	+ <li><i class="icon-2x"></i> icon-italic <span class="muted">(&#xf033;)</span></li>
55	+ <li><i class="icon-2x"></i> icon-text-height <span class="muted">(&#xf034;)</span></li>
56	+ <li><i class="icon-2x"></i> icon-text-width <span class="muted">(&#xf035;)</span></li>
57	+ <li><i class="icon-2x"></i> icon-align-left <span class="muted">(&#xf036;)</span></li>
58	+ <li><i class="icon-2x"></i> icon-align-center <span class="muted">(&#xf037;)</span></li>
59	+ <li><i class="icon-2x"></i> icon-align-right <span class="muted">(&#xf038;)</span></li>
60	+ <li><i class="icon-2x"></i> icon-align-justify <span class="muted">(&#xf039;)</span></li>
61	+ <li><i class="icon-2x"></i> icon-list <span class="muted">(&#xf03a;)</span></li>
62	+ <li><i class="icon-2x"></i> icon-indent-left <span class="muted">(&#xf03b;)</span></li>
63	+ <li><i class="icon-2x"></i> icon-indent-right <span class="muted">(&#xf03c;)</span></li>
64	+ <li><i class="icon-2x"></i> icon-facetime-video <span class="muted">(&#xf03d;)</span></li>
65	+ <li><i class="icon-2x"></i> icon-picture <span class="muted">(&#xf03e;)</span></li>
66	+ <li><i class="icon-2x"></i> icon-pencil <span class="muted">(&#xf040;)</span></li>
67	+ <li><i class="icon-2x"></i> icon-map-marker <span class="muted">(&#xf041;)</span></li>
68	+ <li><i class="icon-2x"></i> icon-adjust <span class="muted">(&#xf042;)</span></li>
69	+ <li><i class="icon-2x"></i> icon-tint <span class="muted">(&#xf043;)</span></li>
70	+ <li><i class="icon-2x"></i> icon-edit <span class="muted">(&#xf044;)</span></li>
71	+ <li><i class="icon-2x"></i> icon-share <span class="muted">(&#xf045;)</span></li>
72	+ <li><i class="icon-2x"></i> icon-check <span class="muted">(&#xf046;)</span></li>
73	+ <li><i class="icon-2x"></i> icon-move <span class="muted">(&#xf047;)</span></li>
74	+ <li><i class="icon-2x"></i> icon-step-backward <span class="muted">(&#xf048;)</span></li>
75	+ <li><i class="icon-2x"></i> icon-fast-backward <span class="muted">(&#xf049;)</span></li>
76	+ <li><i class="icon-2x"></i> icon-backward <span class="muted">(&#xf04a;)</span></li>
77	+ <li><i class="icon-2x"></i> icon-play <span class="muted">(&#xf04b;)</span></li>
78	+ <li><i class="icon-2x"></i> icon-pause <span class="muted">(&#xf04c;)</span></li>
79	+ <li><i class="icon-2x"></i> icon-stop <span class="muted">(&#xf04d;)</span></li>
80	+ <li><i class="icon-2x"></i> icon-forward <span class="muted">(&#xf04e;)</span></li>
81	+ <li><i class="icon-2x"></i> icon-fast-forward <span class="muted">(&#xf050;)</span></li>
82	+ <li><i class="icon-2x"></i> icon-step-forward <span class="muted">(&#xf051;)</span></li>
83	+ <li><i class="icon-2x"></i> icon-eject <span class="muted">(&#xf052;)</span></li>
84	+ <li><i class="icon-2x"></i> icon-chevron-left <span class="muted">(&#xf053;)</span></li>
85	+ <li><i class="icon-2x"></i> icon-chevron-right <span class="muted">(&#xf054;)</span></li>
86	+ <li><i class="icon-2x"></i> icon-plus-sign <span class="muted">(&#xf055;)</span></li>
87	+ <li><i class="icon-2x"></i> icon-minus-sign <span class="muted">(&#xf056;)</span></li>
88	+ </ul>
89	+ </div>
90	+ <div class="span4">
91	+ <ul class="unstyled">
92	+ <li><i class="icon-2x"></i> icon-remove-sign <span class="muted">(&#xf057;)</span></li>
93	+ <li><i class="icon-2x"></i> icon-ok-sign <span class="muted">(&#xf058;)</span></li>
94	+ <li><i class="icon-2x"></i> icon-question-sign <span class="muted">(&#xf059;)</span></li>
95	+ <li><i class="icon-2x"></i> icon-info-sign <span class="muted">(&#xf05a;)</span></li>
96	+ <li><i class="icon-2x"></i> icon-screenshot <span class="muted">(&#xf05b;)</span></li>
97	+ <li><i class="icon-2x"></i> icon-remove-circle <span class="muted">(&#xf05c;)</span></li>
98	+ <li><i class="icon-2x"></i> icon-ok-circle <span class="muted">(&#xf05d;)</span></li>
99	+ <li><i class="icon-2x"></i> icon-ban-circle <span class="muted">(&#xf05e;)</span></li>
100	+ <li><i class="icon-2x"></i> icon-arrow-left <span class="muted">(&#xf060;)</span></li>
101	+ <li><i class="icon-2x"></i> icon-arrow-right <span class="muted">(&#xf061;)</span></li>
102	+ <li><i class="icon-2x"></i> icon-arrow-up <span class="muted">(&#xf062;)</span></li>
103	+ <li><i class="icon-2x"></i> icon-arrow-down <span class="muted">(&#xf063;)</span></li>
104	+ <li><i class="icon-2x"></i> icon-share-alt <span class="muted">(&#xf064;)</span></li>
105	+ <li><i class="icon-2x"></i> icon-resize-full <span class="muted">(&#xf065;)</span></li>
106	+ <li><i class="icon-2x"></i> icon-resize-small <span class="muted">(&#xf066;)</span></li>
107	+ <li><i class="icon-2x"></i> icon-plus <span class="muted">(&#xf067;)</span></li>
108	+ <li><i class="icon-2x"></i> icon-minus <span class="muted">(&#xf068;)</span></li>
109	+ <li><i class="icon-2x"></i> icon-asterisk <span class="muted">(&#xf069;)</span></li>
110	+ <li><i class="icon-2x"></i> icon-exclamation-sign <span class="muted">(&#xf06a;)</span></li>
111	+ <li><i class="icon-2x"></i> icon-gift <span class="muted">(&#xf06b;)</span></li>
112	+ <li><i class="icon-2x"></i> icon-leaf <span class="muted">(&#xf06c;)</span></li>
113	+ <li><i class="icon-2x"></i> icon-fire <span class="muted">(&#xf06d;)</span></li>
114	+ <li><i class="icon-2x"></i> icon-eye-open <span class="muted">(&#xf06e;)</span></li>
115	+ <li><i class="icon-2x"></i> icon-eye-close <span class="muted">(&#xf070;)</span></li>
116	+ <li><i class="icon-2x"></i> icon-warning-sign <span class="muted">(&#xf071;)</span></li>
117	+ <li><i class="icon-2x"></i> icon-plane <span class="muted">(&#xf072;)</span></li>
118	+ <li><i class="icon-2x"></i> icon-calendar <span class="muted">(&#xf073;)</span></li>
119	+ <li><i class="icon-2x"></i> icon-random <span class="muted">(&#xf074;)</span></li>
120	+ <li><i class="icon-2x"></i> icon-comment <span class="muted">(&#xf075;)</span></li>
121	+ <li><i class="icon-2x"></i> icon-magnet <span class="muted">(&#xf076;)</span></li>
122	+ <li><i class="icon-2x"></i> icon-chevron-up <span class="muted">(&#xf077;)</span></li>
123	+ <li><i class="icon-2x"></i> icon-chevron-down <span class="muted">(&#xf078;)</span></li>
124	+ <li><i class="icon-2x"></i> icon-retweet <span class="muted">(&#xf079;)</span></li>
125	+ <li><i class="icon-2x"></i> icon-shopping-cart <span class="muted">(&#xf07a;)</span></li>
126	+ <li><i class="icon-2x"></i> icon-folder-close <span class="muted">(&#xf07b;)</span></li>
127	+ <li><i class="icon-2x"></i> icon-folder-open <span class="muted">(&#xf07c;)</span></li>
128	+ <li><i class="icon-2x"></i> icon-resize-vertical <span class="muted">(&#xf07d;)</span></li>
129	+ <li><i class="icon-2x"></i> icon-resize-horizontal <span class="muted">(&#xf07e;)</span></li>
130	+ <li><i class="icon-2x"></i> icon-bar-chart <span class="muted">(&#xf080;)</span></li>
131	+ <li><i class="icon-2x"></i> icon-twitter-sign <span class="muted">(&#xf081;)</span></li>
132	+ <li><i class="icon-2x"></i> icon-facebook-sign <span class="muted">(&#xf082;)</span></li>
133	+ <li><i class="icon-2x"></i> icon-camera-retro <span class="muted">(&#xf083;)</span></li>
134	+ <li><i class="icon-2x"></i> icon-key <span class="muted">(&#xf084;)</span></li>
135	+ <li><i class="icon-2x"></i> icon-cogs <span class="muted">(&#xf085;)</span></li>
136	+ <li><i class="icon-2x"></i> icon-comments <span class="muted">(&#xf086;)</span></li>
137	+ <li><i class="icon-2x"></i> icon-thumbs-up <span class="muted">(&#xf087;)</span></li>
138	+ <li><i class="icon-2x"></i> icon-thumbs-down <span class="muted">(&#xf088;)</span></li>
139	+ <li><i class="icon-2x"></i> icon-star-half <span class="muted">(&#xf089;)</span></li>
140	+ <li><i class="icon-2x"></i> icon-heart-empty <span class="muted">(&#xf08a;)</span></li>
141	+ <li><i class="icon-2x"></i> icon-signout <span class="muted">(&#xf08b;)</span></li>
142	+ <li><i class="icon-2x"></i> icon-linkedin-sign <span class="muted">(&#xf08c;)</span></li>
143	+ <li><i class="icon-2x"></i> icon-pushpin <span class="muted">(&#xf08d;)</span></li>
144	+ <li><i class="icon-2x"></i> icon-external-link <span class="muted">(&#xf08e;)</span></li>
145	+ <li><i class="icon-2x"></i> icon-signin <span class="muted">(&#xf090;)</span></li>
146	+ <li><i class="icon-2x"></i> icon-trophy <span class="muted">(&#xf091;)</span></li>
147	+ <li><i class="icon-2x"></i> icon-github-sign <span class="muted">(&#xf092;)</span></li>
148	+ <li><i class="icon-2x"></i> icon-upload-alt <span class="muted">(&#xf093;)</span></li>
149	+ <li><i class="icon-2x"></i> icon-lemon <span class="muted">(&#xf094;)</span></li>
150	+ <li><i class="icon-2x"></i> icon-phone <span class="muted">(&#xf095;)</span></li>
151	+ <li><i class="icon-2x"></i> icon-check-empty <span class="muted">(&#xf096;)</span></li>
152	+ <li><i class="icon-2x"></i> icon-bookmark-empty <span class="muted">(&#xf097;)</span></li>
153	+ <li><i class="icon-2x"></i> icon-phone-sign <span class="muted">(&#xf098;)</span></li>
154	+ <li><i class="icon-2x"></i> icon-twitter <span class="muted">(&#xf099;)</span></li>
155	+ <li><i class="icon-2x"></i> icon-facebook <span class="muted">(&#xf09a;)</span></li>
156	+ <li><i class="icon-2x"></i> icon-github <span class="muted">(&#xf09b;)</span></li>
157	+ <li><i class="icon-2x"></i> icon-unlock <span class="muted">(&#xf09c;)</span></li>
158	+ <li><i class="icon-2x"></i> icon-credit-card <span class="muted">(&#xf09d;)</span></li>
159	+ <li><i class="icon-2x"></i> icon-rss <span class="muted">(&#xf09e;)</span></li>
160	+ <li><i class="icon-2x"></i> icon-hdd <span class="muted">(&#xf0a0;)</span></li>
161	+ <li><i class="icon-2x"></i> icon-bullhorn <span class="muted">(&#xf0a1;)</span></li>
162	+ <li><i class="icon-2x"></i> icon-bell <span class="muted">(&#xf0a2;)</span></li>
163	+ <li><i class="icon-2x"></i> icon-certificate <span class="muted">(&#xf0a3;)</span></li>
164	+ <li><i class="icon-2x"></i> icon-hand-right <span class="muted">(&#xf0a4;)</span></li>
165	+ <li><i class="icon-2x"></i> icon-hand-left <span class="muted">(&#xf0a5;)</span></li>
166	+ <li><i class="icon-2x"></i> icon-hand-up <span class="muted">(&#xf0a6;)</span></li>
167	+ <li><i class="icon-2x"></i> icon-hand-down <span class="muted">(&#xf0a7;)</span></li>
168	+ <li><i class="icon-2x"></i> icon-circle-arrow-left <span class="muted">(&#xf0a8;)</span></li>
169	+ <li><i class="icon-2x"></i> icon-circle-arrow-right <span class="muted">(&#xf0a9;)</span></li>
170	+ <li><i class="icon-2x"></i> icon-circle-arrow-up <span class="muted">(&#xf0aa;)</span></li>
171	+ <li><i class="icon-2x"></i> icon-circle-arrow-down <span class="muted">(&#xf0ab;)</span></li>
172	+ <li><i class="icon-2x"></i> icon-globe <span class="muted">(&#xf0ac;)</span></li>
173	+ <li><i class="icon-2x"></i> icon-wrench <span class="muted">(&#xf0ad;)</span></li>
174	+ </ul>
175	+ </div>
176	+ <div class="span4">
177	+ <ul class="unstyled">
178	+ <li><i class="icon-2x"></i> icon-tasks <span class="muted">(&#xf0ae;)</span></li>
179	+ <li><i class="icon-2x"></i> icon-filter <span class="muted">(&#xf0b0;)</span></li>
180	+ <li><i class="icon-2x"></i> icon-briefcase <span class="muted">(&#xf0b1;)</span></li>
181	+ <li><i class="icon-2x"></i> icon-fullscreen <span class="muted">(&#xf0b2;)</span></li>
182	+ <li><i class="icon-2x"></i> icon-group <span class="muted">(&#xf0c0;)</span></li>
183	+ <li><i class="icon-2x"></i> icon-link <span class="muted">(&#xf0c1;)</span></li>
184	+ <li><i class="icon-2x"></i> icon-cloud <span class="muted">(&#xf0c2;)</span></li>
185	+ <li><i class="icon-2x"></i> icon-beaker <span class="muted">(&#xf0c3;)</span></li>
186	+ <li><i class="icon-2x"></i> icon-cut <span class="muted">(&#xf0c4;)</span></li>
187	+ <li><i class="icon-2x"></i> icon-copy <span class="muted">(&#xf0c5;)</span></li>
188	+ <li><i class="icon-2x"></i> icon-paper-clip <span class="muted">(&#xf0c6;)</span></li>
189	+ <li><i class="icon-2x"></i> icon-save <span class="muted">(&#xf0c7;)</span></li>
190	+ <li><i class="icon-2x"></i> icon-sign-blank <span class="muted">(&#xf0c8;)</span></li>
191	+ <li><i class="icon-2x"></i> icon-reorder <span class="muted">(&#xf0c9;)</span></li>
192	+ <li><i class="icon-2x"></i> icon-list-ul <span class="muted">(&#xf0ca;)</span></li>
193	+ <li><i class="icon-2x"></i> icon-list-ol <span class="muted">(&#xf0cb;)</span></li>
194	+ <li><i class="icon-2x"></i> icon-strikethrough <span class="muted">(&#xf0cc;)</span></li>
195	+ <li><i class="icon-2x"></i> icon-underline <span class="muted">(&#xf0cd;)</span></li>
196	+ <li><i class="icon-2x"></i> icon-table <span class="muted">(&#xf0ce;)</span></li>
197	+ <li><i class="icon-2x"></i> icon-magic <span class="muted">(&#xf0d0;)</span></li>
198	+ <li><i class="icon-2x"></i> icon-truck <span class="muted">(&#xf0d1;)</span></li>
199	+ <li><i class="icon-2x"></i> icon-pinterest <span class="muted">(&#xf0d2;)</span></li>
200	+ <li><i class="icon-2x"></i> icon-pinterest-sign <span class="muted">(&#xf0d3;)</span></li>
201	+ <li><i class="icon-2x"></i> icon-google-plus-sign <span class="muted">(&#xf0d4;)</span></li>
202	+ <li><i class="icon-2x"></i> icon-google-plus <span class="muted">(&#xf0d5;)</span></li>
203	+ <li><i class="icon-2x"></i> icon-money <span class="muted">(&#xf0d6;)</span></li>
204	+ <li><i class="icon-2x"></i> icon-caret-down <span class="muted">(&#xf0d7;)</span></li>
205	+ <li><i class="icon-2x"></i> icon-caret-up <span class="muted">(&#xf0d8;)</span></li>
206	+ <li><i class="icon-2x"></i> icon-caret-left <span class="muted">(&#xf0d9;)</span></li>
207	+ <li><i class="icon-2x"></i> icon-caret-right <span class="muted">(&#xf0da;)</span></li>
208	+ <li><i class="icon-2x"></i> icon-columns <span class="muted">(&#xf0db;)</span></li>
209	+ <li><i class="icon-2x"></i> icon-sort <span class="muted">(&#xf0dc;)</span></li>
210	+ <li><i class="icon-2x"></i> icon-sort-down <span class="muted">(&#xf0dd;)</span></li>
211	+ <li><i class="icon-2x"></i> icon-sort-up <span class="muted">(&#xf0de;)</span></li>
212	+ <li><i class="icon-2x"></i> icon-envelope-alt <span class="muted">(&#xf0e0;)</span></li>
213	+ <li><i class="icon-2x"></i> icon-linkedin <span class="muted">(&#xf0e1;)</span></li>
214	+ <li><i class="icon-2x"></i> icon-undo <span class="muted">(&#xf0e2;)</span></li>
215	+ <li><i class="icon-2x"></i> icon-legal <span class="muted">(&#xf0e3;)</span></li>
216	+ <li><i class="icon-2x"></i> icon-dashboard <span class="muted">(&#xf0e4;)</span></li>
217	+ <li><i class="icon-2x"></i> icon-comment-alt <span class="muted">(&#xf0e5;)</span></li>
218	+ <li><i class="icon-2x"></i> icon-comments-alt <span class="muted">(&#xf0e6;)</span></li>
219	+ <li><i class="icon-2x"></i> icon-bolt <span class="muted">(&#xf0e7;)</span></li>
220	+ <li><i class="icon-2x"></i> icon-sitemap <span class="muted">(&#xf0e8;)</span></li>
221	+ <li><i class="icon-2x"></i> icon-umbrella <span class="muted">(&#xf0e9;)</span></li>
222	+ <li><i class="icon-2x"></i> icon-paste <span class="muted">(&#xf0ea;)</span></li>
223	+ <li><i class="icon-2x"></i> icon-lightbulb <span class="muted">(&#xf0eb;)</span></li>
224	+ <li><i class="icon-2x"></i> icon-exchange <span class="muted">(&#xf0ec;)</span></li>
225	+ <li><i class="icon-2x"></i> icon-cloud-download <span class="muted">(&#xf0ed;)</span></li>
226	+ <li><i class="icon-2x"></i> icon-cloud-upload <span class="muted">(&#xf0ee;)</span></li>
227	+ <li><i class="icon-2x"></i> icon-user-md <span class="muted">(&#xf0f0;)</span></li>
228	+ <li><i class="icon-2x"></i> icon-stethoscope <span class="muted">(&#xf0f1;)</span></li>
229	+ <li><i class="icon-2x"></i> icon-suitcase <span class="muted">(&#xf0f2;)</span></li>
230	+ <li><i class="icon-2x"></i> icon-bell-alt <span class="muted">(&#xf0f3;)</span></li>
231	+ <li><i class="icon-2x"></i> icon-coffee <span class="muted">(&#xf0f4;)</span></li>
232	+ <li><i class="icon-2x"></i> icon-food <span class="muted">(&#xf0f5;)</span></li>
233	+ <li><i class="icon-2x"></i> icon-file-alt <span class="muted">(&#xf0f6;)</span></li>
234	+ <li><i class="icon-2x"></i> icon-building <span class="muted">(&#xf0f7;)</span></li>
235	+ <li><i class="icon-2x"></i> icon-hospital <span class="muted">(&#xf0f8;)</span></li>
236	+ <li><i class="icon-2x"></i> icon-ambulance <span class="muted">(&#xf0f9;)</span></li>
237	+ <li><i class="icon-2x"></i> icon-medkit <span class="muted">(&#xf0fa;)</span></li>
238	+ <li><i class="icon-2x"></i> icon-fighter-jet <span class="muted">(&#xf0fb;)</span></li>
239	+ <li><i class="icon-2x"></i> icon-beer <span class="muted">(&#xf0fc;)</span></li>
240	+ <li><i class="icon-2x"></i> icon-h-sign <span class="muted">(&#xf0fd;)</span></li>
241	+ <li><i class="icon-2x"></i> icon-plus-sign-alt <span class="muted">(&#xf0fe;)</span></li>
242	+ <li><i class="icon-2x"></i> icon-double-angle-left <span class="muted">(&#xf100;)</span></li>
243	+ <li><i class="icon-2x"></i> icon-double-angle-right <span class="muted">(&#xf101;)</span></li>
244	+ <li><i class="icon-2x"></i> icon-double-angle-up <span class="muted">(&#xf102;)</span></li>
245	+ <li><i class="icon-2x"></i> icon-double-angle-down <span class="muted">(&#xf103;)</span></li>
246	+ <li><i class="icon-2x"></i> icon-angle-left <span class="muted">(&#xf104;)</span></li>
247	+ <li><i class="icon-2x"></i> icon-angle-right <span class="muted">(&#xf105;)</span></li>
248	+ <li><i class="icon-2x"></i> icon-angle-up <span class="muted">(&#xf106;)</span></li>
249	+ <li><i class="icon-2x"></i> icon-angle-down <span class="muted">(&#xf107;)</span></li>
250	+ <li><i class="icon-2x"></i> icon-desktop <span class="muted">(&#xf108;)</span></li>
251	+ <li><i class="icon-2x"></i> icon-laptop <span class="muted">(&#xf109;)</span></li>
252	+ <li><i class="icon-2x"></i> icon-tablet <span class="muted">(&#xf10a;)</span></li>
253	+ <li><i class="icon-2x"></i> icon-mobile-phone <span class="muted">(&#xf10b;)</span></li>
254	+ <li><i class="icon-2x"></i> icon-circle-blank <span class="muted">(&#xf10c;)</span></li>
255	+ <li><i class="icon-2x"></i> icon-quote-left <span class="muted">(&#xf10d;)</span></li>
256	+ <li><i class="icon-2x"></i> icon-quote-right <span class="muted">(&#xf10e;)</span></li>
257	+ <li><i class="icon-2x"></i> icon-spinner <span class="muted">(&#xf110;)</span></li>
258	+ <li><i class="icon-2x"></i> icon-circle <span class="muted">(&#xf111;)</span></li>
259	+ <li><i class="icon-2x"></i> icon-reply <span class="muted">(&#xf112;)</span></li>
260	+ </ul>
261	+ </div>
262	+ </div>
263	+ </section>
264	+
265	+ <style>
266	+ .span4{width:300px} ul.unstyled,ol.unstyled{margin-left:0;list-style:none} .row:before,.row:after{display:table;content:"";line-height:0}.row:after{clear:both}[class="span"]{float:left;min-height:1px;margin-left:20px} .container{margin-right:auto;margin-left:auto;zoom:1}.container:before,.container:after{display:table;content:"";line-height:0}.container:after{clear:both}
267	+ </style>

trunk/js/menu-social-icons-admin.js ADDED Viewed

	@@ -0,0 +1,195 @@


1	+ (function( $, icons ){
2	+ /**
3	+ * Variable "icons" from MenuSocialIconsNetworks, PHP: MSI_Frontend::$networks)
4	+ */
5	+
6	+ /**
7	+ * List of URLs to search for
8	+ */
9	+ var icon_urls = Object.keys( icons );
10	+
11	+ /**
12	+ * Iterate over all menu items, add icon if URL matches
13	+ */
14	+ var check_menu_item = function(){
15	+ var $input = $(this);
16	+ var url_value = $input.val();
17	+
18	+ var icon_url = get_icon_if_exists_for_url( url_value );
19	+
20	+ if ( icon_url ){
21	+ add_icon( $input, icon_url );
22	+ }else {
23	+ remove_icon( $input );
24	+ }
25	+ };
26	+
27	+ /**
28	+ * Check a URL to see if we have an icon for it
29	+ * @return string\|bool valid URL\|false
30	+ */
31	+ var get_icon_if_exists_for_url = function( url_value ) {
32	+ for (var i = 0; i < icon_urls.length; i++) {
33	+ if ( -1 != url_value.indexOf( icon_urls[i] ) ){
34	+ return icon_urls[i];
35	+ }
36	+ }
37	+
38	+ return false;
39	+ };
40	+
41	+ /**
42	+ * Add icon, either from New Link area or menu item title
43	+ */
44	+ var add_icon = function( $input, icon_url ){
45	+ if ( "custom-menu-item-url" == $input.attr('id') ) {
46	+ add_icon_to_new_link( $input, icon_url );
47	+ }else {
48	+ add_icon_to_title( $input, icon_url );
49	+ }
50	+ };
51	+
52	+ /**
53	+ * Remove icon, either from New Link area or menu item title
54	+ */
55	+ var remove_icon = function( $input ){
56	+ if ( "custom-menu-item-url" == $input.attr('id') ) {
57	+ remove_icon_from_new_link();
58	+ }else {
59	+ remove_icon_from_title( $input );
60	+ }
61	+ };
62	+
63	+ /**
64	+ * Add icon to New Link area
65	+ */
66	+ var add_icon_to_new_link = function( $input, icon_url ){
67	+ remove_icon_from_new_link();
68	+
69	+ $('#msi-shortcuts i').each( function(){
70	+ if ( icon_url == $(this).data('url') ) {
71	+ $(this).addClass('active');
72	+ }
73	+ });
74	+
75	+ };
76	+
77	+ /**
78	+ * Add an icon to menu title bar
79	+ */
80	+ var add_icon_to_title = function( $input, icon_url ){
81	+ // Identify title element and build appropriate icon
82	+ var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
83	+
84	+ var $icon = get_icon_from_url( icon_url );
85	+
86	+ // Add icon and move title text over
87	+ remove_icon_from_title( $input );
88	+ $title.prepend( $icon );
89	+ $title.find("span.item-title").addClass("has-social-icon");
90	+ };
91	+
92	+ /**
93	+ * Remove icon from title area of menu item
94	+ */
95	+ var remove_icon_from_title = function( $input ) {
96	+ var $title = $input.parents('li.menu-item').find('dt.menu-item-handle');
97	+
98	+ $title.children('i').remove();
99	+ $title.find("span.item-title").removeClass("has-social-icon");
100	+ };
101	+
102	+ /**
103	+ * Remove icon from New Link area
104	+ */
105	+ var remove_icon_from_new_link = function(){
106	+ $('#msi-shortcuts i').removeClass('active');
107	+ };
108	+
109	+ /**
110	+ * Take a matched URL and create an icon from info looked up in icons object
111	+ */
112	+ var get_icon_from_url = function( url ){
113	+ var $icon = $("<i>").addClass( icons[ url ].icon ).addClass('fa').addClass('fa-fw');
114	+
115	+ return $icon;
116	+ };
117	+
118	+ /**
119	+ * Take a matched URL and return the network name
120	+ */
121	+ var get_name_from_url = function( url ){
122	+ return icons[ url ].name;
123	+ };
124	+
125	+ /**
126	+ * Add shortcuts to all icons in Links menu
127	+ */
128	+ var display_icon_shortcuts = function(){
129	+ var $icon, name;
130	+ var $wrapper = $('<div>').attr('id', 'msi-shortcuts');
131	+
132	+ $wrapper.append( '<h4>Social Icons</h4>');
133	+
134	+ for (var i = 0; i < icon_urls.length; i++) {
135	+ // Skip short-links (duplicates)
136	+ if ( 'youtu.be' == icon_urls[i] \|\| 'instagr.am' == icon_urls[i] ) {
137	+ continue;
138	+ }
139	+
140	+ $icon = get_icon_from_url( icon_urls[i] );
141	+ name = get_name_from_url( icon_urls[i] );
142	+
143	+ $icon.data( 'url', icon_urls[i] );
144	+ $icon.data( 'name', name );
145	+
146	+ $icon.click( update_link_fields );
147	+
148	+ $wrapper.append( $icon );
149	+ }
150	+
151	+ $faq = $('<ul>').addClass('faq');
152	+
153	+ $faq.append( "<li><a href='http://youtube.com/watch?v=hA2rjDwmvms' target='_blank'>How to edit icon appearance</a></li>" );
154	+ $faq.append( "<li><a href='http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons' target='_blank'>How to request new icons</a></li>" );
155	+
156	+ $wrapper.append( $faq );
157	+
158	+ $('#customlinkdiv').append( $wrapper );
159	+ };
160	+
161	+ /**
162	+ * Insert icon URL into input field when icon is clicked
163	+ */
164	+ var update_link_fields = function(){
165	+ var url = $(this).data('url');
166	+ var name = $(this).data('name');
167	+
168	+ remove_icon_from_new_link();
169	+ $(this).addClass('active');
170	+
171	+ $('#custom-menu-item-url').val( 'http://' + url );
172	+ $('#custom-menu-item-name').val( name ).removeClass('input-with-default-title');
173	+ };
174	+
175	+ /**
176	+ * Initial search and change event hook
177	+ */
178	+ var init = function(){
179	+ $( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
180	+ $( '#menu-to-edit input.edit-menu-item-url' ).on( 'keyup', check_menu_item );
181	+ $( '#custom-menu-item-url' ).on( 'keyup', check_menu_item );
182	+
183	+ // Closest thing I can find to an event on new link add
184	+ $( '#custom-menu-item-name' ).on( 'blur', function(){
185	+ $( '#menu-to-edit input.edit-menu-item-url' ).each( check_menu_item );
186	+ remove_icon_from_new_link();
187	+ });
188	+
189	+ display_icon_shortcuts();
190	+ };
191	+
192	+ // Fire this plugin
193	+ init();
194	+
195	+ })( jQuery, MenuSocialIconsNetworks );

trunk/msi-templates/hide-text.php ADDED Viewed

	@@ -0,0 +1 @@


1	+ <span class="fa-hidden"><?php echo $title ?></span>

trunk/msi-templates/icon.php ADDED Viewed

	@@ -0,0 +1 @@


1	+ <i class="<?php echo $size . ' ' . $icon . ' ' . $show_text ?>"></i>

trunk/msi-templates/stylesheet.php ADDED Viewed

	@@ -0,0 +1,6 @@


1	+ <style>
2	+ /* Accessible for screen readers but hidden from view */
3	+ .fa-hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
4	+ .rtl .fa-hidden { left:10000px; }
5	+ .fa-showtext { margin-right: 5px; }
6	+ </style>

trunk/plugin.php ADDED Viewed

	@@ -0,0 +1,49 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: Menu Social Icons
4	+ Description: Change menu links to social sites to icons automatically. Uses <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a> and supports: Bitbucket, Dribbble, Dropbox, Flickr, Foursquare, Gittip, Instagram, RenRen, Stack Overflow, Trello, Tumblr, VK, Weibo, Xing, and YouTube.
5	+ Version: 1.3.9
6	+ Author: Paul Clark
7	+ Author URI: http://pdclark.com
8	+ License: GPLv2 or later
9	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10	+ */
11	+
12	+ define( 'MSI_PLUGIN_FILE', __FILE__ );
13	+ define( 'MSI_VERSION', '1.3.9' );
14	+
15	+ add_action( 'init', 'storm_menu_social_icons_init' );
16	+
17	+ function storm_menu_social_icons_init() {
18	+
19	+ // PHP Version Check
20	+ $php_is_outdated = version_compare( PHP_VERSION, '5.2', '<' );
21	+
22	+ // Only exit and warn if on admin page
23	+ $okay_to_exit = is_admin() && ( !defined('DOING_AJAX') \|\| !DOING_AJAX );
24	+
25	+ if ( $php_is_outdated ) {
26	+ if ( $okay_to_exit ) {
27	+ require_once ABSPATH . '/wp-admin/includes/plugin.php';
28	+ deactivate_plugins( __FILE__ );
29	+ wp_die( sprintf( __( 'Menu Social Icons requires PHP 5.2 or higher, as does WordPress 3.2 and higher. The plugin has now disabled itself. For information on upgrading, %ssee this article%s.', 'menu-social-icons'), '<a href="http://codex.wordpress.org/Switching_to_PHP5" target="_blank">', '</a>') );
30	+ } else {
31	+ return;
32	+ }
33	+ }
34	+
35	+ require_once dirname ( __FILE__ ) . '/classes/msi-frontend.php';
36	+ require_once dirname ( __FILE__ ) . '/classes/msi-admin.php';
37	+
38	+ if ( class_exists( 'BWP_MINIFY' ) ) {
39	+ require_once dirname ( __FILE__ ) . '/classes/msi-bwp-compatibility.php';
40	+ }
41	+
42	+ // Frontend actions
43	+ // WP E-Commerce blocks other template_redirect actions by exiting at priority 10.
44	+ add_action( 'template_redirect', 'MSI_Frontend::get_instance', 5 );
45	+
46	+ // Admin actions
47	+ add_action( 'admin_init', 'MSI_Admin::get_instance' );
48	+
49	+ }

trunk/readme.txt ADDED Viewed

	@@ -0,0 +1,241 @@


1	+ === Menu Social Icons ===
2	+ Contributors: pdclark
3	+ Plugin URI: https://github.com/pdclark/menu-social-icons
4	+ Author URI: http://pdclark.com
5	+ Tags: social, icons, menus, FontAwesome, social media, easy
6	+ Requires at least: 3.4
7	+ Tested up to: 3.8.1
8	+ Stable tag: 1.3.9
9	+ License: GPLv2
10	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
11	+
12	+ Add social icons to your WordPress menu items automatically.
13	+
14	+ == Description ==
15	+
16	+ This plugin changes social website links in any of your WordPress menus to use icons from FontAwesome.
17	+
18	+ No configuration is necessary, other having links to your social media profiles in the built-in WordPress menus. Add links to any of these social sites under `Appearance > Menus`, then enable the plugin.
19	+
20	+ http://www.youtube.com/watch?v=AS3hLeyV4S0
21	+
22	+ Supported Sites
23	+
24	+ `
25	+ bitbucket.org dribbble.com dropbox.com
26	+ facebook.com flickr.com foursquare.com
27	+ github.com gittip.com instagram.com
28	+ linkedin.com mailto:(email) pinterest.com
29	+ plus.google.com renren.com stackoverflow.com
30	+ *stackexchange.com trello.com tumblr.com
31	+ twitter.com *vimeo.com vk.com
32	+ weibo.com xing.com youtube.com
33	+
34	+ *Requires storm_social_icons_use_latest be turned on. (See below.)
35	+ `
36	+
37	+ Changing Icon Appearance
38	+
39	+ If you want to edit the appearance of the icons in ways that the options below don't provide, you can do more with custom CSS to match your theme. This video walks through the process:
40	+
41	+ http://youtube.com/watch?v=hA2rjDwmvms
42	+
43	+ Option: Add Vimeo and Stack Exchange
44	+
45	+ To use FontAwesome 4.0+, which drops support for IE7, but adds vimeo.com and stackexchange.com, add this to your theme's functions.php file:
46	+ `add_filter( 'storm_social_icons_use_latest', '__return_true' );`
47	+
48	+ Option: Show Text
49	+
50	+ To show menu item text in addition to the icons, add this to your theme's functions.php file:
51	+ `add_filter( 'storm_social_icons_hide_text', '__return_false' );`
52	+
53	+ Option: Alternate Icons
54	+
55	+ To show an alternative icon style, where logos are cut out of signs, , add this to your theme's functions.php file:
56	+ `add_filter( 'storm_social_icons_type', create_function( '', 'return "icon-sign";' ) );`
57	+
58	+ Option: Icon Sizes
59	+
60	+ To vary icon sizes, add this to your theme's functions.php file: (Default is 2x)
61	+
62	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "normal";' ) );
63	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "large";' ) );
64	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "2x";' ) );
65	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "3x";' ) );
66	+ add_filter( 'storm_social_icons_size', create_function( '', 'return "4x";' ) );
67	+
68	+ Option: Add More Icons
69	+
70	+ Add icons from [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for other URLs. For example, an RSS feed:
71	+
72	+ add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
73	+ function storm_social_icons_networks( $networks ) {
74	+
75	+ $extra_icons = array (
76	+ '/feed' => array( // Enable this icon for any URL containing this text
77	+ 'name' => 'RSS', // Default menu item label
78	+ 'class' => 'rss', // Custom class
79	+ 'icon' => 'icon-rss', // FontAwesome class
80	+ 'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
81	+ ),
82	+ );
83	+
84	+ $extra_icons = array_merge( $networks, $extra_icons );
85	+ return $extra_icons;
86	+
87	+ }
88	+
89	+ Option: Change HTML Output
90	+
91	+ This is useful for developers using the plugin with custom icon sets.
92	+
93	+ Edit icon HTML output:
94	+ `
95	+ add_filter( 'storm_social_icons_icon_html', 'storm_social_icons_icon_html', 10, 4 );
96	+
97	+ function storm_social_icons_icon_html( $html, $size, $icon, $show_text ) {
98	+ $html = "<i class='$size $icon $show_text'></i>";
99	+ return $html;
100	+ }
101	+ `
102	+
103	+ Edit title HTML output:
104	+ `
105	+ add_filter( 'storm_social_icons_title_html', 'storm_social_icons_title_html', 10, 2 );
106	+
107	+ function storm_social_icons_title_html( $html, $title ){
108	+ $html = "<span class='fa-hidden'>$title</span>";
109	+ return $html;
110	+ }
111	+ `
112	+
113	+ Edit all link attributes (WordPress core filter):
114	+
115	+ `
116	+ add_filter( 'wp_nav_menu_objects', 'storm_wp_nav_menu_objects', 7, 2 );
117	+
118	+ function storm_wp_nav_menu_objects( $sorted_menu_items, $args ){
119	+
120	+ foreach( $sorted_menu_items as &$item ) {
121	+
122	+ if ( 0 != $item->menu_item_parent ) {
123	+ // Skip submenu items
124	+ continue;
125	+ }
126	+
127	+ // Only apply changes to links containing this text.
128	+ $search_url = 'facebook.com';
129	+
130	+ if ( false !== strpos( $item->url, $search_url ) ) {
131	+
132	+ // Add a custom class
133	+ $item->classes[] = 'some-custom-class';
134	+
135	+ // Add custom HTML inside the link
136	+ $item->title = '<strong>custom html</strong>' . $item->title;
137	+
138	+ }
139	+ }
140	+
141	+ return $sorted_menu_items;
142	+
143	+ }
144	+ `
145	+
146	+ == Installation ==
147	+
148	+ 1. Search for "Menu Social Icons" under `WordPress Admin > Plugins > Add New`
149	+ 1. Activate the plugin.
150	+
151	+ == Screenshots ==
152	+
153	+ 1. Icons and shortcuts in WordPress Menu Editor.
154	+ 1. Menu without the plugin activated.
155	+ 1. Menu with default settings.
156	+ 1. Alternative "icon-sign" display.
157	+ 1. Hidden text disabled.
158	+ 1. "normal" icon size
159	+ 1. "4x" icon size
160	+
161	+ == Frequently Asked Questions ==
162	+
163	+ = Can you add X icon? =
164	+
165	+ Menu Social Icons is dependent on the [FontAwesome icon library](http://fortawesome.github.io/Font-Awesome). If an icon exists in FontAwesome, you can add a filter for it using the `storm_social_icons_networks` example shown in the plugin description.
166	+
167	+ If an icon does not exist in FontAwesome, you can request see FontAwesome's instructions for [requesting new icons](http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons).
168	+
169	+ = How can I change how the icons are aligned, positioned, colored, sized, etc. =
170	+
171	+ See the tutorial video on editing appearance and the code samples for various options in the [plugin description](http://wordpress.org/plugins/menu-social-icons/).
172	+
173	+ = Does this plugin install all of FontAwesome? =
174	+
175	+ Yes. The plugin installs the complete FontAwesome package. You can use any of the icons in your HTML.
176	+
177	+ = I don't see FontAwesome anywhere in the plugin! =
178	+
179	+ We load FontAwesome onto your site using NetDNA's [Bootstrap CDN](http://www.bootstrapcdn.com/#tab_fontawesome) service. This makes it load much faster for your users.
180	+
181	+ == Changelog ==
182	+
183	+ = 1.3.9 =
184	+
185	+ * Fix: Change `use_latest` filter to request "latest" version of FontAwesome, rather than stopping at `4.0.0`. Current version is `4.0.3`.
186	+
187	+ = 1.3.8 =
188	+
189	+ * Fix: Title notice.
190	+
191	+ = 1.3.7 =
192	+
193	+ * New: Remove templates folder. Replace with filters `storm_social_icons_title_html` and `storm_social_icons_icon_html`. Add example of core `wp_nav_menu_objects` filter to readme.
194	+
195	+ = 1.3.6 =
196	+
197	+ * New: Allow themes to override HTML output with msi-templates directory.
198	+
199	+ = 1.3.5 =
200	+
201	+ * Fix: Horizontal scrollbar on RTL layouts. Thanks [@mascatu](http://wordpress.org/support/profile/mascatu) for the [bug report](http://wordpress.org/support/topic/rtl-issue-1).
202	+
203	+ = 1.3.4 =
204	+
205	+ * Fix: Work around compatibility issue with [Better WordPress Minify](http://wordpress.org/plugins/bwp-minify/) plugin.
206	+
207	+ = 1.3.3 =
208	+
209	+ * Fix: Work around bug in WP E-commerce that causes other plugins to not load properly on product pages. Thanks [@elfary](http://wordpress.org/support/topic/menu-with-e-commerce). See [bug report to WP E-commerce](http://wordpress.org/support/topic/other-plugins-blocked-from-loading-on-product-pages).
210	+
211	+ = 1.3.2 =
212	+
213	+ * Fix: Properly enqueue stylesheets
214	+ * Fix: Set FontAwesome 4.0 to off by default
215	+
216	+ = 1.3 =
217	+
218	+ * New: Preview icons and shortcuts in the WordPress Menu Editor.
219	+ * New: vimeo.com and stackexchange.com icons when FontAwesome 4.0 is turned on.
220	+ * Notice: FontAwesome 4.0 removes support for IE7, so it is off by default. Use the filter `storm_social_icons_use_latest` shown in the readme to turn on FontAwesome 4.0.
221	+
222	+ = 1.2 =
223	+
224	+ * New: Filter for custom icons and URLs.
225	+ * New: Icon for `mailto:` links.
226	+ * [Thanks to mmcginnis](http://wordpress.org/support/topic/just-works-40) for both of these changes.
227	+
228	+ = 1.1 =
229	+
230	+ * New: Upgrade to FontAwesome 3.2.1
231	+ * New: ots of new site icons: bitbucket.org, dribbble.com, dropbox.com, flickr.com, foursquare.com, gittip.com, instagram.com, renren.com, stackoverflow.com, trello.com, tumblr.com, vk.com, weibo.com, xing.com, youtube.com
232	+
233	+ = 1.0 =
234	+
235	+ * Initial public release.
236	+
237	+ == Upgrade Notice ==
238	+
239	+ = 1.3.9 =
240	+
241	+ * Fix: Change `use_latest` filter to request "latest" version of FontAwesome, rather than stopping at `4.0.0`. Current version is `4.0.3`.

trunk/screenshot-1.png ADDED Viewed

Binary file

trunk/screenshot-2.png ADDED Viewed

Binary file

trunk/screenshot-3.png ADDED Viewed

Binary file

trunk/screenshot-4.png ADDED Viewed

Binary file

trunk/screenshot-5.png ADDED Viewed

Binary file

trunk/screenshot-6.png ADDED Viewed

Binary file

trunk/screenshot-7.png ADDED Viewed

Binary file