Initial commit of buttons using Iconic icon set via font-face

ubuwaits · Sep 23, 2010 · fea8a62 · fea8a62
1 parent 74b96d0
commit fea8a62
Show file tree

Hide file tree

Showing 9 changed files with 696 additions and 56 deletions.
diff --git a/README.rdoc b/README.rdoc
@@ -1,6 +1,6 @@
 = CSS3 Buttons
 
-This is a collection of buttons that show what is possible using CSS3. Almost all of these buttons look best in Chrome and Safari on OSX. They look almost as good in Firefox, with all other browsers receiving a less-styled button.
+This is a collection of buttons that show what is possible using CSS3 and other advanced techniques. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button.
 
 If you use any of these buttons in the wild, drop me a note and let me know.
 

diff --git a/css/buttons.css b/css/buttons.css
@@ -369,4 +369,89 @@ button.fat-blue:active {
   -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
   -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
   margin-top: 58px;
+}
+
+/* iconic: check-alt
+*******************************************************************************/
+button.check-alt {
+  padding-right: 14px;
+}
+
+button.check-alt:before {
+  color: #333;
+  content: "Y";
+  display: inline;
+  font-size: 18px;
+  font-family: "IconicStroke";
+  font-weight: normal;
+  position: relative;
+  left: -16px;
+  line-height: 10px;
+	text-shadow: 0 1px 0px #fff;
+  top: 2px;
+  visibility: hidden;
+}
+
+button.check-alt:hover:before {
+  visibility: visible;
+}
+
+button.check-alt:active:before {
+  color: #0589C8;
+}
+
+/* iconic: heart
+*******************************************************************************/
+button.heart {
+  padding-right: 25px;
+}
+
+button.heart:before {
+  color: #fff;
+  content: "h";
+  font-size: 32px;
+  font-family: "IconicStroke";
+  font-weight: normal;
+  position: relative;
+  left: -16px;
+  line-height: 10px;
+	text-shadow: 0px -1px 1px rgba(104, 45, 64, .7);
+  top: 6px;
+  visibility: hidden;
+}
+
+button.heart:hover:before {
+  visibility: visible;
+}
+
+button.heart:active:before {
+  text-shadow: 0px -1px 10px rgba(104, 45, 64, 1);
+}
+
+/* iconic: chat
+*******************************************************************************/
+button.chat {
+  padding-right: 20px;
+}
+
+button.chat:before {
+  color: #fff;
+  content: "j";
+  font-size: 20px;
+  font-family: "IconicStroke";
+  font-weight: normal;
+  position: relative;
+  left: -13px;
+  line-height: 10px;
+	text-shadow: 0px -1px 1px rgba(104, 45, 64, .7);
+  top: 2px;
+  visibility: hidden;
+}
+
+button.chat:hover:before {
+  visibility: visible;
+}
+
+button.chat:active:before {
+  text-shadow: 0px -1px 10px rgba(104, 45, 64, 1);
 }
diff --git a/css/screen.css b/css/screen.css
@@ -61,6 +61,16 @@ table {
 	border-spacing: 0;
 }
 
+/* Import iconic
+------------------------------------------------------------------------------*/
+@font-face {
+	font-family: 'IconicStroke';
+	src: url('../font/iconic_stroke.eot');
+	src: local('☺'), url('../font/iconic_stroke.ttf') format('truetype'), url('../font/iconic_stroke.svg#iconic') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
 /* Page specific
 ------------------------------------------------------------------------------*/
 body {
@@ -71,7 +81,7 @@ body {
 
 div.container {
   margin: 40px auto;
-  width: 675px;
+  width: 960px;
 }
 
 a {
@@ -80,6 +90,7 @@ a {
 }
 
 h1 {
+  color: #333;
   font-size: 38px;
   font-weight: lighter;
   margin: 24px 0 12px 0;
@@ -107,10 +118,33 @@ p.where {
   margin: 0 0 12px 0;
 }
 
+.button-collection {
+  border-top: 3px solid #666;
+  margin: 24px 0 36px 0;
+  padding: 6px 0 12px 0;
+}
+
+.button-info {
+  float: left;
+  margin: 0 40px 0 0;
+  width: 245px;
+}
+
+.button-info h2 {
+  color: #222;
+  font-size: 22px;
+  font-weight: normal;
+  margin: 10px 0 6px 0;
+}
+
+.button-info p {
+  font-size: 14px;
+}
+
 ul.column {
+  float: left;
   list-style: none;
-  margin: 24px 0;
-  width: 100%;
+  width: 675px;
 }
 
 ul.column li {

diff --git a/font/demo.html b/font/demo.html
@@ -0,0 +1,95 @@
+<html>
+<head>
+<link rel="stylesheet" href="iconic.css" type="text/css" media="screen" title="no title" charset="utf-8">
+
+<style>
+	body {
+		font-size:21px;
+	}
+</style>
+</head>
+<body>
+<ul>	
+<li><a name='home' class='iconic home'></a> Home</li>
+<li><a name='at' class='iconic at'></a> At Symbol</li>
+<li><a name='quote' class='iconic quote'></a> Quote</li>
+<li><a name='quote-alt' class='iconic quote-alt'></a> Quote (alternate)</li>
+<li><a name='arrow-up' class='iconic arrow-up'></a> Arrow Up</li>
+<li><a name='arrow-right' class='iconic arrow-right'></a> Arrow Right</li>
+<li><a name='arrow-bottom' class='iconic arrow-bottom'></a> Arrow Bottom</li>
+<li><a name='arrow-left' class='iconic arrow-left'></a> Arrow Left</li>
+<li><a name='arrow-up-alt' class='iconic arrow-up-alt'></a> Arrow Up (alternate)</li>
+<li><a name='arrow-right-alt' class='iconic arrow-right-alt'></a> Arrow Right (alternate)</li>
+<li><a name='arrow-bottom-alt' class='iconic arrow-bottom-alt'></a> Arrow Bottom (alternate)</li>
+<li><a name='arrow-left-alt' class='iconic arrow-left-alt'></a> Arrow Left (alternate)</li>
+<li><a name='move' class='iconic move'></a> Move</li>
+<li><a name='move-vertical' class='iconic move-vertical'></a> Move Vertical</li>
+<li><a name='move-horizontal' class='iconic move-horizontal'></a> Move Horizontal</li>
+<li><a name='move-alt' class='iconic move-alt'></a> Move (alternate)</li>
+<li><a name='move-vertical-alt' class='iconic move-vertical-alt'></a> Move Vertical (alternate)</li>
+<li><a name='move-horizontal-alt' class='iconic move-horizontal-alt'></a> Move Horizontal (alternate)</li>
+<li><a name='cursor' class='iconic cursor'></a> Cursor</li>
+<li><a name='plus' class='iconic plus'></a> Plus</li>
+<li><a name='plus-alt' class='iconic plus-alt'></a> Plus (alternate)</li>
+<li><a name='minus' class='iconic minus'></a> Minus</li>
+<li><a name='minus-alt' class='iconic minus-alt'></a> Minus (alternate)</li>
+<li><a name='new-window' class='iconic new-window'></a> New Window</li>
+<li><a name='dial' class='iconic dial'></a> Dial</li>
+<li><a name='lightbulb' class='iconic lightbulb'></a> Lightbulb</li>
+<li><a name='link' class='iconic link'></a> Link</li>
+<li><a name='image' class='iconic image'></a> Image</li>
+<li><a name='article' class='iconic article'></a> Article</li>
+<li><a name='read-more' class='iconic read-more'></a> Read More</li>
+<li><a name='headphones' class='iconic headphones'></a> Headphones</li>
+<li><a name='equalizer' class='iconic equalizer'></a> Equalizer</li>
+<li><a name='fullscreen' class='iconic fullscreen'></a> Fullscreen</li>
+<li><a name='exit-fullscreen' class='iconic exit-fullscreen'></a> Exit Fullscreen</li>
+<li><a name='spin' class='iconic spin'></a> Spin</li>
+<li><a name='spin-alt' class='iconic spin-alt'></a> Spin (alternate)</li>
+<li><a name='moon' class='iconic moon'></a> Moon</li>
+<li><a name='sun' class='iconic sun'></a> Sun</li>
+<li><a name='map-pin' class='iconic map-pin'></a> Map Pin</li>
+<li><a name='pin' class='iconic pin'></a> Pin</li>
+<li><a name='eyedropper' class='iconic eyedropper'></a> Eyedropper</li>
+<li><a name='denied' class='iconic denied'></a> Denied</li>
+<li><a name='calendar' class='iconic calendar'></a> Calendar</li>
+<li><a name='calendar-alt' class='iconic calendar-alt'></a> Calendar (alternate)</li>
+<li><a name='bolt' class='iconic bolt'></a> Bolt</li>
+<li><a name='clock' class='iconic clock'></a> Clock</li>
+<li><a name='document' class='iconic document'></a> Document</li>
+<li><a name='book' class='iconic book'></a> Book</li>
+<li><a name='book-alt' class='iconic book-alt'></a> Book (alternate)</li>
+<li><a name='magnifying-glass' class='iconic magnifying-glass'></a> Magnifying Glass</li>
+<li><a name='tag' class='iconic tag'></a> Tag</li>
+<li><a name='heart' class='iconic heart'></a> Heart</li>
+<li><a name='info' class='iconic info'></a> Info</li>
+<li><a name='chat' class='iconic chat'></a> Chat</li>
+<li><a name='chat-alt' class='iconic chat-alt'></a> Chat (alternate)</li>
+<li><a name='key' class='iconic key'></a> Key</li>
+<li><a name='unlocked' class='iconic unlocked'></a> Unlocked</li>
+<li><a name='locked' class='iconic locked'></a> Locked</li>
+<li><a name='mail' class='iconic mail'></a> Mail</li>
+<li><a name='mail' class='iconic mail-alt'></a> Mail (alternate)</li>
+<li><a name='phone' class='iconic phone'></a> Phone</li>
+<li><a name='box' class='iconic box'></a> Box</li>
+<li><a name='pencil' class='iconic pencil'></a> Pencil</li>
+<li><a name='pencil-alt' class='iconic pencil-alt'></a> Pencil (alternate)</li>
+<li><a name='comment' class='iconic comment'></a> Comment</li>
+<li><a name='comment' class='iconic comment-alt'></a> Comment (alternate)</li>
+<li><a name='rss' class='iconic rss'></a> RSS</li>
+<li><a name='star' class='iconic star'></a> Star</li>
+<li><a name='trash' class='iconic trash'></a> Trash</li>
+<li><a name='user' class='iconic user'></a> User</li>
+<li><a name='volume' class='iconic volume'></a> Volume</li>
+<li><a name='mute' class='iconic mute'></a> Mute</li>
+<li><a name='cog' class='iconic cog'></a> Cog</li>
+<li><a name='cog-alt' class='iconic cog-alt'></a> Cog (alternate)</li>
+<li><a name='x' class='iconic x'></a> X</li>
+<li><a name='x' class='iconic x-alt'></a> X (alternate)</li>
+<li><a name='check' class='iconic check'></a> Check</li>
+<li><a name='check-alt' class='iconic check-alt'></a> Check (alternate)</li>
+<li><a name='beaker' class='iconic beaker'></a> Beaker</li>
+<li><a name='beaker-alt' class='iconic beaker-alt'></a> Beaker (alternate)</li>
+</ul>
+</body>
+</html>
diff --git a/font/iconic_stroke.eot b/font/iconic_stroke.eot
diff --git a/font/iconic_stroke.otf b/font/iconic_stroke.otf