You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
20 KiB
382 lines
20 KiB
---
|
|
layout : 'default'
|
|
css : 'icon'
|
|
title : 'Icon'
|
|
type : 'UI Element'
|
|
---
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/icons/sketchy.icons.css">
|
|
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui dividing header">Icon</h1>
|
|
<p>An icon is a glyph used to represent another concept more simply.</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Standard</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Standard</h2>
|
|
|
|
<h4 class="ui header">Icon Set</h4>
|
|
<p>Icon sets contain an arbitrary number of icons</p>
|
|
<div class="ui ignored warning message">
|
|
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
|
|
</div>
|
|
|
|
<div class="icon example">
|
|
<h4 class="ui header">Sketchy</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="sketchy icon add"></i> Add</div>
|
|
<div class="column"><i class="sketchy icon alert"></i> Alert</div>
|
|
<div class="column"><i class="sketchy icon arrow eight"></i> Arrow Eight</div>
|
|
<div class="column"><i class="sketchy icon arrow eleven"></i> Arrow Eleven</div>
|
|
<div class="column"><i class="sketchy icon arrow fifteen"></i> Arrow Fifteen</div>
|
|
<div class="column"><i class="sketchy icon arrow five"></i> Arrow Five</div>
|
|
<div class="column"><i class="sketchy icon arrow four"></i> Arrow Four</div>
|
|
<div class="column"><i class="sketchy icon arrow fourteen"></i> Arrow Fourteen</div>
|
|
<div class="column"><i class="sketchy icon arrow nine"></i> Arrow Nine</div>
|
|
<div class="column"><i class="sketchy icon arrow one"></i> Arrow One</div>
|
|
<div class="column"><i class="sketchy icon arrow seven"></i> Arrow Seven</div>
|
|
<div class="column"><i class="sketchy icon arrow six"></i> Arrow Six</div>
|
|
<div class="column"><i class="sketchy icon arrow sixteen"></i> Arrow Sixteen</div>
|
|
<div class="column"><i class="sketchy icon arrow ten"></i> Arrow Ten</div>
|
|
<div class="column"><i class="sketchy icon arrow thirteen"></i> Arrow Thirteen</div>
|
|
<div class="column"><i class="sketchy icon arrow three"></i> Arrow Three</div>
|
|
<div class="column"><i class="sketchy icon arrow twelve"></i> Arrow Twelve</div>
|
|
<div class="column"><i class="sketchy icon arrow two"></i> Arrow Two</div>
|
|
<div class="column"><i class="sketchy icon browser"></i> Browser</div>
|
|
<div class="column"><i class="sketchy icon bullet one"></i> Bullet One</div>
|
|
<div class="column"><i class="sketchy icon bullet three"></i> Bullet Three</div>
|
|
<div class="column"><i class="sketchy icon bullet two"></i> Bullet Two</div>
|
|
<div class="column"><i class="sketchy icon camera"></i> Camera</div>
|
|
<div class="column"><i class="sketchy icon categories"></i> Categories</div>
|
|
<div class="column"><i class="sketchy icon category electronics"></i> Category Electronics</div>
|
|
<div class="column"><i class="sketchy icon category electronics alternate"></i> Category Electronics Alternate</div>
|
|
<div class="column"><i class="sketchy icon category health"></i> Category Health</div>
|
|
<div class="column"><i class="sketchy icon category home"></i> Category Home</div>
|
|
<div class="column"><i class="sketchy icon category home alternate"></i> Category Home Alternate</div>
|
|
<div class="column"><i class="sketchy icon category kitchen"></i> Category Kitchen</div>
|
|
<div class="column"><i class="sketchy icon category parenting"></i> Category Parenting</div>
|
|
<div class="column"><i class="sketchy icon category pets"></i> Category Pets</div>
|
|
<div class="column"><i class="sketchy icon category style"></i> Category Style</div>
|
|
<div class="column"><i class="sketchy icon category toys"></i> Category Toys</div>
|
|
<div class="column"><i class="sketchy icon category travel"></i> Category Travel</div>
|
|
<div class="column"><i class="sketchy icon category travel alternate"></i> Category Travel Alternate</div>
|
|
<div class="column"><i class="sketchy icon checkmark"></i> Checkmark</div>
|
|
<div class="column"><i class="sketchy icon checkmark circle"></i> Checkmark Circle</div>
|
|
<div class="column"><i class="sketchy icon clock"></i> Clock</div>
|
|
<div class="column"><i class="sketchy icon comment"></i> Comment</div>
|
|
<div class="column"><i class="sketchy icon compare"></i> Compare</div>
|
|
<div class="column"><i class="sketchy icon dont"></i> Dont</div>
|
|
<div class="column"><i class="sketchy icon eval"></i> Eval</div>
|
|
<div class="column"><i class="sketchy icon expert"></i> Expert</div>
|
|
<div class="column"><i class="sketchy icon home"></i> Home</div>
|
|
<div class="column"><i class="sketchy icon idea"></i> Idea</div>
|
|
<div class="column"><i class="sketchy icon improve"></i> Improve</div>
|
|
<div class="column"><i class="sketchy icon influence"></i> Influence</div>
|
|
<div class="column"><i class="sketchy icon information"></i> Information</div>
|
|
<div class="column"><i class="sketchy icon invent"></i> Invent</div>
|
|
<div class="column"><i class="sketchy icon ip communication"></i> Ip Communication</div>
|
|
<div class="column"><i class="sketchy icon ip dualcooljet"></i> Ip Dualcooljet</div>
|
|
<div class="column"><i class="sketchy icon ip electronics"></i> Ip Electronics</div>
|
|
<div class="column"><i class="sketchy icon ip itprocesses"></i> Ip Itprocesses</div>
|
|
<div class="column"><i class="sketchy icon ip lighting"></i> Ip Lighting</div>
|
|
<div class="column"><i class="sketchy icon ip matrials"></i> Ip Matrials</div>
|
|
<div class="column"><i class="sketchy icon ip motorsvehicles"></i> Ip Motorsvehicles</div>
|
|
<div class="column"><i class="sketchy icon ip power"></i> Ip Power</div>
|
|
<div class="column"><i class="sketchy icon ip printingoptical"></i> Ip Printingoptical</div>
|
|
<div class="column"><i class="sketchy icon ip processing"></i> Ip Processing</div>
|
|
<div class="column"><i class="sketchy icon launch"></i> Launch</div>
|
|
<div class="column"><i class="sketchy icon location"></i> Location</div>
|
|
<div class="column"><i class="sketchy icon magnify"></i> Magnify</div>
|
|
<div class="column"><i class="sketchy icon name"></i> Name</div>
|
|
<div class="column"><i class="sketchy icon pencil"></i> Pencil</div>
|
|
<div class="column"><i class="sketchy icon phase design"></i> Phase Design</div>
|
|
<div class="column"><i class="sketchy icon phase research"></i> Phase Research</div>
|
|
<div class="column"><i class="sketchy icon phase tagline"></i> Phase Tagline</div>
|
|
<div class="column"><i class="sketchy icon photos"></i> Photos</div>
|
|
<div class="column"><i class="sketchy icon piechart"></i> Piechart</div>
|
|
<div class="column"><i class="sketchy icon pinterest"></i> Pinterest</div>
|
|
<div class="column"><i class="sketchy icon play"></i> Play</div>
|
|
<div class="column"><i class="sketchy icon portfolio"></i> Portfolio</div>
|
|
<div class="column"><i class="sketchy icon price"></i> Price</div>
|
|
<div class="column"><i class="sketchy icon problem"></i> Problem</div>
|
|
<div class="column"><i class="sketchy icon profile"></i> Profile</div>
|
|
<div class="column"><i class="sketchy icon question"></i> Question</div>
|
|
<div class="column"><i class="sketchy icon question circle"></i> Question Circle</div>
|
|
<div class="column"><i class="sketchy icon rain cloud"></i> Rain Cloud</div>
|
|
<div class="column"><i class="sketchy icon share"></i> Share</div>
|
|
<div class="column"><i class="sketchy icon shop"></i> Shop</div>
|
|
<div class="column"><i class="sketchy icon timeline"></i> Timeline</div>
|
|
<div class="column"><i class="sketchy icon trashcan"></i> Trashcan</div>
|
|
<div class="column"><i class="sketchy icon twitter"></i> Twitter</div>
|
|
<div class="column"><i class="sketchy icon vote down"></i> Vote Down</div>
|
|
<div class="column"><i class="sketchy icon vote up"></i> Vote Up</div>
|
|
<div class="column"><i class="sketchy icon x"></i> X</div>
|
|
<div class="column"><i class="sketchy icon x circle"></i> X Circle</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another icon example">
|
|
<div class="ui green message">
|
|
This icon set was built using a custom combination of fonts using the amazing web tool <a href="http://fontello.com/">Fontello</a>
|
|
</div>
|
|
|
|
<h4 class="ui header">Content</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon attachment"></i> Attachment</div>
|
|
<div class="column"><i class="icon barcode"></i> Barcode</div>
|
|
<div class="column"><i class="icon bookmark"></i> Bookmark</div>
|
|
<div class="column"><i class="icon cart"></i> Cart</div>
|
|
<div class="column"><i class="icon chart"></i> Chart</div>
|
|
<div class="column"><i class="icon bar chart"></i> Bar chart</div>
|
|
<div class="column"><i class="icon pie chart"></i> Pie chart</div>
|
|
<div class="column"><i class="icon date"></i> Date</div>
|
|
<div class="column"><i class="icon doc"></i> Doc</div>
|
|
<div class="column"><i class="icon docs"></i> Docs</div>
|
|
<div class="column"><i class="icon email"></i> Email</div>
|
|
<div class="column"><i class="icon folder"></i> Folder</div>
|
|
<div class="column"><i class="icon open folder"></i> Open folder</div>
|
|
<div class="column"><i class="icon home"></i> Home</div>
|
|
<div class="column"><i class="icon mail"></i> Mail</div>
|
|
<div class="column"><i class="icon photo"></i> Photo</div>
|
|
<div class="column"><i class="icon photos"></i> Photos</div>
|
|
<div class="column"><i class="icon search"></i> Search</div>
|
|
<div class="column"><i class="icon setting"></i> Setting</div>
|
|
<div class="column"><i class="icon settings"></i> Settings</div>
|
|
<div class="column"><i class="icon tag"></i> Tag</div>
|
|
<div class="column"><i class="icon tags"></i> Tags</div>
|
|
<div class="column"><i class="icon time"></i> Time</div>
|
|
<div class="column"><i class="icon top list"></i> Top list</div>
|
|
<div class="column"><i class="icon trash"></i> Trash</div>
|
|
<div class="column"><i class="icon community"></i> Community</div>
|
|
<div class="column"><i class="icon user"></i> User</div>
|
|
<div class="column"><i class="icon users"></i> Users</div>
|
|
<div class="column"><i class="icon chat"></i> Chat</div>
|
|
</div>
|
|
</div>
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Special Content</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon trophy"></i> Trophy</div>
|
|
<div class="column"><i class="icon cloud"></i> Cloud</div>
|
|
<div class="column"><i class="icon flight"></i> Flight</div>
|
|
<div class="column"><i class="icon gift"></i> Gift</div>
|
|
<div class="column"><i class="icon dollar"></i> Dollar</div>
|
|
<div class="column"><i class="icon lab"></i> Lab</div>
|
|
<div class="column"><i class="icon rss"></i> RSS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another icon example">
|
|
<h4 class="ui header">User Actions</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon add user"></i> Add User</div>
|
|
<div class="column"><i class="icon block"></i> Block</div>
|
|
<div class="column"><i class="icon hide"></i> Hide</div>
|
|
<div class="column"><i class="icon unhide"></i> Unhide</div>
|
|
<div class="column"><i class="icon lock"></i> Lock</div>
|
|
<div class="column"><i class="icon unlock"></i> Unlock</div>
|
|
<div class="column"><i class="icon flag"></i> Flag</div>
|
|
<div class="column"><i class="icon cancel"></i> Cancel</div>
|
|
<div class="column"><i class="icon close"></i> Close</div>
|
|
<div class="column"><i class="icon close"></i> Delete</div>
|
|
<div class="column"><i class="icon check"></i> Check</div>
|
|
<div class="column"><i class="icon edit"></i> Edit</div>
|
|
<div class="column"><i class="icon open"></i> Open</div>
|
|
<div class="column"><i class="icon export"></i> Export</div>
|
|
<div class="column"><i class="icon forward"></i> Forward</div>
|
|
<div class="column"><i class="icon upload"></i> Upload</div>
|
|
<div class="column"><i class="icon like"></i> Like</div>
|
|
<div class="column"><i class="icon dislike"></i> Dislike</div>
|
|
<div class="column"><i class="icon pin"></i> Pin</div>
|
|
<div class="column"><i class="icon star"></i> Star</div>
|
|
<div class="column"><i class="icon empty star"></i> Empty Star</div>
|
|
<div class="column"><i class="icon half star"></i> Half Star</div>
|
|
<div class="column"><i class="icon print"></i> Print</div>
|
|
<div class="column"><i class="icon comment"></i> Comment</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another icon example">
|
|
<h4 class="ui header">View</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon content"></i> Content</div>
|
|
<div class="column"><i class="icon grid layout"></i> Grid Layout</div>
|
|
<div class="column"><i class="icon block layout"></i> Block Layout</div>
|
|
<div class="column"><i class="icon list layout"></i> List Layout</div>>
|
|
<div class="column"><i class="icon resize full"></i> Resize Full</div>
|
|
<div class="column"><i class="icon resize horizontal"></i> Resize Horizontal</div>
|
|
<div class="column"><i class="icon resize small"></i> Resize Small</div>
|
|
<div class="column"><i class="icon resize vertical"></i> Resize Vertical</div>
|
|
<div class="column"><i class="icon zoom in"></i> Zoom in</div>
|
|
<div class="column"><i class="icon zoom out"></i> Zoom out</div>
|
|
</div>
|
|
</div>
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Media Actions</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon eject"></i> Eject</div>
|
|
<div class="column"><i class="icon fast-forward"></i> Fast-forward</div>
|
|
<div class="column"><i class="icon pause"></i> Pause</div>
|
|
<div class="column"><i class="icon play"></i> Play</div>
|
|
<div class="column"><i class="icon to-end"></i> To-start</div>
|
|
<div class="column"><i class="icon to-start"></i> To-end</div>
|
|
<div class="column"><i class="icon forward"></i> Forward</div>
|
|
<div class="column"><i class="icon shuffle"></i> Shuffle</div>
|
|
<div class="column"><i class="icon clockwise"></i> Clockwise</div>
|
|
<div class="column"><i class="icon counter clockwise"></i> Counter clockwise</div>
|
|
</div>
|
|
</div>
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Objects</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon book"></i> Book</div>
|
|
<div class="column"><i class="icon calendar"></i> Calendar</div>
|
|
<div class="column"><i class="icon color"></i> Color</div>
|
|
<div class="column"><i class="icon desk globe"></i> Desk globe</div>
|
|
<div class="column"><i class="icon fire"></i> Fire</div>
|
|
<div class="column"><i class="icon globe"></i> Globe</div>
|
|
<div class="column"><i class="icon headphones"></i> Headphones</div>
|
|
<div class="column"><i class="icon id"></i> Id</div>
|
|
<div class="column"><i class="icon idea"></i> Idea</div>
|
|
<div class="column"><i class="icon lightning"></i> Lightning</div>
|
|
<div class="column"><i class="icon money"></i> Money</div>
|
|
<div class="column"><i class="icon paint"></i> Paint</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Indications</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon cancel circle"></i> Cancel Circle</div>
|
|
<div class="column"><i class="icon asterisk"></i> Asterisk</div>
|
|
<div class="column"><i class="icon attention circle"></i> Attention Circle</div>
|
|
<div class="column"><i class="icon attention"></i> Attention</div>
|
|
<div class="column"><i class="icon empty heart"></i> Empty Heart</div>
|
|
<div class="column"><i class="icon heart"></i> Heart</div>
|
|
<div class="column"><i class="icon thumbs down"></i> Thumbs Down</div>
|
|
<div class="column"><i class="icon thumbs up"></i> Thumbs Up</div>
|
|
<div class="column"><i class="icon terminal"></i> Terminal</div>
|
|
<div class="column"><i class="icon direction"></i> Direction</div>
|
|
|
|
<div class="column"><i class="icon location"></i> Location</div>
|
|
<div class="column"><i class="icon help"></i> Help</div>
|
|
<div class="column"><i class="icon info"></i> Info</div>
|
|
<div class="column"><i class="icon mic"></i> Mic</div>
|
|
<div class="column"><i class="icon off"></i> Off</div>
|
|
|
|
<div class="column"><i class="icon add"></i> Add</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Symbols</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon left arrow"></i> Left Open</div>
|
|
<div class="column"><i class="icon left triangle"></i> Left Triangle</div>
|
|
<div class="column"><i class="icon left"></i> Left</div>
|
|
<div class="column"><i class="icon right"></i> Right</div>
|
|
<div class="column"><i class="icon right triangle"></i> Right Triangle</div>
|
|
<div class="column"><i class="icon right arrow"></i> Right Arrow</div>
|
|
<div class="column"><i class="icon up"></i> Up</div>
|
|
<div class="column"><i class="icon up triangle"></i> Up Triangle</div>
|
|
<div class="column"><i class="icon up arrow"></i> Up Arrow</div>
|
|
<div class="column"><i class="icon down arrow"></i> Down Arrow</div>
|
|
<div class="column"><i class="icon down triangle"></i> Down Triangle</div>
|
|
<div class="column"><i class="icon down"></i> Down Arrow</div>
|
|
<div class="column"><i class="icon cube"></i> Cube</div>
|
|
<div class="column"><i class="icon minus"></i> Minus</div>
|
|
<div class="column"><i class="icon plus"></i> Plus</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another icon example">
|
|
<h4 class="ui header">Social</h4>
|
|
<div class="ui eight column grid">
|
|
<div class="column"><i class="icon facebook"></i> Facebook</div>
|
|
<div class="column"><i class="icon twitter"></i> Twitter</div>
|
|
<div class="column"><i class="icon github"></i> Github</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>An icon can show that it is disabled</p>
|
|
<i class="disabled users icon"></i>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>An icon can vary in size</p>
|
|
<i class="small users icon"></i>
|
|
<br>
|
|
<i class="users icon"></i>
|
|
<br>
|
|
<i class="large users icon"></i>
|
|
<br>
|
|
<i class="huge users icon"></i>
|
|
<br>
|
|
<i class="massive users icon"></i>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Link</h4>
|
|
<p>An icon can be formatted as a link</p>
|
|
<i class="close icon link"></i>
|
|
<br>
|
|
<i class="help circle icon link"></i>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Circular</h4>
|
|
<p>An icon can be formatted to appear circular</p>
|
|
<i class="circular users icon"></i>
|
|
<br>
|
|
<i class="circular inverted users icon"></i>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Square</h4>
|
|
<p>An icon can be formatted to appear square</p>
|
|
<i class="square users icon"></i>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Colors</h4>
|
|
<p>An icon can be formatted with different colors</p>
|
|
<i class="black users icon"></i>
|
|
<i class="blue user icon"></i>
|
|
<i class="red community icon"></i>
|
|
<i class="green add user icon"></i>
|
|
<i class="purple chat icon"></i>
|
|
<i class="teal comment icon"></i>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>an icon can have its colors inverted for contrast</p>
|
|
<i class="inverted black users icon"></i>
|
|
<i class="inverted blue user icon"></i>
|
|
<i class="inverted red community icon"></i>
|
|
<i class="inverted green add user icon"></i>
|
|
<i class="inverted purple chat icon"></i>
|
|
<i class="inverted teal comment icon"></i>
|
|
</div>
|
|
|
|
|
|
</div>
|