Browse Source
begin importing font-awesome
begin importing font-awesome
Former-commit-id:pull/258/heada194e147b6
Former-commit-id:5790bf5448
5 changed files with 27 additions and 484 deletions
Split View
Diff Options
-
463node/src/documents/elements/icon.html
-
1node/src/documents/elements/icon.html.REMOVED.git-id
-
38node/src/documents/modules/popup.html
-
4node/src/files/stylesheets/semantic.css
-
5node/src/layouts/default.html.eco
@ -1,463 +0,0 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'icon' |
|||
title : 'Icon' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Icon</h1> |
|||
<p>An icon is a glyph used to represent another concept more simply.</p> |
|||
<div class="ui basic labeled icon toggle overview button"> |
|||
Definition |
|||
<i class="book icon"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<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> |
|||
|
|||
<div class="icon example"> |
|||
<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 ignored green message"> |
|||
This icon set was built using a custom combination of fonts using the amazing web tool <a href="http://fontello.com/">Fontello</a> |
|||
</div> |
|||
|
|||
<h4 class="ui header">Content</h4> |
|||
<p>Content icons represent nouns</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="attachment icon"></i> Attachment</div> |
|||
<div class="column"><i class="barcode icon"></i> Barcode</div> |
|||
<div class="column"><i class="bookmark icon"></i> Bookmark</div> |
|||
<div class="column"><i class="cart icon"></i> Cart</div> |
|||
<div class="column"><i class="chart icon"></i> Chart</div> |
|||
<div class="column"><i class="bar chart icon"></i> Bar chart</div> |
|||
<div class="column"><i class="pie chart icon"></i> Pie chart</div> |
|||
<div class="column"><i class="date icon"></i> Date</div> |
|||
<div class="column"><i class="doc icon"></i> Doc</div> |
|||
<div class="column"><i class="docs icon"></i> Docs</div> |
|||
<div class="column"><i class="email icon"></i> Email</div> |
|||
<div class="column"><i class="folder icon"></i> Folder</div> |
|||
<div class="column"><i class="open folder icon"></i> Open folder</div> |
|||
<div class="column"><i class="home icon"></i> Home</div> |
|||
<div class="column"><i class="mail icon"></i> Mail</div> |
|||
<div class="column"><i class="photo icon"></i> Photo</div> |
|||
<div class="column"><i class="photos icon"></i> Photos</div> |
|||
<div class="column"><i class="search icon"></i> Search</div> |
|||
<div class="column"><i class="setting icon"></i> Setting</div> |
|||
<div class="column"><i class="settings icon"></i> Settings</div> |
|||
<div class="column"><i class="tag icon"></i> Tag</div> |
|||
<div class="column"><i class="tags icon"></i> Tags</div> |
|||
<div class="column"><i class="time icon"></i> Time</div> |
|||
<div class="column"><i class="top list icon"></i> Top list</div> |
|||
<div class="column"><i class="trash icon"></i> Trash</div> |
|||
<div class="column"><i class="community icon"></i> Community</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="chat icon"></i> Chat</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="attachment icon"></i> |
|||
<i class="barcode icon"></i> |
|||
<i class="bookmark icon"></i> |
|||
<i class="cart icon"></i> |
|||
<i class="chart icon"></i> |
|||
<i class="bar chart icon"></i> |
|||
<i class="pie chart icon"></i> |
|||
<i class="date icon"></i> |
|||
<i class="doc icon"></i> |
|||
<i class="docs icon"></i> |
|||
<i class="email icon"></i> |
|||
<i class="folder icon"></i> |
|||
<i class="open folder icon"></i> |
|||
<i class="home icon"></i> |
|||
<i class="mail icon"></i> |
|||
<i class="photo icon"></i> |
|||
<i class="photos icon"></i> |
|||
<i class="search icon"></i> |
|||
<i class="setting icon"></i> |
|||
<i class="settings icon"></i> |
|||
<i class="tag icon"></i> |
|||
<i class="tags icon"></i> |
|||
<i class="time icon"></i> |
|||
<i class="top list icon"></i> |
|||
<i class="trash icon"></i> |
|||
<i class="community icon"></i> |
|||
<i class="url icon"></i> |
|||
<i class="user icon"></i> |
|||
<i class="users icon"></i> |
|||
<i class="chat icon"></i> |
|||
</div> |
|||
</div> |
|||
<div class="icon example"> |
|||
<h4 class="ui header">Special Content</h4> |
|||
<p>Special content are types of content not as frequently used</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="trophy icon"></i> Trophy</div> |
|||
<div class="column"><i class="cloud icon"></i> Cloud</div> |
|||
<div class="column"><i class="flight icon"></i> Flight</div> |
|||
<div class="column"><i class="gift icon"></i> Gift</div> |
|||
<div class="column"><i class="dollar icon"></i> Dollar</div> |
|||
<div class="column"><i class="lab icon"></i> Lab</div> |
|||
<div class="column"><i class="rss icon"></i> RSS</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="trophy icon"></i> |
|||
<i class="cloud icon"></i> |
|||
<i class="flight icon"></i> |
|||
<i class="gift icon"></i> |
|||
<i class="dollar icon"></i> |
|||
<i class="lab icon"></i> |
|||
<i class="rss icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="icon example"> |
|||
<h4 class="ui header">User Actions</h4> |
|||
<p>User action icons represent possible actions a user can take</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="add user icon"></i> Add User</div> |
|||
<div class="column"><i class="block icon"></i> Block</div> |
|||
<div class="column"><i class="hide icon"></i> Hide</div> |
|||
<div class="column"><i class="unhide icon"></i> Unhide</div> |
|||
<div class="column"><i class="lock icon"></i> Lock</div> |
|||
<div class="column"><i class="unlock icon"></i> Unlock</div> |
|||
<div class="column"><i class="flag icon"></i> Flag</div> |
|||
<div class="column"><i class="cancel icon"></i> Cancel</div> |
|||
<div class="column"><i class="close icon"></i> Close</div> |
|||
<div class="column"><i class="close icon"></i> Delete</div> |
|||
<div class="column"><i class="check icon"></i> Check</div> |
|||
<div class="column"><i class="edit icon"></i> Edit</div> |
|||
<div class="column"><i class="open icon"></i> Open</div> |
|||
<div class="column"><i class="export icon"></i> Export</div> |
|||
<div class="column"><i class="forward icon"></i> Forward</div> |
|||
<div class="column"><i class="upload icon"></i> Upload</div> |
|||
<div class="column"><i class="like icon"></i> Like</div> |
|||
<div class="column"><i class="dislike icon"></i> Dislike</div> |
|||
<div class="column"><i class="pin icon"></i> Pin</div> |
|||
<div class="column"><i class="star icon"></i> Star</div> |
|||
<div class="column"><i class="empty star icon"></i> Empty Star</div> |
|||
<div class="column"><i class="half star icon"></i> Half Star</div> |
|||
<div class="column"><i class="print icon"></i> Print</div> |
|||
<div class="column"><i class="comment icon"></i> Comment</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="add user icon"></i> |
|||
<i class="block icon"></i> |
|||
<i class="hide icon"></i> |
|||
<i class="unhide icon"></i> |
|||
<i class="lock icon"></i> |
|||
<i class="unlock icon"></i> |
|||
<i class="flag icon"></i> |
|||
<i class="cancel icon"></i> |
|||
<i class="close icon"></i> |
|||
<i class="close icon"></i> |
|||
<i class="check icon"></i> |
|||
<i class="edit icon"></i> |
|||
<i class="open icon"></i> |
|||
<i class="export icon"></i> |
|||
<i class="forward icon"></i> |
|||
<i class="upload icon"></i> |
|||
<i class="like icon"></i> |
|||
<i class="dislike icon"></i> |
|||
<i class="pin icon"></i> |
|||
<i class="star icon"></i> |
|||
<i class="empty star icon"></i> |
|||
<i class="half star icon"></i> |
|||
<i class="print icon"></i> |
|||
<i class="comment icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="icon example"> |
|||
<h4 class="ui header">View</h4> |
|||
<p>View icons represent ways to modify a page view</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="content icon"></i> Content</div> |
|||
<div class="column"><i class="grid layout icon"></i> Grid Layout</div> |
|||
<div class="column"><i class="block layout icon"></i> Block Layout</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="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="content icon"></i> |
|||
<i class="grid layout icon"></i> |
|||
<i class="block 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="zoom in icon"></i> |
|||
<i class="zoom out icon"></i> |
|||
</div> |
|||
</div> |
|||
<div class="icon example"> |
|||
<h4 class="ui header">Media Actions</h4> |
|||
<p>Media actions specify actions a user can take on media elements</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="eject icon"></i> Eject</div> |
|||
<div class="column"><i class="fast-forward icon"></i> Fast-forward</div> |
|||
<div class="column"><i class="pause icon"></i> Pause</div> |
|||
<div class="column"><i class="play icon"></i> Play</div> |
|||
<div class="column"><i class="to-end icon"></i> To-start</div> |
|||
<div class="column"><i class="to-start icon"></i> To-end</div> |
|||
<div class="column"><i class="forward icon"></i> Forward</div> |
|||
<div class="column"><i class="shuffle icon"></i> Shuffle</div> |
|||
<div class="column"><i class="clockwise icon"></i> Clockwise</div> |
|||
<div class="column"><i class="counter clockwise icon"></i> Counter clockwise</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="eject icon"></i> |
|||
<i class="fast-forward icon"></i> |
|||
<i class="pause icon"></i> |
|||
<i class="play icon"></i> |
|||
<i class="to-end icon"></i> |
|||
<i class="to-start icon"></i> |
|||
<i class="forward icon"></i> |
|||
<i class="shuffle icon"></i> |
|||
<i class="clockwise icon"></i> |
|||
<i class="counter clockwise icon"></i> |
|||
</div> |
|||
</div> |
|||
<div class="icon example"> |
|||
<h4 class="ui header">Objects</h4> |
|||
<p>Object icons represent concepts more literally</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="book icon"></i> Book</div> |
|||
<div class="column"><i class="calendar icon"></i> Calendar</div> |
|||
<div class="column"><i class="color icon"></i> Color</div> |
|||
<div class="column"><i class="desk globe icon"></i> Desk globe</div> |
|||
<div class="column"><i class="fire icon"></i> Fire</div> |
|||
<div class="column"><i class="globe icon"></i> Globe</div> |
|||
<div class="column"><i class="headphones icon"></i> Headphones</div> |
|||
<div class="column"><i class="id icon"></i> Id</div> |
|||
<div class="column"><i class="idea icon"></i> Idea</div> |
|||
<div class="column"><i class="lightning icon"></i> Lightning</div> |
|||
<div class="column"><i class="money icon"></i> Money</div> |
|||
<div class="column"><i class="paint icon"></i> Paint</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="book icon"></i> |
|||
<i class="calendar icon"></i> |
|||
<i class="color icon"></i> |
|||
<i class="desk globe icon"></i> |
|||
<i class="fire icon"></i> |
|||
<i class="globe icon"></i> |
|||
<i class="headphones icon"></i> |
|||
<i class="id icon"></i> |
|||
<i class="idea icon"></i> |
|||
<i class="lightning icon"></i> |
|||
<i class="money icon"></i> |
|||
<i class="paint icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="icon example"> |
|||
<h4 class="ui header">Indications</h4> |
|||
<p>Indications represent the status of an element</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="cancel circle icon"></i> Cancel Circle</div> |
|||
<div class="column"><i class="asterisk icon"></i> Asterisk</div> |
|||
<div class="column"><i class="attention circle icon"></i> Attention Circle</div> |
|||
<div class="column"><i class="attention icon"></i> Attention</div> |
|||
<div class="column"><i class="empty heart icon"></i> Empty Heart</div> |
|||
<div class="column"><i class="heart icon"></i> Heart</div> |
|||
<div class="column"><i class="thumbs down icon"></i> Thumbs Down</div> |
|||
<div class="column"><i class="thumbs up icon"></i> Thumbs Up</div> |
|||
<div class="column"><i class="terminal icon"></i> Terminal</div> |
|||
<div class="column"><i class="direction icon"></i> Direction</div> |
|||
<div class="column"><i class="location icon"></i> Location</div> |
|||
<div class="column"><i class="help icon"></i> Help</div> |
|||
<div class="column"><i class="info icon"></i> Info</div> |
|||
<div class="column"><i class="mic icon"></i> Mic</div> |
|||
<div class="column"><i class="off icon"></i> Off</div> |
|||
<div class="column"><i class="add icon"></i> Add</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="cancel circle icon"></i> |
|||
<i class="asterisk icon"></i> |
|||
<i class="attention circle icon"></i> |
|||
<i class="attention icon"></i> |
|||
<i class="empty heart icon"></i> |
|||
<i class="heart icon"></i> |
|||
<i class="thumbs down icon"></i> |
|||
<i class="thumbs up icon"></i> |
|||
<i class="terminal icon"></i> |
|||
<i class="direction icon"></i> |
|||
<i class="location icon"></i> |
|||
<i class="help icon"></i> |
|||
<i class="info icon"></i> |
|||
<i class="mic icon"></i> |
|||
<i class="off icon"></i> |
|||
<i class="add icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="icon example"> |
|||
<h4 class="ui header">Symbols</h4> |
|||
<p>Symbol icons represent shapes or figures</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="left arrow icon"></i> Left Open</div> |
|||
<div class="column"><i class="left triangle icon"></i> Left Triangle</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="right triangle icon"></i> Right Triangle</div> |
|||
<div class="column"><i class="right arrow icon"></i> Right Arrow</div> |
|||
<div class="column"><i class="up icon"></i> Up</div> |
|||
<div class="column"><i class="up triangle icon"></i> Up Triangle</div> |
|||
<div class="column"><i class="up arrow icon"></i> Up Arrow</div> |
|||
<div class="column"><i class="down arrow icon"></i> Down Arrow</div> |
|||
<div class="column"><i class="down triangle icon"></i> Down Triangle</div> |
|||
<div class="column"><i class="down icon"></i> Down Arrow</div> |
|||
<div class="column"><i class="cube icon"></i> Cube</div> |
|||
<div class="column"><i class="minus icon"></i> Minus</div> |
|||
<div class="column"><i class="plus icon"></i> Plus</div> |
|||
</div> |
|||
<div class="existing code"> |
|||
<i class="left arrow icon"></i> |
|||
<i class="left triangle icon"></i> |
|||
<i class="left icon"></i> |
|||
<i class="right icon"></i> |
|||
<i class="right triangle icon"></i> |
|||
<i class="right arrow icon"></i> |
|||
<i class="up icon"></i> |
|||
<i class="up triangle icon"></i> |
|||
<i class="up arrow icon"></i> |
|||
<i class="down arrow icon"></i> |
|||
<i class="down triangle icon"></i> |
|||
<i class="down icon"></i> |
|||
<i class="cube icon"></i> |
|||
<i class="minus icon"></i> |
|||
<i class="plus icon"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="icon example"> |
|||
<h4 class="ui header">Social</h4> |
|||
<p>Social icons represent common social sites.</p> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="facebook icon"></i> Facebook</div> |
|||
<div class="column"><i class="twitter icon"></i> Twitter</div> |
|||
<div class="column"><i class="github icon"></i> Github</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>An icon can show that it is disabled</p> |
|||
<i class="disabled users icon"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>An icon can vary in size</p> |
|||
<i class="small 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 forward icon"></i> |
|||
<i class="vertically flipped forward icon"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Loading</h4> |
|||
<p>An icon can be spin to be used as a loading indicator</p> |
|||
<i class="clockwise loading icon"></i> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Rotated</h4> |
|||
<p>An icon can be rotated</p> |
|||
<i class="left rotated forward icon"></i> |
|||
<i class="right rotated forward 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 community icon"></i> |
|||
<i class="green add user icon"></i> |
|||
<i class="purple chat icon"></i> |
|||
<i class="teal comment icon"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>an icon can have its colors inverted for contrast</p> |
|||
<i class="inverted black users icon"></i> |
|||
<i class="inverted blue user icon"></i> |
|||
<i class="inverted red community icon"></i> |
|||
<i class="inverted green add user icon"></i> |
|||
<i class="inverted purple chat icon"></i> |
|||
<i class="inverted teal comment icon"></i> |
|||
</div> |
|||
|
|||
|
|||
</div> |
@ -0,0 +1 @@ |
|||
a08248c6589a97563678cf3bfa5d73a4c622d011 |
Write
Preview
Loading…
Cancel
Save