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.
1276 lines
61 KiB
1276 lines
61 KiB
---
|
|
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>
|