richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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.
2399 Commits
34 Branches
160 Tags
181 MiB
 
 
 
Tree: ad6ef93c86
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ad6ef93c86'
${ noResults }
SemanSemantic-UItic-UI/server/documents/elements/icon.html.eco

1172 lines
64 KiB
Raw Blame History

---
layout : 'default'
css : 'icon'
element : 'icon'
elementType : 'element'
title : 'Icon'
description : 'An icon is a glyph used to respresent something else'
type : 'UI Element'
themes : ['Default']
---
<%- @partial('header', { tabs: { icons: 'Icons', definition: 'Definition' } }) %>
<script src="/javascript/icon.js"></script>
<div class="main container">
<div class="ui active tab" data-tab="icons">
<h2 class="ui header">Icon Set</h2>
<p>An icon sets contains an arbitrary number of glyphs</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 <code>&lt;i&gt;</code> which allow for an abbreviated markup when sitting along-side text.
</div>
<div class="ui ignored message">Semantic includes a complete port of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a> for its standard icon set.</div>
<div class="icon example">
<h4 class="ui header">Web Content</h4>
<p>Icons can represent types of content found on websites</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Alarm"><i class="alarm icon"></i></div>
<div class="column" data-content="Alarm Outline"><i class="alarm outline icon"></i></div>
<div class="column" data-content="Browser"><i class="browser icon"></i></div>
<div class="column" data-content="Bug"><i class="bug icon"></i></div>
<div class="column" data-content="Calendar"><i class="calendar icon"></i></div>
<div class="column" data-content="Calendar Outline"><i class="calendar outline icon"></i></div>
<div class="column" data-content="Cloud"><i class="cloud icon"></i></div>
<div class="column" data-content="Code"><i class="code icon"></i></div>
<div class="column" data-content="Comment"><i class="comment icon"></i></div>
<div class="column" data-content="Comment Outline"><i class="comment outline icon"></i></div>
<div class="column" data-content="Comments"><i class="comments icon"></i></div>
<div class="column" data-content="Comments Outline"><i class="comments outline icon"></i></div>
<div class="column" data-content="Content"><i class="content icon"></i></div>
<div class="column" data-content="Dashboard"><i class="dashboard icon"></i></div>
<div class="column" data-content="External Link"><i class="external link icon"></i></div>
<div class="column" data-content="External Link Square"><i class="external link square icon"></i></div>
<div class="column" data-content="Feed"><i class="feed icon"></i></div>
<div class="column" data-content="History"><i class="history icon"></i></div>
<div class="column" data-content="Home"><i class="home icon"></i></div>
<div class="column" data-content="Idea"><i class="idea icon"></i></div>
<div class="column" data-content="Inbox"><i class="inbox icon"></i></div>
<div class="column" data-content="Lab"><i class="lab icon"></i></div>
<div class="column" data-content="Mail"><i class="mail icon"></i></div>
<div class="column" data-content="Mail Outline"><i class="mail outline icon"></i></div>
<div class="column" data-content="Mail square"><i class="mail square icon"></i></div>
<div class="column" data-content="Map"><i class="map icon"></i></div>
<div class="column" data-content="Payment"><i class="payment icon"></i></div>
<div class="column" data-content="Privacy"><i class="privacy icon"></i></div>
<div class="column" data-content="Protect"><i class="protect icon"></i></div>
<div class="column" data-content="Search"><i class="search icon"></i></div>
<div class="column" data-content="Setting"><i class="setting icon"></i></div>
<div class="column" data-content="Settings"><i class="settings icon"></i></div>
<div class="column" data-content="Shop"><i class="shop icon"></i></div>
<div class="column" data-content="Sitemap"><i class="sitemap icon"></i></div>
<div class="column" data-content="Tag"><i class="tag icon"></i></div>
<div class="column" data-content="Tags"><i class="tags icon"></i></div>
<div class="column" data-content="Tasks"><i class="tasks icon"></i></div>
<div class="column" data-content="Terminal"><i class="terminal icon"></i></div>
<div class="column" data-content="Ticket"><i class="ticket icon"></i></div>
<div class="column" data-content="Trophy"><i class="trophy icon"></i></div>
<div class="column" data-content="Wifi"><i class="wifi icon"></i></div>
</div>
<div class="existing code">
<i class="alarm icon"></i>
<i class="alarm outline icon"></i>
<i class="browser icon"></i>
<i class="bug icon"></i>
<i class="calendar icon"></i>
<i class="calendar outline icon"></i>
<i class="cloud icon"></i>
<i class="code icon"></i>
<i class="comment icon"></i>
<i class="comment outline icon"></i>
<i class="comments icon"></i>
<i class="comments outline icon"></i>
<i class="dashboard icon"></i>
<i class="external link icon"></i>
<i class="external link square icon"></i>
<i class="feed icon"></i>
<i class="history icon"></i>
<i class="home icon"></i>
<i class="idea icon"></i>
<i class="inbox icon"></i>
<i class="lab icon"></i>
<i class="mail icon"></i>
<i class="mail outline icon"></i>
<i class="mail square icon"></i>
<i class="map icon"></i>
<i class="payment icon"></i>
<i class="privacy icon"></i>
<i class="protect icon"></i>
<i class="search icon"></i>
<i class="setting icon"></i>
<i class="settings icon"></i>
<i class="shop icon"></i>
<i class="sitemap icon"></i>
<i class="tag icon"></i>
<i class="tags icon"></i>
<i class="tasks icon"></i>
<i class="terminal icon"></i>
<i class="ticket icon"></i>
<i class="top icon"></i>
<i class="wifi icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">User Actions</h4>
<p>Icons can represent common actions a user can take</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Adjust"><i class="adjust icon"></i></div>
<div class="column" data-content="Archive"><i class="archive icon"></i></div>
<div class="column" data-content="Ban"><i class="ban icon"></i></div>
<div class="column" data-content="Bookmark"><i class="bookmark icon"></i></div>
<div class="column" data-content="Call"><i class="call icon"></i></div>
<div class="column" data-content="Call Square"><i class="call square icon"></i></div>
<div class="column" data-content="Cloud Download"><i class="cloud download icon"></i></div>
<div class="column" data-content="Cloud Upload"><i class="cloud upload icon"></i></div>
<div class="column" data-content="Compress"><i class="compress icon"></i></div>
<div class="column" data-content="Configure"><i class="configure icon"></i></div>
<div class="column" data-content="Download"><i class="download icon"></i></div>
<div class="column" data-content="Edit"><i class="edit icon"></i></div>
<div class="column" data-content="Erase"><i class="erase icon"></i></div>
<div class="column" data-content="Exchange"><i class="exchange icon"></i></div>
<div class="column" data-content="External Share"><i class="external share icon"></i></div>
<div class="column" data-content="Expand"><i class="expand icon"></i></div>
<div class="column" data-content="Filter"><i class="filter icon"></i></div>
<div class="column" data-content="Flag"><i class="flag icon"></i></div>
<div class="column" data-content="Flag Outline"><i class="flag outline icon"></i></div>
<div class="column" data-content="Hide"><i class="hide icon"></i></div>
<div class="column" data-content="Lock"><i class="lock icon"></i></div>
<div class="column" data-content="Mail Forward"><i class="mail forward icon"></i></div>
<div class="column" data-content="Pin"><i class="pin icon"></i></div>
<div class="column" data-content="Print"><i class="print icon"></i></div>
<div class="column" data-content="Random"><i class="random icon"></i></div>
<div class="column" data-content="Recycle"><i class="recycle icon"></i></div>
<div class="column" data-content="Refresh"><i class="refresh icon"></i></div>
<div class="column" data-content="Remove Bookmark"><i class="remove bookmark icon"></i></div>
<div class="column" data-content="Repeat"><i class="repeat icon"></i></div>
<div class="column" data-content="Reply All"><i class="reply all icon"></i></div>
<div class="column" data-content="Reply"><i class="reply icon"></i></div>
<div class="column" data-content="Retweet"><i class="retweet icon"></i></div>
<div class="column" data-content="Send"><i class="send icon"></i></div>
<div class="column" data-content="Send Outline"><i class="send outline icon"></i></div>
<div class="column" data-content="Share Alternate"><i class="share alternate icon"></i></div>
<div class="column" data-content="Share Alternate Square"><i class="share alternate square icon"></i></div>
<div class="column" data-content="Share"><i class="share icon"></i></div>
<div class="column" data-content="Share Square"><i class="share square icon"></i></div>
<div class="column" data-content="Sign in"><i class="sign in icon"></i></div>
<div class="column" data-content="Sign out"><i class="sign out icon"></i></div>
<div class="column" data-content="Theme"><i class="theme icon"></i></div>
<div class="column" data-content="Translate"><i class="translate icon"></i></div>
<div class="column" data-content="Undo"><i class="undo icon"></i></div>
<div class="column" data-content="Unhide"><i class="unhide icon"></i></div>
<div class="column" data-content="Unlock Alternate"><i class="unlock alternate icon"></i></div>
<div class="column" data-content="Unlock"><i class="unlock icon"></i></div>
<div class="column" data-content="Upload"><i class="upload icon"></i></div>
<div class="column" data-content="Wait"><i class="wait icon"></i></div>
<div class="column" data-content="Wizard"><i class="wizard icon"></i></div>
<div class="column" data-content="Write"><i class="write icon"></i></div>
<div class="column" data-content="Write Square"><i class="write square icon"></i></div>
</div>
<div class="existing code">
<i class="adjust icon"></i>
<i class="archive icon"></i>
<i class="ban icon"></i>
<i class="bookmark icon"></i>
<i class="call icon"></i>
<i class="call square icon"></i>
<i class="cloud download icon"></i>
<i class="cloud upload icon"></i>
<i class="compress icon"></i>
<i class="configure icon"></i>
<i class="download icon"></i>
<i class="edit icon"></i>
<i class="erase icon"></i>
<i class="exchange icon"></i>
<i class="external share icon"></i>
<i class="expand icon"></i>
<i class="filter icon"></i>
<i class="flag icon"></i>
<i class="flag outline icon"></i>
<i class="hide icon"></i>
<i class="lock icon"></i>
<i class="mail forward icon"></i>
<i class="pin icon"></i>
<i class="print icon"></i>
<i class="random icon"></i>
<i class="recycle icon"></i>
<i class="refresh icon"></i>
<i class="remove bookmark icon"></i>
<i class="repeat icon"></i>
<i class="reply all icon"></i>
<i class="reply icon"></i>
<i class="retweet icon"></i>
<i class="send icon"></i>
<i class="send outline icon"></i>
<i class="share alternate icon"></i>
<i class="share alternate square icon"></i>
<i class="share icon"></i>
<i class="share square icon"></i>
<i class="sign in icon"></i>
<i class="sign out icon"></i>
<i class="tint icon"></i>
<i class="translate icon"></i>
<i class="undo icon"></i>
<i class="unhide icon"></i>
<i class="unlock alternate icon"></i>
<i class="unlock icon"></i>
<i class="upload icon"></i>
<i class="wait icon"></i>
<i class="wizard icon"></i>
<i class="write icon"></i>
<i class="write square icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Message</h4>
<p>Icons can alert users to the type of message being displayed</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Announcement"><i class="announcement icon"></i></div>
<div class="column" data-content="Flag"><i class="flag icon"></i></div>
<div class="column" data-content="Help"><i class="help icon"></i></div>
<div class="column" data-content="Help Circle"><i class="help circle icon"></i></div>
<div class="column" data-content="Info"><i class="info icon"></i></div>
<div class="column" data-content="Info Circle"><i class="info circle icon"></i></div>
<div class="column" data-content="Warning"><i class="warning icon"></i></div>
<div class="column" data-content="Warning Circle"><i class="warning circle icon"></i></div>
<div class="column" data-content="Warning Sign"><i class="warning sign icon"></i></div>
</div>
<div class="existing code">
<i class="announcement icon"></i>
<i class="help icon"></i>
<i class="help square icon"></i>
<i class="info icon"></i>
<i class="info square icon"></i>
<i class="warning icon"></i>
<i class="warning sign icon"></i>
<i class="warning square icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Users</h4>
<p>Icons can represent types of people</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Child"><i class="child icon"></i></div>
<div class="column" data-content="Doctor"><i class="doctor icon"></i></div>
<div class="column" data-content="Female"><i class="female icon"></i></div>
<div class="column" data-content="Handicap"><i class="handicap icon"></i></div>
<div class="column" data-content="Male"><i class="male icon"></i></div>
<div class="column" data-content="Student"><i class="student icon"></i></div>
<div class="column" data-content="User"><i class="user icon"></i></div>
<div class="column" data-content="Users"><i class="users icon"></i></div>
</div>
<div class="existing code">
<i class="child icon"></i>
<i class="doctor icon"></i>
<i class="female icon"></i>
<i class="handicap icon"></i>
<i class="male icon"></i>
<i class="student icon"></i>
<i class="user icon"></i>
<i class="users icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Layout Adjustment</h4>
<p>Icons can alert users to common ways to adjust page layouts</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Grid Layout"><i class="grid layout icon"></i></div>
<div class="column" data-content="List Layout"><i class="list layout icon"></i></div>
<div class="column" data-content="Block Layout"><i class="block layout icon"></i></div>
<div class="column" data-content="Zoom"><i class="zoom icon"></i></div>
<div class="column" data-content="Zoom Out"><i class="zoom out icon"></i></div>
<div class="column" data-content="Resize Vertical"><i class="resize vertical icon"></i></div>
<div class="column" data-content="Resize Horizontal"><i class="resize horizontal icon"></i></div>
<div class="column" data-content="Maximize"><i class="maximize icon"></i></div>
<div class="column" data-content="Crop"><i class="crop icon"></i></div>
</div>
<div class="existing code">
<i class="child icon"></i>
<i class="doctor icon"></i>
<i class="female icon"></i>
<i class="handicap icon"></i>
<i class="male icon"></i>
<i class="student icon"></i>
<i class="user icon"></i>
<i class="users icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Objects</h4>
<p>Icons can be used to represent common objects</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Anchor"><i class="anchor icon"></i></div>
<div class="column" data-content="Bar"><i class="bar icon"></i></div>
<div class="column" data-content="Bomb"><i class="bomb icon"></i></div>
<div class="column" data-content="Book"><i class="book icon"></i></div>
<div class="column" data-content="Bullseye"><i class="bullseye icon"></i></div>
<div class="column" data-content="Checkered Flag"><i class="checkered flag icon"></i></div>
<div class="column" data-content="Cocktail"><i class="cocktail icon"></i></div>
<div class="column" data-content="Fax"><i class="fax icon"></i></div>
<div class="column" data-content="Fire Extinguisher"><i class="fire extinguisher icon"></i></div>
<div class="column" data-content="Fire"><i class="fire icon"></i></div>
<div class="column" data-content="Gift"><i class="gift icon"></i></div>
<div class="column" data-content="Leaf"><i class="leaf icon"></i></div>
<div class="column" data-content="Legal"><i class="legal icon"></i></div>
<div class="column" data-content="Lemon"><i class="lemon icon"></i></div>
<div class="column" data-content="Life Ring"><i class="life ring icon"></i></div>
<div class="column" data-content="Lightning"><i class="lightning icon"></i></div>
<div class="column" data-content="Magnet"><i class="magnet icon"></i></div>
<div class="column" data-content="Money"><i class="money icon"></i></div>
<div class="column" data-content="Moon"><i class="moon icon"></i></div>
<div class="column" data-content="Plane"><i class="plane icon"></i></div>
<div class="column" data-content="Puzzle"><i class="puzzle icon"></i></div>
<div class="column" data-content="Rain"><i class="rain icon"></i></div>
<div class="column" data-content="Road"><i class="road icon"></i></div>
<div class="column" data-content="Rocket"><i class="rocket icon"></i></div>
<div class="column" data-content="Shipping"><i class="shipping icon"></i></div>
<div class="column" data-content="Suitcase"><i class="suitcase icon"></i></div>
<div class="column" data-content="Sun"><i class="sun icon"></i></div>
<div class="column" data-content="Travel"><i class="travel icon"></i></div>
<div class="column" data-content="Treatment"><i class="treatment icon"></i></div>
<div class="column" data-content="World"><i class="world icon"></i></div>
</div>
<div class="existing code">
<i class="anchor icon"></i>
<i class="bar icon"></i>
<i class="bomb icon"></i>
<i class="book icon"></i>
<i class="bullseye icon"></i>
<i class="checkered flag icon"></i>
<i class="cocktail icon"></i>
<i class="fax icon"></i>
<i class="fire extinguisher icon"></i>
<i class="fire icon"></i>
<i class="flag outline icon"></i>
<i class="gift icon"></i>
<i class="leaf icon"></i>
<i class="legal icon"></i>
<i class="lemon icon"></i>
<i class="life ring icon"></i>
<i class="lightning icon"></i>
<i class="magnet icon"></i>
<i class="money icon"></i>
<i class="moon icon"></i>
<i class="plane icon"></i>
<i class="puzzle icon"></i>
<i class="rain icon"></i>
<i class="road icon"></i>
<i class="rocket icon"></i>
<i class="shipping icon"></i>
<i class="suitcase icon"></i>
<i class="sun icon"></i>
<i class="travel icon"></i>
<i class="treatment icon"></i>
<i class="world icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Shapes</h4>
<p>Icons can be used to create shapes</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Crosshairs"><i class="crosshairs icon"></i></div>
<div class="column" data-content="Asterisk"><i class="asterisk icon"></i></div>
<div class="column" data-content="Certificate"><i class="certificate icon"></i></div>
<div class="column" data-content="Spinner"><i class="spinner icon"></i></div>
<div class="column" data-content="Circle"><i class="circle icon"></i></div>
<div class="column" data-content="Quote Left"><i class="quote left icon"></i></div>
<div class="column" data-content="Quote Right"><i class="quote right icon"></i></div>
<div class="column" data-content="Ellipsis Horizontal"><i class="ellipsis horizontal icon"></i></div>
<div class="column" data-content="Ellipsis Vertical"><i class="ellipsis vertical icon"></i></div>
<div class="column" data-content="Cube"><i class="cube icon"></i></div>
<div class="column" data-content="Cubes"><i class="cubes icon"></i></div>
<div class="column" data-content="Circle Notched"><i class="circle notched icon"></i></div>
<div class="column" data-content="Circle Thin"><i class="circle thin icon"></i></div>
</div>
<div class="existing code">
<i class="crosshairs icon"></i>
<i class="asterisk icon"></i>
<i class="certificate icon"></i>
<i class="spinner icon"></i>
<i class="circle icon"></i>
<i class="quote left icon"></i>
<i class="quote right icon"></i>
<i class="ellipsis horizontal icon"></i>
<i class="ellipsis vertical icon"></i>
<i class="cube icon"></i>
<i class="cubes icon"></i>
<i class="circle notched icon"></i>
<i class="circle thin icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Item Selection</h4>
<p>Icons can show whether an item is included in a set</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Add Circle"><i class="add circle icon"></i></div>
<div class="column" data-content="Add Square"><i class="add square icon"></i></div>
<div class="column" data-content="Check Circle"><i class="check circle icon"></i></div>
<div class="column" data-content="Check Circle Outline"><i class="check circle outline icon"></i></div>
<div class="column" data-content="Check Square"><i class="check square icon"></i></div>
<div class="column" data-content="Checkmark Box"><i class="checkmark box icon"></i></div>
<div class="column" data-content="Checkmark"><i class="checkmark icon"></i></div>
<div class="column" data-content="Minus Circle"><i class="minus circle icon"></i></div>
<div class="column" data-content="Minus"><i class="minus icon"></i></div>
<div class="column" data-content="Minus Square"><i class="minus square icon"></i></div>
<div class="column" data-content="Minus Square Outline"><i class="minus square outline icon"></i></div>
<div class="column" data-content="Move"><i class="move icon"></i></div>
<div class="column" data-content="Plus"><i class="plus icon"></i></div>
<div class="column" data-content="Plus Square Outline"><i class="plus square outline icon"></i></div>
<div class="column" data-content="Radio"><i class="radio icon"></i></div>
<div class="column" data-content="Remove Circle"><i class="remove circle icon"></i></div>
<div class="column" data-content="Remove Circle Outline"><i class="remove circle outline icon"></i></div>
<div class="column" data-content="Remove"><i class="remove icon"></i></div>
<div class="column" data-content="Selected Radio"><i class="selected radio icon"></i></div>
</div>
<div class="existing code">
<i class="add circle icon"></i>
<i class="add square icon"></i>
<i class="check circle icon"></i>
<i class="check circle outline icon"></i>
<i class="check square icon"></i>
<i class="checkmark box icon"></i>
<i class="checkmark icon"></i>
<i class="minus circle icon"></i>
<i class="minus icon"></i>
<i class="minus square icon"></i>
<i class="minus square outline icon"></i>
<i class="move icon"></i>
<i class="plus icon"></i>
<i class="plus square outline icon"></i>
<i class="radio icon"></i>
<i class="remove circle icon"></i>
<i class="remove circle outline icon"></i>
<i class="remove icon"></i>
<i class="selected radio icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Media</h4>
<p>Icons can represent common media types</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Bar Chart"><i class="bar chart icon"></i></div>
<div class="column" data-content="Camera Retro"><i class="camera retro icon"></i></div>
<div class="column" data-content="Film"><i class="film icon"></i></div>
<div class="column" data-content="Photo"><i class="photo icon"></i></div>
<div class="column" data-content="Sound"><i class="sound icon"></i></div>
</div>
<div class="existing code">
</div>
</div>
<div class="icon example">
<h4 class="ui header">Pointers</h4>
<p>Icons can be used to indicate a direction</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Angle Double Down"><i class="angle double down icon"></i></div>
<div class="column" data-content="Angle Double Left"><i class="angle double left icon"></i></div>
<div class="column" data-content="Angle Double Right"><i class="angle double right icon"></i></div>
<div class="column" data-content="Angle Double Up"><i class="angle double up icon"></i></div>
<div class="column" data-content="Angle Down"><i class="angle down icon"></i></div>
<div class="column" data-content="Angle Left"><i class="angle left icon"></i></div>
<div class="column" data-content="Angle Right"><i class="angle right icon"></i></div>
<div class="column" data-content="Angle Up"><i class="angle up icon"></i></div>
<div class="column" data-content="Arrow Circle Down"><i class="arrow circle down icon"></i></div>
<div class="column" data-content="Arrow Circle Left"><i class="arrow circle left icon"></i></div>
<div class="column" data-content="Arrow Circle Outline Down"><i class="arrow circle outline down icon"></i></div>
<div class="column" data-content="Arrow Circle Outline Left"><i class="arrow circle outline left icon"></i></div>
<div class="column" data-content="Arrow Circle Outline Right"><i class="arrow circle outline right icon"></i></div>
<div class="column" data-content="Arrow Circle Outline Up"><i class="arrow circle outline up icon"></i></div>
<div class="column" data-content="Arrow Circle Right"><i class="arrow circle right icon"></i></div>
<div class="column" data-content="Arrow Circle Up"><i class="arrow circle up icon"></i></div>
<div class="column" data-content="Arrow Down"><i class="arrow down icon"></i></div>
<div class="column" data-content="Arrow Left"><i class="arrow left icon"></i></div>
<div class="column" data-content="Arrow Right"><i class="arrow right icon"></i></div>
<div class="column" data-content="Arrow Up"><i class="arrow up icon"></i></div>
<div class="column" data-content="Caret Down"><i class="caret down icon"></i></div>
<div class="column" data-content="Caret Left"><i class="caret left icon"></i></div>
<div class="column" data-content="Caret Right"><i class="caret right icon"></i></div>
<div class="column" data-content="Caret Up"><i class="caret up icon"></i></div>
<div class="column" data-content="Chevron Circle Down"><i class="chevron circle down icon"></i></div>
<div class="column" data-content="Chevron Circle Left"><i class="chevron circle left icon"></i></div>
<div class="column" data-content="Chevron Circle Right"><i class="chevron circle right icon"></i></div>
<div class="column" data-content="Chevron Circle Up"><i class="chevron circle up icon"></i></div>
<div class="column" data-content="Chevron Down"><i class="chevron down icon"></i></div>
<div class="column" data-content="Chevron Left"><i class="chevron left icon"></i></div>
<div class="column" data-content="Chevron Right"><i class="chevron right icon"></i></div>
<div class="column" data-content="Chevron Up"><i class="chevron up icon"></i></div>
<div class="column" data-content="Long Arrow Down"><i class="long arrow down icon"></i></div>
<div class="column" data-content="Long Arrow Left"><i class="long arrow left icon"></i></div>
<div class="column" data-content="Long Arrow Right"><i class="long arrow right icon"></i></div>
<div class="column" data-content="Long Arrow Up"><i class="long arrow up icon"></i></div>
<div class="column" data-content="Pointing Down"><i class="pointing down icon"></i></div>
<div class="column" data-content="Pointing Left"><i class="pointing left icon"></i></div>
<div class="column" data-content="Pointing Right"><i class="pointing right icon"></i></div>
<div class="column" data-content="Pointing Up"><i class="pointing up icon"></i></div>
<div class="column" data-content="Toggle Down"><i class="toggle down icon"></i></div>
<div class="column" data-content="Toggle Left"><i class="toggle left icon"></i></div>
<div class="column" data-content="Toggle Right"><i class="toggle right icon"></i></div>
<div class="column" data-content="Toggle Up"><i class="toggle up icon"></i></div>
</div>
<div class="existing code">
<i class="angle double down icon"></i>
<i class="angle double left icon"></i>
<i class="angle double right icon"></i>
<i class="angle double up icon"></i>
<i class="angle down icon"></i>
<i class="angle left icon"></i>
<i class="angle right icon"></i>
<i class="angle up icon"></i>
<i class="arrow circle down icon"></i>
<i class="arrow circle left icon"></i>
<i class="arrow circle outline down icon"></i>
<i class="arrow circle outline left icon"></i>
<i class="arrow circle outline right icon"></i>
<i class="arrow circle outline up icon"></i>
<i class="arrow circle right icon"></i>
<i class="arrow circle up icon"></i>
<i class="arrow down icon"></i>
<i class="arrow left icon"></i>
<i class="arrow right icon"></i>
<i class="arrow up icon"></i>
<i class="caret down icon"></i>
<i class="caret left icon"></i>
<i class="caret right icon"></i>
<i class="caret up icon"></i>
<i class="chevron circle down icon"></i>
<i class="chevron circle left icon"></i>
<i class="chevron circle right icon"></i>
<i class="chevron circle up icon"></i>
<i class="chevron down icon"></i>
<i class="chevron left icon"></i>
<i class="chevron right icon"></i>
<i class="chevron up icon"></i>
<i class="long arrow down icon"></i>
<i class="long arrow left icon"></i>
<i class="long arrow right icon"></i>
<i class="long arrow up icon"></i>
<i class="pointing down icon"></i>
<i class="pointing left icon"></i>
<i class="pointing right icon"></i>
<i class="pointing up icon"></i>
<i class="toggle down icon"></i>
<i class="toggle left icon"></i>
<i class="toggle right icon"></i>
<i class="toggle up icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Computer and File System</h4>
<p>Icons can represent elements of a computer and its file system</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Desktop"><i class="desktop icon"></i></div>
<div class="column" data-content="Disk Outline"><i class="disk outline icon"></i></div>
<div class="column" data-content="File Archive Outline"><i class="file archive outline icon"></i></div>
<div class="column" data-content="File Audio Outline"><i class="file audio outline icon"></i></div>
<div class="column" data-content="File Code Outline"><i class="file code outline icon"></i></div>
<div class="column" data-content="File Excel Outline"><i class="file excel outline icon"></i></div>
<div class="column" data-content="File"><i class="file icon"></i></div>
<div class="column" data-content="File Image Outline"><i class="file image outline icon"></i></div>
<div class="column" data-content="File Outline"><i class="file outline icon"></i></div>
<div class="column" data-content="File Pdf Outline"><i class="file pdf outline icon"></i></div>
<div class="column" data-content="File Powerpoint Outline"><i class="file powerpoint outline icon"></i></div>
<div class="column" data-content="File Text"><i class="file text icon"></i></div>
<div class="column" data-content="File Text Outline"><i class="file text outline icon"></i></div>
<div class="column" data-content="File Video Outline"><i class="file video outline icon"></i></div>
<div class="column" data-content="File Word Outline"><i class="file word outline icon"></i></div>
<div class="column" data-content="Folder"><i class="folder icon"></i></div>
<div class="column" data-content="Folder Open"><i class="folder open icon"></i></div>
<div class="column" data-content="Folder Open Outline"><i class="folder open outline icon"></i></div>
<div class="column" data-content="Folder Outline"><i class="folder outline icon"></i></div>
<div class="column" data-content="Game"><i class="game icon"></i></div>
<div class="column" data-content="Keyboard"><i class="keyboard icon"></i></div>
<div class="column" data-content="Laptop"><i class="laptop icon"></i></div>
<div class="column" data-content="Level Down"><i class="level down icon"></i></div>
<div class="column" data-content="Level Up"><i class="level up icon"></i></div>
<div class="column" data-content="Mobile"><i class="mobile icon"></i></div>
<div class="column" data-content="Power"><i class="power icon"></i></div>
<div class="column" data-content="Tablet"><i class="tablet icon"></i></div>
<div class="column" data-content="Trash"><i class="trash icon"></i></div>
</div>
<div class="existing code">
<i class="desktop icon"></i>
<i class="disk outline icon"></i>
<i class="file archive outline icon"></i>
<i class="file audio outline icon"></i>
<i class="file code outline icon"></i>
<i class="file excel outline icon"></i>
<i class="file icon"></i>
<i class="file image outline icon"></i>
<i class="file outline icon"></i>
<i class="file pdf outline icon"></i>
<i class="file powerpoint outline icon"></i>
<i class="file text icon"></i>
<i class="file text outline icon"></i>
<i class="file video outline icon"></i>
<i class="file word outline icon"></i>
<i class="folder icon"></i>
<i class="folder open icon"></i>
<i class="folder open outline icon"></i>
<i class="folder outline icon"></i>
<i class="game icon"></i>
<i class="keyboard icon"></i>
<i class="laptop icon"></i>
<i class="level down icon"></i>
<i class="level up icon"></i>
<i class="mobile icon"></i>
<i class="power icon"></i>
<i class="tablet icon"></i>
<i class="trash icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Technologies</h4>
<p>Icons can represent common technologies</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Barcode"><i class="barcode icon"></i></div>
<div class="column" data-content="Css3"><i class="css3 icon"></i></div>
<div class="column" data-content="Database"><i class="database icon"></i></div>
<div class="column" data-content="Fork"><i class="fork icon"></i></div>
<div class="column" data-content="Html5"><i class="html5 icon"></i></div>
<div class="column" data-content="Openid"><i class="openid icon"></i></div>
<div class="column" data-content="Qrcode"><i class="qrcode icon"></i></div>
<div class="column" data-content="Rss Square"><i class="rss square icon"></i></div>
</div>
<div class="existing code">
<i class="barcode icon"></i>
<i class="css3 icon"></i>
<i class="database icon"></i>
<i class="fork icon"></i>
<i class="html5 icon"></i>
<i class="openid icon"></i>
<i class="qrcode icon"></i>
<i class="rss square icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Rating</h4>
<p>Icons can be used to represent users attitude towards content</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Empty Heart"><i class="empty heart icon"></i></div>
<div class="column" data-content="Empty Star"><i class="empty star icon"></i></div>
<div class="column" data-content="Frown"><i class="frown icon"></i></div>
<div class="column" data-content="Heart"><i class="heart icon"></i></div>
<div class="column" data-content="Meh"><i class="meh icon"></i></div>
<div class="column" data-content="Smile"><i class="smile icon"></i></div>
<div class="column" data-content="Star Half Empty"><i class="star half empty icon"></i></div>
<div class="column" data-content="Star Half"><i class="star half icon"></i></div>
<div class="column" data-content="Star"><i class="star icon"></i></div>
<div class="column" data-content="Thumbs Down"><i class="thumbs down icon"></i></div>
<div class="column" data-content="Thumbs Outline Down"><i class="thumbs outline down icon"></i></div>
<div class="column" data-content="Thumbs Outline Up"><i class="thumbs outline up icon"></i></div>
<div class="column" data-content="Thumbs Up"><i class="thumbs up icon"></i></div>
</div>
<div class="existing code">
<i class="empty heart icon"></i>
<i class="empty star icon"></i>
<i class="frown icon"></i>
<i class="heart icon"></i>
<i class="meh icon"></i>
<i class="smile icon"></i>
<i class="star half empty icon"></i>
<i class="star half icon"></i>
<i class="star icon"></i>
<i class="thumbs down icon"></i>
<i class="thumbs outline down icon"></i>
<i class="thumbs outline up icon"></i>
<i class="thumbs up icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Audio</h4>
<p>Icons can be used to represent common ways to interact with audio</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Backward"><i class="backward icon"></i></div>
<div class="column" data-content="Eject"><i class="eject icon"></i></div>
<div class="column" data-content="Fast Backward"><i class="fast backward icon"></i></div>
<div class="column" data-content="Fast Forward"><i class="fast forward icon"></i></div>
<div class="column" data-content="Forward"><i class="forward icon"></i></div>
<div class="column" data-content="Music"><i class="music icon"></i></div>
<div class="column" data-content="Mute"><i class="mute icon"></i></div>
<div class="column" data-content="Pause"><i class="pause icon"></i></div>
<div class="column" data-content="Play"><i class="play icon"></i></div>
<div class="column" data-content="Record"><i class="record icon"></i></div>
<div class="column" data-content="Step Backward"><i class="step backward icon"></i></div>
<div class="column" data-content="Step Forward"><i class="step forward icon"></i></div>
<div class="column" data-content="Stop"><i class="stop icon"></i></div>
<div class="column" data-content="Unmute"><i class="unmute icon"></i></div>
<div class="column" data-content="Video Play"><i class="video play icon"></i></div>
<div class="column" data-content="Video Play Outline"><i class="video play outline icon"></i></div>
<div class="column" data-content="Volume Down"><i class="volume down icon"></i></div>
<div class="column" data-content="Volume Off"><i class="volume off icon"></i></div>
<div class="column" data-content="Volume Up"><i class="volume up icon"></i></div>
</div>
<div class="existing code">
<i class="backward icon"></i>
<i class="eject icon"></i>
<i class="fast backward icon"></i>
<i class="fast forward icon"></i>
<i class="forward icon"></i>
<i class="music icon"></i>
<i class="mute icon"></i>
<i class="pause icon"></i>
<i class="play icon"></i>
<i class="record icon"></i>
<i class="step backward icon"></i>
<i class="step forward icon"></i>
<i class="stop icon"></i>
<i class="unmute icon"></i>
<i class="video play icon"></i>
<i class="video play outline icon"></i>
<i class="volume down icon"></i>
<i class="volume off icon"></i>
<i class="volume up icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Map</h4>
<p>Icons can be used to represent elements on a map</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Building"><i class="building icon"></i></div>
<div class="column" data-content="Building Outline"><i class="building outline icon"></i></div>
<div class="column" data-content="Car"><i class="car icon"></i></div>
<div class="column" data-content="Coffee"><i class="coffee icon"></i></div>
<div class="column" data-content="Emergency"><i class="emergency icon"></i></div>
<div class="column" data-content="First Aid"><i class="first aid icon"></i></div>
<div class="column" data-content="Food"><i class="food icon"></i></div>
<div class="column" data-content="H"><i class="h icon"></i></div>
<div class="column" data-content="Hospital"><i class="hospital icon"></i></div>
<div class="column" data-content="Location Arrow"><i class="location arrow icon"></i></div>
<div class="column" data-content="Marker"><i class="marker icon"></i></div>
<div class="column" data-content="Military"><i class="military icon"></i></div>
<div class="column" data-content="Paw"><i class="paw icon"></i></div>
<div class="column" data-content="Space Shuttle"><i class="space shuttle icon"></i></div>
<div class="column" data-content="Spoon"><i class="spoon icon"></i></div>
<div class="column" data-content="Taxi"><i class="taxi icon"></i></div>
<div class="column" data-content="Tree"><i class="tree icon"></i></div>
<div class="column" data-content="University"><i class="university icon"></i></div>
</div>
<div class="existing code">
<i class="building icon"></i>
<i class="building outline icon"></i>
<i class="car icon"></i>
<i class="coffee icon"></i>
<i class="emergency icon"></i>
<i class="first aid icon"></i>
<i class="food icon"></i>
<i class="h icon"></i>
<i class="hospital icon"></i>
<i class="location arrow icon"></i>
<i class="marker icon"></i>
<i class="military icon"></i>
<i class="paw icon"></i>
<i class="space shuttle icon"></i>
<i class="spoon icon"></i>
<i class="taxi icon"></i>
<i class="tree icon"></i>
<i class="university icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Tables</h4>
<p>Icons can be used to represent common actions inside a table</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Columns"><i class="columns icon"></i></div>
<div class="column" data-content="Sort Alphabet Ascending"><i class="sort alphabet ascending icon"></i></div>
<div class="column" data-content="Sort Alphabet Descending"><i class="sort alphabet descending icon"></i></div>
<div class="column" data-content="Sort Ascending"><i class="sort ascending icon"></i></div>
<div class="column" data-content="Sort Content Ascending"><i class="sort content ascending icon"></i></div>
<div class="column" data-content="Sort Content Descending"><i class="sort content descending icon"></i></div>
<div class="column" data-content="Sort Descending"><i class="sort descending icon"></i></div>
<div class="column" data-content="Sort"><i class="sort icon"></i></div>
<div class="column" data-content="Sort Numeric Ascending"><i class="sort numeric ascending icon"></i></div>
<div class="column" data-content="Sort Numeric Descending"><i class="sort numeric descending icon"></i></div>
<div class="column" data-content="Table"><i class="table icon"></i></div>
</div>
<div class="existing code">
<i class="columns icon"></i>
<i class="sort alphabet ascending icon"></i>
<i class="sort alphabet descending icon"></i>
<i class="sort ascending icon"></i>
<i class="sort content ascending icon"></i>
<i class="sort content descending icon"></i>
<i class="sort descending icon"></i>
<i class="sort icon"></i>
<i class="sort numeric ascending icon"></i>
<i class="sort numeric descending icon"></i>
<i class="table icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Text Editor</h4>
<p>Icons can represent common actions when editing text</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Align Center"><i class="align center icon"></i></div>
<div class="column" data-content="Align Justify"><i class="align justify icon"></i></div>
<div class="column" data-content="Align Left"><i class="align left icon"></i></div>
<div class="column" data-content="Align Right"><i class="align right icon"></i></div>
<div class="column" data-content="Attach"><i class="attach icon"></i></div>
<div class="column" data-content="Bold"><i class="bold icon"></i></div>
<div class="column" data-content="Copy"><i class="copy icon"></i></div>
<div class="column" data-content="Cut"><i class="cut icon"></i></div>
<div class="column" data-content="Font"><i class="font icon"></i></div>
<div class="column" data-content="Header"><i class="header icon"></i></div>
<div class="column" data-content="Indent"><i class="indent icon"></i></div>
<div class="column" data-content="Italic"><i class="italic icon"></i></div>
<div class="column" data-content="Linkify"><i class="linkify icon"></i></div>
<div class="column" data-content="List"><i class="list icon"></i></div>
<div class="column" data-content="Ordered List"><i class="ordered list icon"></i></div>
<div class="column" data-content="Outdent"><i class="outdent icon"></i></div>
<div class="column" data-content="Paragraph"><i class="paragraph icon"></i></div>
<div class="column" data-content="Paste"><i class="paste icon"></i></div>
<div class="column" data-content="Save"><i class="save icon"></i></div>
<div class="column" data-content="Strikethrough"><i class="strikethrough icon"></i></div>
<div class="column" data-content="Subscript"><i class="subscript icon"></i></div>
<div class="column" data-content="Superscript"><i class="superscript icon"></i></div>
<div class="column" data-content="Text Height"><i class="text height icon"></i></div>
<div class="column" data-content="Text Width"><i class="text width icon"></i></div>
<div class="column" data-content="Underline"><i class="underline icon"></i></div>
<div class="column" data-content="Unlink"><i class="unlink icon"></i></div>
<div class="column" data-content="Unordered List"><i class="unordered list icon"></i></div>
</div>
<div class="existing code">
<i class="align center icon"></i>
<i class="align justify icon"></i>
<i class="align left icon"></i>
<i class="align right icon"></i>
<i class="attach icon"></i>
<i class="bold icon"></i>
<i class="content icon"></i>
<i class="copy icon"></i>
<i class="cut icon"></i>
<i class="font icon"></i>
<i class="header icon"></i>
<i class="indent icon"></i>
<i class="italic icon"></i>
<i class="link icon"></i>
<i class="list icon"></i>
<i class="ordered list icon"></i>
<i class="outdent icon"></i>
<i class="paragraph icon"></i>
<i class="paste icon"></i>
<i class="save icon"></i>
<i class="strikethrough icon"></i>
<i class="subscript icon"></i>
<i class="superscript icon"></i>
<i class="text height icon"></i>
<i class="text width icon"></i>
<i class="underline icon"></i>
<i class="unlink icon"></i>
<i class="unordered list icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Currency</h4>
<p>Icons can represent units of currency</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Dollar"><i class="dollar icon"></i></div>
<div class="column" data-content="Euro"><i class="euro icon"></i></div>
<div class="column" data-content="Lira"><i class="lira icon"></i></div>
<div class="column" data-content="Pound"><i class="pound icon"></i></div>
<div class="column" data-content="Ruble"><i class="ruble icon"></i></div>
<div class="column" data-content="Rupee"><i class="rupee icon"></i></div>
<div class="column" data-content="Won"><i class="won icon"></i></div>
<div class="column" data-content="Yen"><i class="yen icon"></i></div>
</div>
<div class="existing code">
<i class="dollar icon"></i>
<i class="euro icon"></i>
<i class="lira icon"></i>
<i class="pound icon"></i>
<i class="ruble icon"></i>
<i class="rupee icon"></i>
<i class="won icon"></i>
<i class="yen icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">Brands</h4>
<p>Icons can represent logos to common brands</p>
<div class="ui doubling six column grid">
<div class="column" data-content="Adn"><i class="adn icon"></i></div>
<div class="column" data-content="Android"><i class="android icon"></i></div>
<div class="column" data-content="Apple"><i class="apple icon"></i></div>
<div class="column" data-content="Behance"><i class="behance icon"></i></div>
<div class="column" data-content="Behance Square"><i class="behance square icon"></i></div>
<div class="column" data-content="Bitbucket"><i class="bitbucket icon"></i></div>
<div class="column" data-content="Bitbucket Square"><i class="bitbucket square icon"></i></div>
<div class="column" data-content="Bitcoin"><i class="bitcoin icon"></i></div>
<div class="column" data-content="Codepen"><i class="codepen icon"></i></div>
<div class="column" data-content="Delicious"><i class="delicious icon"></i></div>
<div class="column" data-content="Deviantart"><i class="deviantart icon"></i></div>
<div class="column" data-content="Digg"><i class="digg icon"></i></div>
<div class="column" data-content="Dribbble"><i class="dribbble icon"></i></div>
<div class="column" data-content="Dropbox"><i class="dropbox icon"></i></div>
<div class="column" data-content="Drupal"><i class="drupal icon"></i></div>
<div class="column" data-content="Empire"><i class="empire icon"></i></div>
<div class="column" data-content="Facebook"><i class="facebook icon"></i></div>
<div class="column" data-content="Facebook Square"><i class="facebook square icon"></i></div>
<div class="column" data-content="Flickr"><i class="flickr icon"></i></div>
<div class="column" data-content="Foursquare"><i class="foursquare icon"></i></div>
<div class="column" data-content="Git"><i class="git icon"></i></div>
<div class="column" data-content="Git Square"><i class="git square icon"></i></div>
<div class="column" data-content="Github Alternate"><i class="github alternate icon"></i></div>
<div class="column" data-content="Github"><i class="github icon"></i></div>
<div class="column" data-content="Github Square"><i class="github square icon"></i></div>
<div class="column" data-content="Gittip"><i class="gittip icon"></i></div>
<div class="column" data-content="Google"><i class="google icon"></i></div>
<div class="column" data-content="Google Plus"><i class="google plus icon"></i></div>
<div class="column" data-content="Google Plus Square"><i class="google plus square icon"></i></div>
<div class="column" data-content="Hacker News"><i class="hacker news icon"></i></div>
<div class="column" data-content="Instagram"><i class="instagram icon"></i></div>
<div class="column" data-content="Joomla"><i class="joomla icon"></i></div>
<div class="column" data-content="Jsfiddle"><i class="jsfiddle icon"></i></div>
<div class="column" data-content="Linkedin"><i class="linkedin icon"></i></div>
<div class="column" data-content="Linkedin Square"><i class="linkedin square icon"></i></div>
<div class="column" data-content="Linux"><i class="linux icon"></i></div>
<div class="column" data-content="Maxcdn"><i class="maxcdn icon"></i></div>
<div class="column" data-content="Pagelines"><i class="pagelines icon"></i></div>
<div class="column" data-content="Pied Piper Alternate"><i class="pied piper alternate icon"></i></div>
<div class="column" data-content="Pied Piper"><i class="pied piper icon"></i></div>
<div class="column" data-content="Pinterest"><i class="pinterest icon"></i></div>
<div class="column" data-content="Pinterest Square"><i class="pinterest square icon"></i></div>
<div class="column" data-content="Qq"><i class="qq icon"></i></div>
<div class="column" data-content="Rebel"><i class="rebel icon"></i></div>
<div class="column" data-content="Reddit"><i class="reddit icon"></i></div>
<div class="column" data-content="Reddit Square"><i class="reddit square icon"></i></div>
<div class="column" data-content="Renren"><i class="renren icon"></i></div>
<div class="column" data-content="Skype"><i class="skype icon"></i></div>
<div class="column" data-content="Slack"><i class="slack icon"></i></div>
<div class="column" data-content="Soundcloud"><i class="soundcloud icon"></i></div>
<div class="column" data-content="Spotify"><i class="spotify icon"></i></div>
<div class="column" data-content="Stack Exchange"><i class="stack exchange icon"></i></div>
<div class="column" data-content="Stack Overflow"><i class="stack overflow icon"></i></div>
<div class="column" data-content="Steam"><i class="steam icon"></i></div>
<div class="column" data-content="Steam Square"><i class="steam square icon"></i></div>
<div class="column" data-content="StumbleUpon Circle"><i class="stumbleupon circle icon"></i></div>
<div class="column" data-content="StumbleUpon"><i class="stumbleupon icon"></i></div>
<div class="column" data-content="Tencent Weibo"><i class="tencent weibo icon"></i></div>
<div class="column" data-content="Trello"><i class="trello icon"></i></div>
<div class="column" data-content="Tumblr"><i class="tumblr icon"></i></div>
<div class="column" data-content="Tumblr Square"><i class="tumblr square icon"></i></div>
<div class="column" data-content="Twitter"><i class="twitter icon"></i></div>
<div class="column" data-content="Twitter Square"><i class="twitter square icon"></i></div>
<div class="column" data-content="Vimeo"><i class="vimeo icon"></i></div>
<div class="column" data-content="Vine"><i class="vine icon"></i></div>
<div class="column" data-content="Vk"><i class="vk icon"></i></div>
<div class="column" data-content="Wechat"><i class="wechat icon"></i></div>
<div class="column" data-content="Weibo"><i class="weibo icon"></i></div>
<div class="column" data-content="Windows"><i class="windows icon"></i></div>
<div class="column" data-content="Wordpress"><i class="wordpress icon"></i></div>
<div class="column" data-content="Xing"><i class="xing icon"></i></div>
<div class="column" data-content="Xing Square"><i class="xing square icon"></i></div>
<div class="column" data-content="Yahoo"><i class="yahoo icon"></i></div>
<div class="column" data-content="YouTube"><i class="youtube icon"></i></div>
<div class="column" data-content="YouTube Play"><i class="youtube play icon"></i></div>
<div class="column" data-content="YouTube Square"><i class="youtube square icon"></i></div>
</div>
<div class="existing code">
<i class="adn icon"></i>
<i class="android icon"></i>
<i class="apple icon"></i>
<i class="behance icon"></i>
<i class="behance square icon"></i>
<i class="bitbucket icon"></i>
<i class="bitbucket square icon"></i>
<i class="bitcoin icon"></i>
<i class="codepen icon"></i>
<i class="delicious icon"></i>
<i class="deviantart icon"></i>
<i class="digg icon"></i>
<i class="dribbble icon"></i>
<i class="dropbox icon"></i>
<i class="drupal icon"></i>
<i class="empire icon"></i>
<i class="facebook icon"></i>
<i class="facebook square icon"></i>
<i class="flickr icon"></i>
<i class="foursquare icon"></i>
<i class="git icon"></i>
<i class="git square icon"></i>
<i class="github alternate icon"></i>
<i class="github icon"></i>
<i class="github square icon"></i>
<i class="gittip icon"></i>
<i class="google icon"></i>
<i class="google plus icon"></i>
<i class="google plus square icon"></i>
<i class="hacker news icon"></i>
<i class="instagram icon"></i>
<i class="joomla icon"></i>
<i class="jsfiddle icon"></i>
<i class="linkedin icon"></i>
<i class="linkedin square icon"></i>
<i class="linux icon"></i>
<i class="maxcdn icon"></i>
<i class="pagelines icon"></i>
<i class="pied piper alternate icon"></i>
<i class="pied piper icon"></i>
<i class="pinterest icon"></i>
<i class="pinterest square icon"></i>
<i class="qq icon"></i>
<i class="rebel icon"></i>
<i class="reddit icon"></i>
<i class="reddit square icon"></i>
<i class="renren icon"></i>
<i class="skype icon"></i>
<i class="slack icon"></i>
<i class="soundcloud icon"></i>
<i class="spotify icon"></i>
<i class="stack exchange icon"></i>
<i class="stack overflow icon"></i>
<i class="steam icon"></i>
<i class="steam square icon"></i>
<i class="stumbleupon circle icon"></i>
<i class="stumbleupon icon"></i>
<i class="tencent weibo icon"></i>
<i class="trello icon"></i>
<i class="tumblr icon"></i>
<i class="tumblr square icon"></i>
<i class="twitter icon"></i>
<i class="twitter square icon"></i>
<i class="vimeo icon"></i>
<i class="vine icon"></i>
<i class="vk icon"></i>
<i class="wechat icon"></i>
<i class="weibo icon"></i>
<i class="windows icon"></i>
<i class="wordpress icon"></i>
<i class="xing icon"></i>
<i class="xing square icon"></i>
<i class="yahoo icon"></i>
<i class="youtube icon"></i>
<i class="youtube play icon"></i>
<i class="youtube square icon"></i>
</div>
</div>
</div>
<div class="ui tab" data-tab="definition">
<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>
<div class="example">
<h4 class="ui header">Loading</h4>
<p>An icon can be used as a simple loader</p>
<i class="spinner loading icon"></i>
<i class="notched circle loading icon"></i>
<i class="asterisk loading 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 home icon"></i>
<br>
<i class="home icon"></i>
<br>
<i class="large home icon"></i>
<br>
<i class="big home icon"></i>
<br>
<i class="huge home icon"></i>
<br>
<i class="massive home 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 icon"></i>
<i class="help icon link icon"></i>
</div>
<div class="example">
<h4 class="ui header">Flipped</h4>
<p>An icon can be flipped</p>
<i class="horizontally flipped cloud icon"></i>
<i class="vertically flipped cloud icon"></i>
</div>
<div class="example">
<h4 class="ui header">Rotated</h4>
<p>An icon can be rotated</p>
<i class="clockwise rotated cloud icon"></i>
<i class="counterclockwise rotated cloud icon"></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>
<i class="circular teal users icon"></i>
<i class="circular inverted users icon"></i>
<i class="circular inverted teal users icon"></i>
</div>
<div class="example">
<h4 class="ui header">Bordered</h4>
<div class="ui info message">
In <code>0.x.x</code> bordered was formally known as <code>squared</code>
</div>
<p>An icon can be formatted to appear bordered</p>
<i class="bordered users icon"></i>
<i class="bordered teal users icon"></i>
<i class="bordered inverted black users icon"></i>
<i class="bordered inverted teal 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 users icon"></i>
<i class="green 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 users icon"></i>
<i class="inverted green user icon"></i>
<i class="inverted purple chat icon"></i>
<i class="inverted teal comment icon"></i>
</div>
</div>
</div>