Location: PHPKode > scripts > Social Media Buttons > coded-social-icons/index.php
<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
	<title>Coded Social Media Icons @toddmotto | toddmotto.com</title>
	
	<!-- Meta -->
	<meta charset="UTF-8">
	<meta name="author" content="@toddmotto">
	
	<!-- CSS -->
	<link rel="stylesheet" href="assets/css/global.css">
	<link rel="stylesheet" href="assets/css/social-media.css">
	
	<!-- Load jQuery from Google CDN -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>

<body>
	<header>
		<div>
			<h1 id="logo">
				<a href="http://www.toddmotto.com">
					<img src="assets/img/logo.png">
				</a>
			</h1>
		</div>
	</header>
	
	<nav>
		<ul>
			<li id="current"><a href="http://www.toddmotto.com/how-to-easily-use-cufon-font-replacement">Visit the Tutorial</a></li>
		</ul>
	</nav>
	
	<section id="wrapper">
		<article id="main">
		
		
		
		
		
		
		
		
		
			<h3 style="clear:both;float:left;border-bottom:1px solid #E5E5E5;margin:15px 0 -10px 0;">Full Length Coded Icons (Editable text)</h3>
			<?php
				// Fill out the PHP Strings below to create your buttons
				$iconfull = array(
					array( // RSS
						'rss', // Class for the Button (colour)
						'#', // URL of Button
						'rss.png', // Image name
						'Subscribe'), // Word inside Button
						
					array( // Twitter
						'twitter', // Class for the Button (colour)
						'#', // URL of Button
						'twitter.png', // Image name
						'Twitter'), // Word inside Button
						
					array(
						'facebook', // Class for the Button (colour)
						'#', // URL of Button
						'facebook.png', // Image name
						'Facebook'), // Word inside Button
					array(
						'linkedin', // Class for the Button (colour)
						'#', // URL of Button
						'linkedin.png', // Image name
						'LinkedIn'), // Word inside Button
					array(
						'googleplus', // Class for the Button (colour)
						'#', // URL of Button
						'googleplus.png', // Image name
						'Google+'), // Word inside Button
					array(
						'pinterest', // Class for the Button (colour)
						'#', // URL of Button
						'pinterest.png', // Image name
						'Pinterest'), // Word inside Button
					array(
						'dribbble', // Class for the Button (colour)
						'#', // URL of Button
						'dribbble.png', // Image name
						'Dribbble'), // Word inside Button
					array(
						'forrst', // Class for the Button (colour)
						'#', // URL of Button
						'forrst.png', // Image name
						'Forrst'), // Word inside Button
	
				); ?>
				
				<ul id="coded-social-full">
					<?php
		
					// Spit it out!
					
					foreach($iconfull as $info) {echo'<li class="'.$info[0].'"><a href="'.$info[1].'"><img src="assets/img/'.$info[2].'">'.$info[3].'</a></li>
					';}
					?></ul>
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
				<h3 style="clear:both;float:left;border-bottom:1px solid #E5E5E5;margin:15px 0 -10px 0;">Square Coded Icons</h3>
				<?php
				// Fill out the PHP Strings below to create your buttons
				$iconsquare = array(
					array( // RSS
						'rss', // Class for the Button (colour)
						'#', // URL of Button
						'rss.png'), // Image name
					array( // Twitter
						'twitter', // Class for the Button (colour)
						'#', // URL of Button
						'twitter.png'), // Image name
					array(
						'facebook', // Class for the Button (colour)
						'#', // URL of Button
						'facebook.png'), // Image name
					array(
						'linkedin', // Class for the Button (colour)
						'#', // URL of Button
						'linkedin.png'), // Image name
					array(
						'googleplus', // Class for the Button (colour)
						'#', // URL of Button
						'googleplus.png'), // Image name
					array(
						'pinterest', // Class for the Button (colour)
						'#', // URL of Button
						'pinterest.png'), // Image name
					array(
						'dribbble', // Class for the Button (colour)
						'#', // URL of Button
						'dribbble.png'), // Image name
					array(
						'forrst', // Class for the Button (colour)
						'#', // URL of Button
						'forrst.png'), // Image name
				); ?>
				
				<ul id="coded-social-square">
					<?php
		
					// Spit it out!
					
					foreach($iconsquare as $info) {echo'<li class="'.$info[0].'"><a href="'.$info[1].'"><img src="assets/img/'.$info[2].'"></a></li>
					';}
					?></ul>
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
				<h3 style="clear:both;float:left;border-bottom:1px solid #E5E5E5;margin:15px 0 -10px 0;">Circle Coded Icons</h3>
				<?php
				// Fill out the PHP Strings below to create your buttons
				$iconcircle = array(
					array( // RSS
						'rss', // Class for the Button (colour)
						'#', // URL of Button
						'rss.png'), // Image name
					array( // Twitter
						'twitter', // Class for the Button (colour)
						'#', // URL of Button
						'twitter.png'), // Image name
					array(
						'facebook', // Class for the Button (colour)
						'#', // URL of Button
						'facebook.png'), // Image name
					array(
						'linkedin', // Class for the Button (colour)
						'#', // URL of Button
						'linkedin.png'), // Image name
					array(
						'googleplus', // Class for the Button (colour)
						'#', // URL of Button
						'googleplus.png'), // Image name
					array(
						'pinterest', // Class for the Button (colour)
						'#', // URL of Button
						'pinterest.png'), // Image name
					array(
						'dribbble', // Class for the Button (colour)
						'#', // URL of Button
						'dribbble.png'), // Image name
					array(
						'forrst', // Class for the Button (colour)
						'#', // URL of Button
						'forrst.png'), // Image name
				); ?>
				
				<ul id="coded-social-circle">
					<?php
		
					// Spit it out!
					
					foreach($iconcircle as $info) {echo'<li class="'.$info[0].'"><a href="'.$info[1].'"><img src="assets/img/'.$info[2].'"></a></li>
					';}
					?></ul>
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
				<h3 style="clear:both;float:left;border-bottom:1px solid #E5E5E5;margin:15px 0 -10px 0;">Circle (with thin border) Coded Icons</h3>
				<?php
				// Fill out the PHP Strings below to create your buttons
				$iconcircleborder = array(
					array( // RSS
						'rss', // Class for the Button (colour)
						'#', // URL of Button
						'rss.png'), // Image name
					array( // Twitter
						'twitter', // Class for the Button (colour)
						'#', // URL of Button
						'twitter.png'), // Image name
					array(
						'facebook', // Class for the Button (colour)
						'#', // URL of Button
						'facebook.png'), // Image name
					array(
						'linkedin', // Class for the Button (colour)
						'#', // URL of Button
						'linkedin.png'), // Image name
					array(
						'googleplus', // Class for the Button (colour)
						'#', // URL of Button
						'googleplus.png'), // Image name
					array(
						'pinterest', // Class for the Button (colour)
						'#', // URL of Button
						'pinterest.png'), // Image name
					array(
						'dribbble', // Class for the Button (colour)
						'#', // URL of Button
						'dribbble.png'), // Image name
					array(
						'forrst', // Class for the Button (colour)
						'#', // URL of Button
						'forrst.png'), // Image name
				); ?>
				
				<ul id="coded-social-circle-border">
					<?php
		
					// Spit it out!
					
					foreach($iconcircleborder as $info) {echo'<li class="'.$info[0].'"><a href="'.$info[1].'"><img src="assets/img/'.$info[2].'"></a></li>
					';}
					?></ul>












					
		</article>
	</section>
	
	<footer>
		<section>
			&copy; 2012 Todd Motto
		</section>
	</footer>
	
</body>
</html>
Return current item: Social Media Buttons