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'title : 'Icon'description : 'An icon is a glyph used to represent another concept more simply'type : 'UI Element'---
<%- @partial('header') %><script src="/javascript/icon.js"></script>
<div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">States</a> <a class="item">Variations</a> </div> </div>
<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 "i" which allow for an abbreviated markup when sitting along-side text. </div>
<div class="ui top attached tabular menu"> <a class="active item" data-tab="standard">Standard</a> <a class="item" data-tab="basic">Basic</a> </div>
<div class="ui bottom attached active tab segment" data-tab="standard"> <h3 class="ui header">Standard Icon Set</h3>
<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">Content</h4> <p>Icons can represent types of web content</p> <div class="ui eight column grid"> <div class="column"><i class="archive icon"></i>Archive</div> <div class="column"><i class="attachment icon"></i>Attachment</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="cart icon"></i>Cart</div> <div class="column"><i class="certificate icon"></i>Certificate</div> <div class="column"><i class="chat icon"></i>Chat</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="dashboard icon"></i>Dashboard</div> <div class="column"><i class="desktop icon"></i>Desktop</div> <div class="column"><i class="empty calendar icon"></i>Empty Calendar</div> <div class="column"><i class="external url icon"></i>External URL</div> <div class="column"><i class="external url sign icon"></i>External URL Sign</div> <div class="column"><i class="file icon"></i>File</div> <div class="column"><i class="file outline icon"></i>File Outline</div> <div class="column"><i class="folder icon"></i>Folder</div> <div class="column"><i class="folder open icon"></i>Open Folder</div> <div class="column"><i class="folder open outline icon"></i>Open Folder Outline</div> <div class="column"><i class="folder outline icon"></i>Folder Outline</div> <div class="column"><i class="help icon"></i>Help</div> <div class="column"><i class="home icon"></i>Home</div> <div class="column"><i class="inbox icon"></i>Inbox</div> <div class="column"><i class="info icon"></i>Info</div> <div class="column"><i class="info letter icon"></i>Info Letter</div> <div class="column"><i class="legal icon"></i>Legal</div> <div class="column"><i class="location arrow icon"></i>Location</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="map icon"></i>Map</div> <div class="column"><i class="map marker icon"></i>Map Marker</div> <div class="column"><i class="mobile icon"></i>Mobile</div> <div class="column"><i class="music icon"></i>Music</div> <div class="column"><i class="outline chat icon"></i>Chat Outline</div> <div class="column"><i class="outline comment icon"></i>Comment Outline</div> <div class="column"><i class="payment icon"></i>Payment</div> <div class="column"><i class="photo icon"></i>Photo</div> <div class="column"><i class="qr code icon"></i>QR Code</div> <div class="column"><i class="question icon"></i>Question</div> <div class="column"><i class="rss icon"></i>RSS</div> <div class="column"><i class="rss sign icon"></i>RSS Sign</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="signal icon"></i>Signal</div> <div class="column"><i class="sitemap icon"></i>Sitemap</div> <div class="column"><i class="table icon"></i>Table</div> <div class="column"><i class="tablet icon"></i>Tablet</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="text file icon"></i>Text File</div> <div class="column"><i class="text file outline icon"></i>Text File Outline</div> <div class="column"><i class="time icon"></i>Time</div> <div class="column"><i class="trash icon"></i>Trash</div> <div class="column"><i class="url icon"></i>URL</div> <div class="column"><i class="user icon"></i>User</div> <div class="column"><i class="users icon"></i>Users</div> <div class="column"><i class="video icon"></i>Video</div> </div> <div class="existing code"> <i class="archive icon"></i> <i class="attachment icon"></i> <i class="browser icon"></i> <i class="bug icon"></i> <i class="calendar icon"></i> <i class="cart icon"></i> <i class="certificate icon"></i> <i class="chat icon"></i> <i class="cloud icon"></i> <i class="code icon"></i> <i class="comment icon"></i> <i class="dashboard icon"></i> <i class="desktop icon"></i> <i class="empty calendar icon"></i> <i class="external url icon"></i> <i class="external url sign icon"></i> <i class="file icon"></i> <i class="file 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="help icon"></i> <i class="home icon"></i> <i class="inbox icon"></i> <i class="info icon"></i> <i class="info letter icon"></i> <i class="legal icon"></i> <i class="location arrow icon"></i> <i class="mail icon"></i> <i class="mail outline icon"></i> <i class="map icon"></i> <i class="map marker icon"></i> <i class="mobile icon"></i> <i class="music icon"></i> <i class="outline chat icon"></i> <i class="outline comment icon"></i> <i class="payment icon"></i> <i class="photo icon"></i> <i class="qr code icon"></i> <i class="question icon"></i> <i class="rss icon"></i> <i class="rss sign icon"></i> <i class="setting icon"></i> <i class="settings icon"></i> <i class="signal icon"></i> <i class="sitemap icon"></i> <i class="table icon"></i> <i class="tablet icon"></i> <i class="tag icon"></i> <i class="tags icon"></i> <i class="tasks icon"></i> <i class="terminal icon"></i> <i class="text file icon"></i> <i class="text file outline icon"></i> <i class="time icon"></i> <i class="trash icon"></i> <i class="url icon"></i> <i class="user icon"></i> <i class="users icon"></i> <i class="video icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">User Actions</h4> <p>Icons can represent a possible user action</p> <div class="ui eight column grid"> <div class="column"><i class="add icon"></i>Add</div> <div class="column"><i class="add sign icon"></i>Add Sign</div> <div class="column"><i class="add sign box icon"></i>Add Sign Box</div> <div class="column"><i class="adjust icon"></i>Adjust</div> <div class="column"><i class="bookmark empty icon"></i>Empty Bookmark</div> <div class="column"><i class="bookmark icon"></i>Bookmark</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="collapse icon"></i>Collapse</div> <div class="column"><i class="crop icon"></i>Crop</div> <div class="column"><i class="download disk icon"></i>Download Disk</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="edit sign icon"></i>Edit sign</div> <div class="column"><i class="empty flag icon"></i>Empty Flag</div> <div class="column"><i class="exchange icon"></i>Exchange</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="fork code icon"></i>Fork Code</div> <div class="column"><i class="forward mail icon"></i>Forward</div> <div class="column"><i class="fullscreen icon"></i>Fullscreen</div> <div class="column"><i class="hide icon"></i>Hide</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="off icon"></i>Off</div> <div class="column"><i class="refresh icon"></i>Refresh</div> <div class="column"><i class="remove circle icon"></i>Remove Circle</div> <div class="column"><i class="remove icon"></i>Remove</div> <div class="column"><i class="remove sign icon"></i>Remove Sign</div> <div class="column"><i class="reorder icon"></i>Reorder</div> <div class="column"><i class="reply all mail icon"></i>Reply All</div> <div class="column"><i class="reply mail icon"></i>Reply</div> <div class="column"><i class="retweet icon"></i>Retweet</div> <div class="column"><i class="save icon"></i>Save</div> <div class="column"><i class="screenshot icon"></i>Screenshot</div> <div class="column"><i class="search icon"></i>Search</div> <div class="column"><i class="share icon"></i>Share</div> <div class="column"><i class="share sign icon"></i>Share Sign</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="tint icon"></i>Tint</div> <div class="column"><i class="unhide icon"></i>Unhide</div> <div class="column"><i class="upload disk icon"></i>Upload Disk</div> <div class="column"><i class="upload icon"></i>Upload</div> </div> <div class="existing code"> <i class="add icon"></i> <i class="add sign box icon"></i> <i class="add sign icon"></i> <i class="adjust icon"></i> <i class="bookmark empty icon"></i> <i class="bookmark icon"></i> <i class="cloud download icon"></i> <i class="cloud upload icon"></i> <i class="collapse icon"></i> <i class="crop icon"></i> <i class="download disk icon"></i> <i class="download icon"></i> <i class="edit icon"></i> <i class="edit sign icon"></i> <i class="empty flag icon"></i> <i class="exchange icon"></i> <i class="expand icon"></i> <i class="filter icon"></i> <i class="flag icon"></i> <i class="fork code icon"></i> <i class="forward mail icon"></i> <i class="fullscreen icon"></i> <i class="hide icon"></i> <i class="level down icon"></i> <i class="level up icon"></i> <i class="off icon"></i> <i class="refresh icon"></i> <i class="remove circle icon"></i> <i class="remove icon"></i> <i class="remove sign icon"></i> <i class="reorder icon"></i> <i class="reply all mail icon"></i> <i class="reply mail icon"></i> <i class="retweet icon"></i> <i class="save icon"></i> <i class="screenshot icon"></i> <i class="search icon"></i> <i class="share icon"></i> <i class="share sign icon"></i> <i class="sign in icon"></i> <i class="sign out icon"></i> <i class="tint icon"></i> <i class="unhide icon"></i> <i class="upload disk icon"></i> <i class="upload icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">View Actions</h4> <p>Icons can represent actions that modify a page view</p> <div class="ui eight column grid"> <div class="column"><i class="block layout icon"></i>Block Layout</div> <div class="column"><i class="column layout icon"></i>Column Layout</div> <div class="column"><i class="grid layout icon"></i>Grid</div> <div class="column"><i class="list layout icon"></i>List Layout</div> <div class="column"><i class="resize full icon"></i>Resize Full</div> <div class="column"><i class="resize horizontal icon"></i>Resize Horizontal</div> <div class="column"><i class="resize small icon"></i>Resize Small</div> <div class="column"><i class="resize vertical icon"></i>Resize Vertical</div> <div class="column"><i class="sort alphabet descending icon"></i>Sort Alphabet Descending</div> <div class="column"><i class="sort alphabet icon"></i>Sort Alphabet Ascending</div> <div class="column"><i class="sort ascending icon"></i>Sort Ascending</div> <div class="column"><i class="sort attributes descending icon"></i>Sort Attributes Descending</div> <div class="column"><i class="sort attributes icon"></i>Sort Attributes Ascending</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 order descending icon"></i>Sort Order Descending</div> <div class="column"><i class="sort order icon"></i>Sort Order Ascending</div> <div class="column"><i class="zoom in icon"></i>Zoom In</div> <div class="column"><i class="zoom out icon"></i>Zoom Out</div> </div> <div class="existing code"> <i class="block layout icon"></i> <i class="column layout icon"></i> <i class="grid layout icon"></i> <i class="list layout icon"></i> <i class="resize full icon"></i> <i class="resize horizontal icon"></i> <i class="resize small icon"></i> <i class="resize vertical icon"></i> <i class="sort alphabet descending icon"></i> <i class="sort alphabet icon"></i> <i class="sort ascending icon"></i> <i class="sort attributes descending icon"></i> <i class="sort attributes icon"></i> <i class="sort descending icon"></i> <i class="sort icon"></i> <i class="sort order descending icon"></i> <i class="sort order icon"></i> <i class="zoom in icon"></i> <i class="zoom out icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Text Actions</h4> <p>Icons can represent actions that modify text</p> <div class="ui 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="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="ellipsis horizontal icon"></i>Ellipsis Horizontal</div> <div class="column"><i class="ellipsis vertical icon"></i>Ellipsis Vertical</div> <div class="column"><i class="font icon"></i>Font</div> <div class="column"><i class="indent left icon"></i>Indent Left</div> <div class="column"><i class="indent right icon"></i>Indent Right</div> <div class="column"><i class="italic icon"></i>Italic</div> <div class="column"><i class="list icon"></i>List</div> <div class="column"><i class="move icon"></i>Move</div> <div class="column"><i class="ordered list icon"></i>Ordered List</div> <div class="column"><i class="paste icon"></i>Paste</div> <div class="column"><i class="print icon"></i>Print</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="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="undo icon"></i>Undo</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="bold icon"></i> <i class="copy icon"></i> <i class="cut icon"></i> <i class="ellipsis horizontal icon"></i> <i class="ellipsis vertical icon"></i> <i class="font icon"></i> <i class="indent left icon"></i> <i class="indent right icon"></i> <i class="italic icon"></i> <i class="list icon"></i> <i class="move icon"></i> <i class="ordered list icon"></i> <i class="paste icon"></i> <i class="print icon"></i> <i class="quote left icon"></i> <i class="quote right 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="undo icon"></i> <i class="unlink icon"></i> <i class="unordered list icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Media Actions</h4> <p>Icons can represent actions that occur on media</p> <div class="ui 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="mute icon"></i>Mute</div> <div class="column"><i class="pause icon"></i>Pause</div> <div class="column"><i class="play circle icon"></i>Play Circle</div> <div class="column"><i class="play icon"></i>Play</div> <div class="column"><i class="play sign icon"></i>Play Sign</div> <div class="column"><i class="shuffle icon"></i>Shuffle</div> <div class="column"><i class="repeat icon"></i>Repeat</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="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="mute icon"></i> <i class="pause icon"></i> <i class="play circle icon"></i> <i class="play icon"></i> <i class="play sign icon"></i> <i class="shuffle icon"></i> <i class="repeat 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="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">Objects</h4> <p>Icons can represent literal objects</p> <div class="ui eight column grid"> <div class="column"><i class="ambulance icon"></i>Ambulance</div> <div class="column"><i class="anchor icon"></i>Anchor</div> <div class="column"><i class="barcode icon"></i>Barcode</div> <div class="column"><i class="lab icon"></i>Lab</div> <div class="column"><i class="beer icon"></i>Beer</div> <div class="column"><i class="bell outline icon"></i>Bell Outline</div> <div class="column"><i class="bolt icon"></i>Bolt</div> <div class="column"><i class="book icon"></i>Book</div> <div class="column"><i class="briefcase icon"></i>Briefcase</div> <div class="column"><i class="building icon"></i>Building</div> <div class="column"><i class="bullhorn icon"></i>Bullhorn</div> <div class="column"><i class="bullseye icon"></i>Bullseye</div> <div class="column"><i class="camera icon"></i>Camera</div> <div class="column"><i class="camera retro icon"></i>Camera retro</div> <div class="column"><i class="coffee icon"></i>Coffee</div> <div class="column"><i class="doctor icon"></i>Doctor</div> <div class="column"><i class="eraser icon"></i>Eraser</div> <div class="column"><i class="female icon"></i>Female</div> <div class="column"><i class="fighter jet icon"></i>Fighter Jet</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="flag checkered icon"></i>Checkered Flag</div> <div class="column"><i class="food icon"></i>Food</div> <div class="column"><i class="gamepad icon"></i>Gamepad</div> <div class="column"><i class="gift icon"></i>Gift</div> <div class="column"><i class="glass icon"></i>Glass</div> <div class="column"><i class="globe icon"></i>Globe</div> <div class="column"><i class="hdd icon"></i>HDD</div> <div class="column"><i class="headphones icon"></i>Headphones</div> <div class="column"><i class="hospital icon"></i>Hospital</div> <div class="column"><i class="key icon"></i>Key</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="leaf icon"></i>Leaf</div> <div class="column"><i class="lemon icon"></i>Lemon</div> <div class="column"><i class="lightbulb icon"></i>Lightbulb</div> <div class="column"><i class="magic icon"></i>Magic</div> <div class="column"><i class="magnet icon"></i>Magnet</div> <div class="column"><i class="male icon"></i>Male</div> <div class="column"><i class="medkit icon"></i>Medkit</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="pencil icon"></i>Pencil</div> <div class="column"><i class="phone icon"></i>Phone</div> <div class="column"><i class="phone sign icon"></i>Phone Sign</div> <div class="column"><i class="pin icon"></i>Pin</div> <div class="column"><i class="plane icon"></i>Plane</div> <div class="column"><i class="puzzle piece icon"></i>Puzzle Piece</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="shield icon"></i>Shield</div> <div class="column"><i class="stethoscope icon"></i>Stethoscope</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="ticket icon"></i>Ticket</div> <div class="column"><i class="trophy icon"></i>Trophy</div> <div class="column"><i class="truck icon"></i>Truck</div> <div class="column"><i class="umbrella icon"></i>Umbrella</div> <div class="column"><i class="wrench icon"></i>Wrench</div> </div> <div class="existing code"> <i class="ambulance icon"></i> <i class="anchor icon"></i> <i class="barcode icon"></i> <i class="lab icon"></i> <i class="beer icon"></i> <i class="bell outline icon"></i> <i class="bolt icon"></i> <i class="book icon"></i> <i class="briefcase icon"></i> <i class="building icon"></i> <i class="bullhorn icon"></i> <i class="bullseye icon"></i> <i class="camera icon"></i> <i class="camera retro icon"></i> <i class="coffee icon"></i> <i class="doctor icon"></i> <i class="eraser icon"></i> <i class="female icon"></i> <i class="fighter jet icon"></i> <i class="fire extinguisher icon"></i> <i class="fire icon"></i> <i class="flag checkered icon"></i> <i class="food icon"></i> <i class="gamepad icon"></i> <i class="gift icon"></i> <i class="glass icon"></i> <i class="globe icon"></i> <i class="hdd icon"></i> <i class="headphones icon"></i> <i class="hospital icon"></i> <i class="key icon"></i> <i class="keyboard icon"></i> <i class="laptop icon"></i> <i class="leaf icon"></i> <i class="lemon icon"></i> <i class="lightbulb icon"></i> <i class="magic icon"></i> <i class="magnet icon"></i> <i class="male icon"></i> <i class="medkit icon"></i> <i class="money icon"></i> <i class="moon icon"></i> <i class="pencil icon"></i> <i class="phone icon"></i> <i class="phone sign icon"></i> <i class="pin icon"></i> <i class="plane icon"></i> <i class="puzzle piece icon"></i> <i class="road icon"></i> <i class="rocket icon"></i> <i class="shield icon"></i> <i class="stethoscope icon"></i> <i class="suitcase icon"></i> <i class="sun icon"></i> <i class="ticket icon"></i> <i class="trophy icon"></i> <i class="truck icon"></i> <i class="umbrella icon"></i> <i class="wrench icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Status Indication</h4> <p>Icons can indicate the status of something</p> <div class="ui eight column grid"> <div class="column"><i class="ban circle icon"></i>Ban Circle</div> <div class="column"><i class="checkmark icon"></i>Checkmark</div> <div class="column"><i class="checkmark sign icon"></i>Checkmark Sign</div> <div class="column"><i class="minus checkbox icon"></i>Minus Checkbox</div> <div class="column"><i class="empty checkbox icon"></i>Empty Checkbox</div> <div class="column"><i class="checked checkbox icon"></i>Checked Checkbox</div> <div class="column"><i class="exclamation icon"></i>Exclamation</div> <div class="column"><i class="attention icon"></i>attention</div> <div class="column"><i class="frown icon"></i>Frown</div> <div class="column"><i class="heart empty icon"></i>Heart Empty</div> <div class="column"><i class="heart icon"></i>Heart</div> <div class="column"><i class="loading icon"></i>Loading</div> <div class="column"><i class="lock icon"></i>Lock</div> <div class="column"><i class="meh icon"></i>Meh</div> <div class="column"><i class="ok circle icon"></i>OK Circle</div> <div class="column"><i class="ok sign icon"></i>OK Sign</div> <div class="column"><i class="smile icon"></i>Smile</div> <div class="column"><i class="star empty icon"></i>Empty Star</div> <div class="column"><i class="star half empty icon"></i>Half Empty Star</div> <div class="column"><i class="star half icon"></i>Half Star</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 down outline icon"></i>Thumbs Down Outline</div> <div class="column"><i class="thumbs up icon"></i>Thumbs Up</div> <div class="column"><i class="thumbs up outline icon"></i>Thumbs Up Outline</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="warning icon"></i>Warning</div> </div> <div class="existing code"> <i class="ban circle icon"></i> <i class="checkmark icon"></i> <i class="minus checkmark icon"></i> <i class="checkmark sign icon"></i> <i class="empty checkbox icon"></i> <i class="checked checkbox icon"></i> <i class="exclamation icon"></i> <i class="exclamation sign icon"></i> <i class="frown icon"></i> <i class="heart empty icon"></i> <i class="heart icon"></i> <i class="loading icon"></i> <i class="lock icon"></i> <i class="meh icon"></i> <i class="ok circle icon"></i> <i class="ok icon"></i> <i class="ok sign icon"></i> <i class="smile icon"></i> <i class="star empty 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 down outline icon"></i> <i class="thumbs up icon"></i> <i class="thumbs up outline icon"></i> <i class="unlock alternate icon"></i> <i class="unlock icon"></i> <i class="warning icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Symbols</h4> <p>Icons can represent common symbols</p> <div class="ui eight column grid"> <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 box down icon"></i>Arrow Box Down</div> <div class="column"><i class="arrow box right icon"></i>Arrow Box Right</div> <div class="column"><i class="arrow box up icon"></i>Arrow Box Up</div> <div class="column"><i class="down icon"></i>Down</div> <div class="column"><i class="left icon"></i>Left</div> <div class="column"><i class="right icon"></i>Right</div> <div class="column"><i class="up icon"></i>Up</div> <div class="column"><i class="asterisk icon"></i>Asterisk</div> <div class="column"><i class="triangle down icon"></i>Triangle Down</div> <div class="column"><i class="triangle left icon"></i>Triangle Left</div> <div class="column"><i class="triangle right icon"></i>Triangle Right</div> <div class="column"><i class="triangle up icon"></i>Triangle Up</div> <div class="column"><i class="arrow down icon"></i>Down Arrow</div> <div class="column"><i class="arrow left icon"></i>Left Arrow</div> <div class="column"><i class="arrow right icon"></i>Right Arrow</div> <div class="column"><i class="arrow up icon"></i>Up Arrow</div> <div class="column"><i class="arrow sign down icon"></i>Arrow Sign Down</div> <div class="column"><i class="arrow sign left icon"></i>Arrow Sign Left</div> <div class="column"><i class="arrow sign right icon"></i>Arrow Sign Right</div> <div class="column"><i class="arrow sign up icon"></i>Arrow Sign Up</div> <div class="column"><i class="circle left icon"></i>Circle Arrow Left</div> <div class="column"><i class="circle right icon"></i>Circle Arrow Right</div> <div class="column"><i class="circle up icon"></i>Circle Arrow Up</div> <div class="column"><i class="circle down icon"></i>Circle Down Arrow</div> <div class="column"><i class="circle blank icon"></i>Circle Blank</div> <div class="column"><i class="circle icon"></i>Circle</div> <div class="column"><i class="double angle down icon"></i>Double Angle Down</div> <div class="column"><i class="double angle left icon"></i>Double Angle Left</div> <div class="column"><i class="double angle right icon"></i>Double angle Right</div> <div class="column"><i class="double angle up icon"></i>Double Angle Up</div> <div class="column"><i class="hand down icon"></i>Hand Down</div> <div class="column"><i class="hand left icon"></i>Hand Left</div> <div class="column"><i class="hand right icon"></i>Hand Right</div> <div class="column"><i class="hand up icon"></i>Hand 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="minus icon"></i>Minus</div> <div class="column"><i class="minus sign alternate icon"></i>Minus Sign Alternate</div> <div class="column"><i class="minus sign icon"></i>Minus sign</div> <div class="column"><i class="sign icon"></i>Sign</div> </div> <div class="existing code"> <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 box down icon"></i> <i class="arrow box right icon"></i> <i class="arrow box 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="asterisk icon"></i> <i class="triangle down icon"></i> <i class="triangle left icon"></i> <i class="triangle right icon"></i> <i class="triangle 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="arrow sign down icon"></i> <i class="arrow sign left icon"></i> <i class="arrow sign right icon"></i> <i class="arrow sign up icon"></i> <i class="arrow up icon"></i> <i class="circle arrow left icon"></i> <i class="circle arrow right icon"></i> <i class="circle arrow up icon"></i> <i class="circle blank icon"></i> <i class="circle down arrow icon"></i> <i class="circle icon"></i> <i class="double angle down icon"></i> <i class="double angle left icon"></i> <i class="double angle right icon"></i> <i class="double angle up icon"></i> <i class="hand down icon"></i> <i class="hand left icon"></i> <i class="hand right icon"></i> <i class="hand 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="minus icon"></i> <i class="minus sign alternate icon"></i> <i class="minus sign icon"></i> <i class="sign 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 eight column grid"> <div class="column"><i class="dollar icon"></i>US Dollar</div> <div class="column"><i class="euro icon"></i>Euro</div> <div class="column"><i class="pound icon"></i>British Pound</div> <div class="column"><i class="rupee icon"></i>Rupee</div> <div class="column"><i class="won icon"></i>Korean Won</div> <div class="column"><i class="yen icon"></i>Japanese Yen</div> <div class="column"><i class="yuan icon"></i>Chinese Yuan</div> </div> <div class="existing code"> <i class="dollar icon"></i> <i class="euro icon"></i> <i class="pound icon"></i> <i class="rupee icon"></i> <i class="won icon"></i> <i class="yen icon"></i> <i class="yuan 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 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="bitbucket icon"></i>Bitbucket</div> <div class="column"><i class="bitbucket sign icon"></i>Bitbucket Sign</div> <div class="column"><i class="bitcoin icon"></i>Bitcoin</div> <div class="column"><i class="css3 icon"></i>CSS3</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="facebook icon"></i>Facebook</div> <div class="column"><i class="facebook sign icon"></i>Facebook Sign</div> <div class="column"><i class="facetime video icon"></i>Facetime Video</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="github alternate icon"></i>Github Alternate</div> <div class="column"><i class="github icon"></i>Github</div> <div class="column"><i class="github sign icon"></i>Github Sign</div> <div class="column"><i class="gittip icon"></i>Gittip</div> <div class="column"><i class="google plus icon"></i>Google Plus</div> <div class="column"><i class="google plus sign icon"></i>Google Plus Sign</div> <div class="column"><i class="h sign icon"></i>H Sign</div> <div class="column"><i class="html5 icon"></i>HTML5</div> <div class="column"><i class="instagram icon"></i>Instagram</div> <div class="column"><i class="linkedin icon"></i>Linkedin</div> <div class="column"><i class="linkedin sign icon"></i>Linkedin Sign</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="pinterest icon"></i>Pinterest</div> <div class="column"><i class="pinterest sign icon"></i>Pinterest Sign</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="stackexchange icon"></i>Stackexchange</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 sign icon"></i>Tumblr Sign</div> <div class="column"><i class="twitter icon"></i>Twitter</div> <div class="column"><i class="twitter sign icon"></i>Twitter Sign</div> <div class="column"><i class="vk icon"></i>Vk</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="xing icon"></i>Xing</div> <div class="column"><i class="xing sign icon"></i>Xing Sign</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 sign icon"></i>YouTube Sign</div> </div> <div class="existing code"> <i class="adn icon"></i> <i class="android icon"></i> <i class="apple icon"></i> <i class="bitbucket icon"></i> <i class="bitbucket sign icon"></i> <i class="bitcoin icon"></i> <i class="css3 icon"></i> <i class="dribbble icon"></i> <i class="dropbox icon"></i> <i class="facebook icon"></i> <i class="facebook sign icon"></i> <i class="facetime video icon"></i> <i class="flickr icon"></i> <i class="foursquare icon"></i> <i class="github alternate icon"></i> <i class="github icon"></i> <i class="github sign icon"></i> <i class="gittip icon"></i> <i class="google plus icon"></i> <i class="google plus sign icon"></i> <i class="h sign icon"></i> <i class="html5 icon"></i> <i class="instagram icon"></i> <i class="linkedin icon"></i> <i class="linkedin sign icon"></i> <i class="linux icon"></i> <i class="maxcdn icon"></i> <i class="pinterest icon"></i> <i class="pinterest sign icon"></i> <i class="renren icon"></i> <i class="skype icon"></i> <i class="stackexchange icon"></i> <i class="trello icon"></i> <i class="tumblr icon"></i> <i class="tumblr sign icon"></i> <i class="twitter icon"></i> <i class="twitter sign icon"></i> <i class="vk icon"></i> <i class="weibo icon"></i> <i class="windows icon"></i> <i class="xing icon"></i> <i class="xing sign icon"></i> <i class="youtube icon"></i> <i class="youtube play icon"></i> <i class="youtube sign icon"></i> </div> </div> </div>
<div class="ui bottom attached tab segment" data-tab="basic">
<h3 class="ui header">Custom Icon Set</h3> <div class="ui ignored info message"> <p>This icon set was built using a custom combination of fonts using the amazing web tool <a href="http://fontello.com/">Fontello</a>, to only include the most frequently used icons for websites. The filesize for the basic icon set is <b>about 50% smaller</b> than the standard icon set.</p> </div> <div class="ui ignored warning message"> <p>Basic.icons uses a sub-class <code>i.basic.icon</code> so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.</p> </div>
<div class="icon example"> <h4 class="ui header">Content</h4> <p>Icons can represent typical web content</p> <div class="ui eight column grid"> <div class="column"><i class="attachment basic icon"></i> Attachment</div> <div class="column"><i class="barcode basic icon"></i> Barcode</div> <div class="column"><i class="bookmark basic icon"></i> Bookmark</div> <div class="column"><i class="cart basic icon"></i> Cart</div> <div class="column"><i class="chart basic icon"></i> Chart</div> <div class="column"><i class="bar chart basic icon"></i> Bar Chart</div> <div class="column"><i class="pie chart basic icon"></i> Pie Chart</div> <div class="column"><i class="date basic icon"></i> Date</div> <div class="column"><i class="doc basic icon"></i> Doc</div> <div class="column"><i class="docs basic icon"></i> Docs</div> <div class="column"><i class="email basic icon"></i> Email</div> <div class="column"><i class="folder basic icon"></i> Folder</div> <div class="column"><i class="open folder basic icon"></i> Open Folder</div> <div class="column"><i class="home basic icon"></i> Home</div> <div class="column"><i class="mail basic icon"></i> Mail</div> <div class="column"><i class="photo basic icon"></i> Photo</div> <div class="column"><i class="photos basic icon"></i> Photos</div> <div class="column"><i class="search basic icon"></i> Search</div> <div class="column"><i class="setting basic icon"></i> Setting</div> <div class="column"><i class="settings basic icon"></i> Settings</div> <div class="column"><i class="tag basic icon"></i> Tag</div> <div class="column"><i class="tags basic icon"></i> Tags</div> <div class="column"><i class="time basic icon"></i> Time</div> <div class="column"><i class="top list basic icon"></i> Top List</div> <div class="column"><i class="trash basic icon"></i> Trash</div> <div class="column"><i class="community basic icon"></i> Community</div> <div class="column"><i class="url basic icon"></i> URL</div> <div class="column"><i class="user basic icon"></i> User</div> <div class="column"><i class="users basic icon"></i> Users</div> <div class="column"><i class="chat basic icon"></i> Chat</div> </div> <div class="existing code"> <i class="attachment basic icon"></i> <i class="barcode basic icon"></i> <i class="bookmark basic icon"></i> <i class="cart basic icon"></i> <i class="chart basic icon"></i> <i class="bar chart basic icon"></i> <i class="pie chart basic icon"></i> <i class="date basic icon"></i> <i class="doc basic icon"></i> <i class="docs basic icon"></i> <i class="email basic icon"></i> <i class="folder basic icon"></i> <i class="open folder basic icon"></i> <i class="home basic icon"></i> <i class="mail basic icon"></i> <i class="photo basic icon"></i> <i class="photos basic icon"></i> <i class="search basic icon"></i> <i class="setting basic icon"></i> <i class="settings basic icon"></i> <i class="tag basic icon"></i> <i class="tags basic icon"></i> <i class="time basic icon"></i> <i class="top list basic icon"></i> <i class="trash basic icon"></i> <i class="community basic icon"></i> <i class="url basic icon"></i> <i class="user basic icon"></i> <i class="users basic icon"></i> <i class="chat basic icon"></i> </div> </div> <div class="icon example"> <h4 class="ui header">Special Content</h4> <p>Icons can represent special types of web content</p> <div class="ui eight column grid"> <div class="column"><i class="trophy basic icon"></i> Trophy</div> <div class="column"><i class="cloud basic icon"></i> Cloud</div> <div class="column"><i class="flight basic icon"></i> Flight</div> <div class="column"><i class="gift basic icon"></i> Gift</div> <div class="column"><i class="dollar basic icon"></i> Dollar</div> <div class="column"><i class="lab basic icon"></i> Lab</div> <div class="column"><i class="rss basic icon"></i> RSS</div> </div> <div class="existing code"> <i class="trophy basic icon"></i> <i class="cloud basic icon"></i> <i class="flight basic icon"></i> <i class="gift basic icon"></i> <i class="dollar basic icon"></i> <i class="lab basic icon"></i> <i class="rss basic icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">User Actions</h4> <p>Icons can represent a possible user action</p> <div class="ui eight column grid"> <div class="column"><i class="add user basic icon"></i> Add User</div> <div class="column"><i class="block basic icon"></i> Block</div> <div class="column"><i class="hide basic icon"></i> Hide</div> <div class="column"><i class="unhide basic icon"></i> Unhide</div> <div class="column"><i class="lock basic icon"></i> Lock</div> <div class="column"><i class="unlock basic icon"></i> Unlock</div> <div class="column"><i class="flag basic icon"></i> Flag</div> <div class="column"><i class="cancel basic icon"></i> Cancel</div> <div class="column"><i class="close basic icon"></i> Close</div> <div class="column"><i class="close basic icon"></i> Delete</div> <div class="column"><i class="check basic icon"></i> Check</div> <div class="column"><i class="edit basic icon"></i> Edit</div> <div class="column"><i class="open basic icon"></i> Open</div> <div class="column"><i class="export basic icon"></i> Export</div> <div class="column"><i class="forward basic icon"></i> Forward</div> <div class="column"><i class="upload basic icon"></i> Upload</div> <div class="column"><i class="like basic icon"></i> Like</div> <div class="column"><i class="dislike basic icon"></i> Dislike</div> <div class="column"><i class="pin basic icon"></i> Pin</div> <div class="column"><i class="star basic icon"></i> Star</div> <div class="column"><i class="empty star basic icon"></i> Empty Star</div> <div class="column"><i class="half star basic icon"></i> Half Star</div> <div class="column"><i class="print basic icon"></i> Print</div> <div class="column"><i class="comment basic icon"></i> Comment</div> </div> <div class="existing code"> <i class="add user basic icon"></i> <i class="block basic icon"></i> <i class="hide basic icon"></i> <i class="unhide basic icon"></i> <i class="lock basic icon"></i> <i class="unlock basic icon"></i> <i class="flag basic icon"></i> <i class="cancel basic icon"></i> <i class="close basic icon"></i> <i class="close basic icon"></i> <i class="check basic icon"></i> <i class="edit basic icon"></i> <i class="open basic icon"></i> <i class="export basic icon"></i> <i class="forward basic icon"></i> <i class="upload basic icon"></i> <i class="like basic icon"></i> <i class="dislike basic icon"></i> <i class="pin basic icon"></i> <i class="star basic icon"></i> <i class="empty star basic icon"></i> <i class="half star basic icon"></i> <i class="print basic icon"></i> <i class="comment basic icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">View</h4> <p>Icons can represent ways to modify a page view</p> <div class="ui eight column grid"> <div class="column"><i class="content basic icon"></i> Content</div> <div class="column"><i class="grid layout basic icon"></i> Grid Layout</div> <div class="column"><i class="block layout basic icon"></i> Block Layout</div> <div class="column"><i class="list layout basic icon"></i> List Layout</div>> <div class="column"><i class="resize full basic icon"></i> Resize Full</div> <div class="column"><i class="resize horizontal basic icon"></i> Resize Horizontal</div> <div class="column"><i class="resize small basic icon"></i> Resize Small</div> <div class="column"><i class="resize vertical basic icon"></i> Resize Vertical</div> <div class="column"><i class="zoom in basic icon"></i> Zoom in</div> <div class="column"><i class="zoom out basic icon"></i> Zoom out</div> </div> <div class="existing code"> <i class="content basic icon"></i> <i class="grid layout basic icon"></i> <i class="block layout basic icon"></i> <i class="list layout basic icon"></i> <i class="resize full basic icon"></i> <i class="resize horizontal basic icon"></i> <i class="resize small basic icon"></i> <i class="resize vertical basic icon"></i> <i class="zoom in basic icon"></i> <i class="zoom out basic icon"></i> </div> </div> <div class="icon example"> <h4 class="ui header">Media Actions</h4> <p>Icons can represent actions that occur on media</p> <div class="ui eight column grid"> <div class="column"><i class="eject basic icon"></i> Eject</div> <div class="column"><i class="fast-forward basic icon"></i> Fast-forward</div> <div class="column"><i class="pause basic icon"></i> Pause</div> <div class="column"><i class="play basic icon"></i> Play</div> <div class="column"><i class="to-end basic icon"></i> To-start</div> <div class="column"><i class="to-start basic icon"></i> To-end</div> <div class="column"><i class="forward basic icon"></i> Forward</div> <div class="column"><i class="shuffle basic icon"></i> Shuffle</div> <div class="column"><i class="clockwise basic icon"></i> Clockwise</div> <div class="column"><i class="counter clockwise basic icon"></i> Counter clockwise</div> </div> <div class="existing code"> <i class="eject basic icon"></i> <i class="fast-forward basic icon"></i> <i class="pause basic icon"></i> <i class="play basic icon"></i> <i class="to-end basic icon"></i> <i class="to-start basic icon"></i> <i class="forward basic icon"></i> <i class="shuffle basic icon"></i> <i class="clockwise basic icon"></i> <i class="counter clockwise basic icon"></i> </div> </div> <div class="icon example"> <h4 class="ui header">Objects</h4> <p>Icons can represent literal objects</p> <div class="ui eight column grid"> <div class="column"><i class="book basic icon"></i> Book</div> <div class="column"><i class="calendar basic icon"></i> Calendar</div> <div class="column"><i class="color basic icon"></i> Color</div> <div class="column"><i class="desk globe basic icon"></i> Desk globe</div> <div class="column"><i class="fire basic icon"></i> Fire</div> <div class="column"><i class="globe basic icon"></i> Globe</div> <div class="column"><i class="headphones basic icon"></i> Headphones</div> <div class="column"><i class="id basic icon"></i> Id</div> <div class="column"><i class="idea basic icon"></i> Idea</div> <div class="column"><i class="lightning basic icon"></i> Lightning</div> <div class="column"><i class="money basic icon"></i> Money</div> <div class="column"><i class="paint basic icon"></i> Paint</div> </div> <div class="existing code"> <i class="book basic icon"></i> <i class="calendar basic icon"></i> <i class="color basic icon"></i> <i class="desk globe basic icon"></i> <i class="fire basic icon"></i> <i class="globe basic icon"></i> <i class="headphones basic icon"></i> <i class="id basic icon"></i> <i class="idea basic icon"></i> <i class="lightning basic icon"></i> <i class="money basic icon"></i> <i class="paint basic icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Indications</h4> <p>Icons can indicate the status of something</p> <div class="ui eight column grid"> <div class="column"><i class="cancel circle basic icon"></i> Cancel Circle</div> <div class="column"><i class="asterisk basic icon"></i> Asterisk</div> <div class="column"><i class="attention circle basic icon"></i> Attention Circle</div> <div class="column"><i class="attention basic icon"></i> Attention</div> <div class="column"><i class="empty heart basic icon"></i> Empty Heart</div> <div class="column"><i class="heart basic icon"></i> Heart</div> <div class="column"><i class="thumbs down basic icon"></i> Thumbs Down</div> <div class="column"><i class="thumbs up basic icon"></i> Thumbs Up</div> <div class="column"><i class="terminal basic icon"></i> Terminal</div> <div class="column"><i class="direction basic icon"></i> Direction</div> <div class="column"><i class="location basic icon"></i> Location</div> <div class="column"><i class="help basic icon"></i> Help</div> <div class="column"><i class="info basic icon"></i> Info</div> <div class="column"><i class="mic basic icon"></i> Mic</div> <div class="column"><i class="off basic icon"></i> Off</div> <div class="column"><i class="add basic icon"></i> Add</div> </div> <div class="existing code"> <i class="cancel circle basic icon"></i> <i class="asterisk basic icon"></i> <i class="attention circle basic icon"></i> <i class="attention basic icon"></i> <i class="empty heart basic icon"></i> <i class="heart basic icon"></i> <i class="thumbs down basic icon"></i> <i class="thumbs up basic icon"></i> <i class="terminal basic icon"></i> <i class="direction basic icon"></i> <i class="location basic icon"></i> <i class="help basic icon"></i> <i class="info basic icon"></i> <i class="mic basic icon"></i> <i class="off basic icon"></i> <i class="add basic icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Symbols</h4> <p>Icons can represent common symbols</p> <div class="ui eight column grid"> <div class="column"><i class="left arrow basic icon"></i> Left Open</div> <div class="column"><i class="left triangle basic icon"></i> Left Triangle</div> <div class="column"><i class="left basic icon"></i> Left</div> <div class="column"><i class="right basic icon"></i> Right</div> <div class="column"><i class="right triangle basic icon"></i> Right Triangle</div> <div class="column"><i class="right arrow basic icon"></i> Right Arrow</div> <div class="column"><i class="up basic icon"></i> Up</div> <div class="column"><i class="up triangle basic icon"></i> Up Triangle</div> <div class="column"><i class="up arrow basic icon"></i> Up Arrow</div> <div class="column"><i class="down arrow basic icon"></i> Down Arrow</div> <div class="column"><i class="down triangle basic icon"></i> Down Triangle</div> <div class="column"><i class="down basic icon"></i> Down Arrow</div> <div class="column"><i class="cube basic icon"></i> Cube</div> <div class="column"><i class="minus basic icon"></i> Minus</div> <div class="column"><i class="plus basic icon"></i> Plus</div> </div> <div class="existing code"> <i class="left arrow basic icon"></i> <i class="left triangle basic icon"></i> <i class="left basic icon"></i> <i class="right basic icon"></i> <i class="right triangle basic icon"></i> <i class="right arrow basic icon"></i> <i class="up basic icon"></i> <i class="up triangle basic icon"></i> <i class="up arrow basic icon"></i> <i class="down arrow basic icon"></i> <i class="down triangle basic icon"></i> <i class="down basic icon"></i> <i class="cube basic icon"></i> <i class="minus basic icon"></i> <i class="plus basic icon"></i> </div> </div>
<div class="icon example"> <h4 class="ui header">Websites</h4> <p>Icons can represent logos to common websites</p> <div class="ui eight column grid"> <div class="column"><i class="facebook basic icon"></i> Facebook</div> <div class="column"><i class="twitter basic icon"></i> Twitter</div> <div class="column"><i class="github basic icon"></i> Github</div> </div> </div> </div>
<h2 class="ui dividing header">States</h2>
<div class="example"> <h4 class="ui header">Disabled</h4> <p>An icon can show that it is disabled</p> <i class="disabled users icon"></i> </div>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <h4 class="ui header">Size</h4> <p>An icon can vary in size</p> <i class="small home icon"></i> <br> <i class="home icon"></i> <br> <i class="large 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 circle 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">Square</h4> <p>An icon can be formatted to appear square</p> <i class="square users icon"></i> <i class="square teal users icon"></i> <i class="square inverted users icon"></i> <i class="square 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>
|
