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