Permalink
Browse files

Add Peculiar CSS icon set, modified to use PIE, as test case. Sourced…

… from http://lucianmarin.com/peculiar/ -- for educational purposes only, per the license.
  • Loading branch information...
Jason Johnston
Jason Johnston committed Aug 19, 2010
1 parent b4c45df commit 2a34e822dd3bcbe447afdc907851569e8320049d
Showing with 2,412 additions and 0 deletions.
  1. +372 −0 tests/peculiar-icons/Peculiar.html
  2. +1,934 −0 tests/peculiar-icons/pictograms.css
  3. +106 −0 tests/peculiar-icons/style.css
@@ -0,0 +1,372 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Peculiar</title>
+<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
+<link rel="stylesheet" type="text/css" media="screen" href="pictograms.css" />
+</head>
+<body>
+
+<div id="header">
+<div class="title">
+ <h1>Peculiar <br /> <small>An icon package made only CSS</small></h1>
+ <div class="buy">
+ <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DPBFBGDV9BM3S" title="Buy a license!">$25 <br /> <small>license</small></a>
+ </div>
+</div>
+</div>
+
+<div id="container">
+
+<p><a href="http://lucianmarin.com/peculiar/">Peculiar</a> is icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don't need to use any image at all. The package contains 45 pictograms that are available in 16&sup2; pixels size. More icons are about to come in near future.</p>
+
+<p>LICENSE: Peculiar is available for <em>free</em> for educational purposes only. Otherwise, for any personal or commercial work a license must be bought. The license costs $25 and gives you the right to use the pictograms on unlimited sites and/or web applications. You won't need to buy a license for any new icon that will be included in future releases of the package.</p>
+
+<div class="bar">
+
+<div class="icon icon-minus">
+ <div class="icon-minus-circle"></div>
+ <div class="icon-minus-line"></div>
+ <span class="name">Minus</span>
+</div>
+
+<div class="icon icon-plus">
+ <div class="icon-plus-circle"></div>
+ <div class="icon-plus-line-1"></div>
+ <div class="icon-plus-line-2"></div>
+ <span class="name">Plus</span>
+</div>
+
+<div class="icon icon-disc">
+ <div class="icon-disc-circle"></div>
+ <div class="icon-disc-dot"></div>
+ <span class="name">Disc</span>
+</div>
+
+<div class="icon icon-clock">
+ <div class="icon-clock-circle"></div>
+ <div class="icon-clock-line-1"></div>
+ <div class="icon-clock-line-2"></div>
+ <span class="name">Clock</span>
+</div>
+
+<div class="icon icon-volume">
+ <div class="icon-volume-rectangle"></div>
+ <div class="icon-volume-triangle"></div>
+ <div class="icon-volume-line"></div>
+ <span class="name">Volume</span>
+</div>
+
+<div class="icon icon-pause">
+ <div class="icon-pause-circle"></div>
+ <div class="icon-pause-line-1"></div>
+ <div class="icon-pause-line-2"></div>
+ <span class="name">Pause</span>
+</div>
+
+<div class="icon icon-plasma">
+ <div class="icon-plasma-rectangle"></div>
+ <div class="icon-plasma-line-1"></div>
+ <div class="icon-plasma-line-2"></div>
+ <span class="name">Plasma</span>
+</div>
+
+<div class="icon icon-bulb">
+ <div class="icon-bulb-line-1"></div>
+ <div class="icon-bulb-circle"></div>
+ <div class="icon-bulb-line-2"></div>
+ <span class="name">Bulb</span>
+</div>
+
+<div class="icon icon-iphone">
+ <div class="icon-iphone-rectangle-1"></div>
+ <div class="icon-iphone-rectangle-2"></div>
+ <div class="icon-iphone-rectangle-3"></div>
+ <div class="icon-iphone-line"></div>
+ <div class="icon-iphone-dot"></div>
+ <span class="name">iPhone</span>
+</div>
+
+<div class="icon icon-battery">
+ <div class="icon-battery-rectangle"></div>
+ <div class="icon-battery-dot"></div>
+ <div class="icon-battery-line"></div>
+ <span class="name">Battery</span>
+</div>
+
+<div class="icon icon-battery red">
+ <div class="icon-battery-rectangle"></div>
+ <div class="icon-battery-dot"></div>
+ <div class="icon-battery-line"></div>
+ <span class="name">Empty</span>
+</div>
+
+<div class="icon icon-battery green">
+ <div class="icon-battery-rectangle"></div>
+ <div class="icon-battery-dot"></div>
+ <div class="icon-battery-line"></div>
+ <span class="name">Full</span>
+</div>
+
+<div class="icon icon-video">
+ <div class="icon-video-rectangle"></div>
+ <div class="icon-video-triangle"></div>
+ <span class="name">Video</span>
+</div>
+
+<div class="icon icon-paper">
+ <div class="icon-paper-rectangle"></div>
+ <div class="icon-paper-line-1"></div>
+ <div class="icon-paper-line-2"></div>
+ <div class="icon-paper-line-3"></div>
+ <div class="icon-paper-line-4"></div>
+ <div class="icon-paper-line-5"></div>
+ <span class="name">Paper</span>
+</div>
+
+<div class="icon icon-smile">
+ <div class="icon-smile-circle"></div>
+ <div class="icon-smile-dot-1"></div>
+ <div class="icon-smile-dot-2"></div>
+ <div class="icon-smile-line"></div>
+ <span class="name">Smile</span>
+</div>
+
+<div class="icon icon-picture">
+ <div class="icon-picture-rectangle"></div>
+ <div class="icon-picture-dune-1"></div>
+ <div class="icon-picture-dune-2"></div>
+ <div class="icon-picture-dot"></div>
+ <span class="name">Picture</span>
+</div>
+
+<div class="icon icon-comment">
+ <div class="icon-comment-triangle"></div>
+ <div class="icon-comment-rectangle"></div>
+ <span class="name">Reply</span>
+</div>
+
+<div class="icon icon-typing">
+ <div class="icon-comment-triangle"></div>
+ <div class="icon-typing-rectangle"></div>
+ <div class="icon-typing-circle-1"></div>
+ <div class="icon-typing-circle-2"></div>
+ <div class="icon-typing-circle-3"></div>
+ <span class="name">Typing</span>
+</div>
+
+<div class="icon icon-screens">
+ <div class="icon-screens-rectangle-1"></div>
+ <div class="icon-screens-rectangle-2"></div>
+ <span class="name">Screens</span>
+</div>
+
+<div class="icon icon-play">
+ <div class="icon-play-circle"></div>
+ <div class="icon-play-triangle"></div>
+ <span class="name">Play</span>
+</div>
+
+<div class="icon icon-up">
+ <div class="icon-up-circle"></div>
+ <div class="icon-up-triangle"></div>
+ <div class="icon-up-line"></div>
+ <span class="name">Up</span>
+</div>
+
+<div class="icon icon-down">
+ <div class="icon-down-circle"></div>
+ <div class="icon-down-triangle"></div>
+ <div class="icon-down-line"></div>
+ <span class="name">Down</span>
+</div>
+
+<div class="icon icon-back">
+ <div class="icon-back-triangle-1"></div>
+ <div class="icon-back-triangle-2"></div>
+ <div class="icon-back-triangle-3"></div>
+ <div class="icon-back-line"></div>
+ <span class="name">Back</span>
+</div>
+
+<div class="icon icon-forward">
+ <div class="icon-forward-triangle-1"></div>
+ <div class="icon-forward-triangle-2"></div>
+ <div class="icon-forward-triangle-3"></div>
+ <div class="icon-forward-line"></div>
+ <span class="name">Forward</span>
+</div>
+
+<div class="icon icon-camera">
+ <div class="icon-camera-line"></div>
+ <div class="icon-camera-rectangle"></div>
+ <div class="icon-camera-circle"></div>
+ <span class="name">Camera</span>
+</div>
+
+<div class="icon icon-yang">
+ <div class="icon-yang-rectangle-1"></div>
+ <div class="icon-yang-rectangle-2"></div>
+ <div class="icon-yang-circle-1"></div>
+ <div class="icon-yang-circle-2"></div>
+ <div class="icon-yang-dot-1"></div>
+ <div class="icon-yang-dot-2"></div>
+ <span class="name">YinYang</span>
+</div>
+
+<div class="icon icon-profile">
+ <div class="icon-profile-circle"></div>
+ <div class="icon-profile-rectangle"></div>
+ <span class="name">Profile</span>
+</div>
+
+<div class="icon icon-folder">
+ <div class="icon-folder-rectangle-1"></div>
+ <div class="icon-folder-rectangle-2"></div>
+ <div class="icon-folder-rectangle-3"></div>
+ <span class="name">Folder</span>
+</div>
+
+<div class="icon icon-heart">
+ <div class="icon-heart-triangle"></div>
+ <div class="icon-heart-circle-1"></div>
+ <div class="icon-heart-circle-2"></div>
+ <span class="name">Heart</span>
+</div>
+
+<div class="icon icon-cmd">
+ <div class="icon-cmd-square"></div>
+ <div class="icon-cmd-circle-1"></div>
+ <div class="icon-cmd-circle-2"></div>
+ <div class="icon-cmd-circle-3"></div>
+ <div class="icon-cmd-circle-4"></div>
+ <span class="name">Cmd</span>
+</div>
+
+<div class="icon icon-mic">
+ <div class="icon-mic-dot"></div>
+ <div class="icon-mic-circle"></div>
+ <div class="icon-mic-line"></div>
+ <span class="name">Mic</span>
+</div>
+
+<div class="icon icon-home">
+ <div class="icon-home-triangle"></div>
+ <div class="icon-home-rectangle"></div>
+ <div class="icon-home-line"></div>
+ <span class="name">Home</span>
+</div>
+
+<div class="icon icon-olympic">
+ <div class="icon-olympic-circle-1"></div>
+ <div class="icon-olympic-circle-2"></div>
+ <div class="icon-olympic-circle-3"></div>
+ <div class="icon-olympic-circle-4"></div>
+ <div class="icon-olympic-circle-5"></div>
+ <span class="name">Olympics</span>
+</div>
+
+<div class="icon icon-hd">
+ <div class="icon-hd-rectangle"></div>
+ <div class="icon-hd-line-1"></div>
+ <div class="icon-hd-line-2"></div>
+ <div class="icon-hd-line-3"></div>
+ <div class="icon-hd-circle"></div>
+ <span class="name">HD</span>
+</div>
+
+<div class="icon icon-temp">
+ <div class="icon-temp-circle"></div>
+ <div class="icon-temp-line"></div>
+ <span class="name">Temp</span>
+</div>
+
+<div class="icon icon-off">
+ <div class="icon-off-circle"></div>
+ <div class="icon-off-line"></div>
+ <span class="name">Off</span>
+</div>
+
+<div class="icon icon-cloud">
+ <div class="icon-cloud-rectangle"></div>
+ <div class="icon-cloud-circle-1"></div>
+ <div class="icon-cloud-circle-2"></div>
+ <div class="icon-cloud-circle-3"></div>
+ <span class="name">Cloud</span>
+</div>
+
+<div class="icon icon-coffee">
+ <div class="icon-coffee-line"></div>
+ <div class="icon-coffee-circle-1"></div>
+ <div class="icon-coffee-circle-2"></div>
+ <span class="name">Coffee</span>
+</div>
+
+<div class="icon icon-eye">
+ <div class="icon-eye-triangle-1"></div>
+ <div class="icon-eye-triangle-2"></div>
+ <div class="icon-eye-circle-1"></div>
+ <div class="icon-eye-circle-2"></div>
+ <span class="name">Eye</span>
+</div>
+
+<div class="icon icon-touch">
+ <div class="icon-touch-circle"></div>
+ <div class="icon-touch-line-1"></div>
+ <div class="icon-touch-line-2"></div>
+ <div class="icon-touch-line-3"></div>
+ <div class="icon-touch-line-4"></div>
+ <span class="name">Touch</span>
+</div>
+
+<div class="icon icon-repeat">
+ <div class="icon-repeat-rectangle-1"></div>
+ <div class="icon-repeat-rectangle-2"></div>
+ <div class="icon-repeat-triangle-1"></div>
+ <div class="icon-repeat-triangle-2"></div>
+ <span class="name">Repeat</span>
+</div>
+
+<div class="icon icon-eject">
+ <div class="icon-eject-triangle"></div>
+ <div class="icon-eject-line"></div>
+ <span class="name">Eject</span>
+</div>
+
+<div class="icon icon-female">
+ <div class="icon-female-circle"></div>
+ <div class="icon-female-line-1"></div>
+ <div class="icon-female-line-2"></div>
+ <span class="name">Female</span>
+</div>
+
+<div class="icon icon-feed">
+ <div class="icon-feed-dot"></div>
+ <div class="icon-feed-circle-1"></div>
+ <div class="icon-feed-circle-2"></div>
+ <div class="icon-feed-circle-3"></div>
+ <span class="name">Feed</span>
+</div>
+
+<div class="icon icon-message">
+ <div class="icon-message-triangle-1"></div>
+ <div class="icon-message-triangle-2"></div>
+ <div class="icon-message-triangle-3"></div>
+ <div class="icon-message-line"></div>
+ <span class="name">Message</span>
+</div>
+
+</div>
+
+<p>Endless possibilities are coming with these type of icons. Sizes are not limited to 16&sup2; pixels, but they go up to 1024&sup2; pixels and from there to &infin;. They are semantically coded, each shape can be customized to different color. Web designers can now use these icons to create layouts skipping the Photoshop in the process and web developers can speed up their web applications tremendously.</p>
+
+<p>Browsers unsupported: Internet Explorer 6, 7 and 8, but support can be added using <a href="http://css3pie.com/">CSS3 PIE</a>.</p>
+<p>Browsers supported: Internet Explorer 9, <a href="http://www.flickr.com/photos/kalphegor/4795141982/">Mozilla Firefox</a>, Camino, Opera, <a href="http://www.flickr.com/photos/kalphegor/4793647271/">Apple Safari</a>, Google Chrome or any other Gecko or WebKit powered browser.</p>
+
+<p>&copy; 2010 <a href="http://lucianmarin.com/">Lucian Marin</a> &mdash; all rights reserved.</p>
+
+</div>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 2a34e82

Please sign in to comment.