Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body id="sink">

<div class="demo container">

  <h2 class="ui dividing header">
    Elements
  </h2>
  <div class="example">
    <h4 class="ui header">
      <a href="https://www.semantic-ui.com/elements/button.html">Button</a>
    </h4>
    <div class="button demo">
  <div class="ui button">
    View
  </div>
  <div class="ui primary button">
    <i class="shop icon"></i> Add to Cart
  </div>
  <div class="ui secondary button">
    <i class="save icon"></i> Save for Later
  </div>
  <div class="ui labeled icon button">
    <i class="star icon"></i>
    Rate
  </div>
  <div class="ui basic button">Basic</div>

  <div class="ui hidden divider"></div>

  <div class="ui animated button">
    <div class="visible content">Horizontal</div>
    <div class="hidden content">
      Hidden
    </div>
  </div>
  <div class="ui vertical animated button">
    <div class="visible content">Vertical</div>
    <div class="hidden content">
      Hidden
    </div>
  </div>
  <div class="ui animated fade button">
    <div class="visible content">Fade In</div>
    <div class="hidden content">
      Hidden
    </div>
  </div>

  <div class="ui hidden divider"></div>

  <div class="ui facebook button">
    <i class="facebook icon"></i>
    Facebook
  </div>
  <div class="ui twitter button">
    <i class="twitter icon"></i>
    Twitter
  </div>
  <div class="ui google plus button">
    <i class="google plus icon"></i>
    Google Plus
  </div>

  <div class="ui hidden divider"></div>
  <div class="ui buttons">
    <div class="ui button">1</div>
    <div class="ui button">2</div>
    <div class="ui button">3</div>
  </div>


  <div class="ui buttons">
    <div class="ui button">Cancel</div>
    <div class="or"></div>
    <div class="ui positive button">Save</div>
  </div>

  <div class="ui icon buttons">
    <div class="ui button"><i class="align left icon"></i></div>
    <div class="ui button"><i class="align center icon"></i></div>
    <div class="ui button"><i class="align right icon"></i></div>
    <div class="ui button"><i class="align justify icon"></i></div>
  </div>
  <div class="ui hidden divider"></div>
  <div class="ui blue button">Blue</div>
  <div class="ui red button">Red</div>
  <div class="ui teal button">Teal</div>
  <div class="ui blue basic button">Blue</div>
  <div class="ui red basic button">Red</div>
  <div class="ui teal basic button">Teal</div>

  <div class="ui inverted segment">
    <div class="ui inverted button">Inverted</div>
    <div class="ui inverted blue button">Blue</div>
    <div class="ui inverted red button">Red</div>
    <div class="ui inverted basic button">Basic</div>
    <div class="ui inverted blue basic button">Blue</div>
    <div class="ui inverted red basic button">Red</div>
  </div>

  <div class="ui hidden divider"></div>

  <div class="ui vertical buttons">
    <div class="ui button">Feed</div>
    <div class="ui button">Messages</div>
    <div class="ui button">Events</div>
    <div class="ui button">Photos</div>
  </div>

  <div class="ui vertical buttons">
    <div class="ui button">1</div>
    <div class="ui button">2</div>
    <div class="ui button">3</div>
  </div>

  <div class="ui vertical icon buttons">
    <div class="ui button"><i class="align left icon"></i></div>
    <div class="ui button"><i class="align center icon"></i></div>
    <div class="ui button"><i class="align right icon"></i></div>
    <div class="ui button"><i class="align justify icon"></i></div>
  </div>

</div>
<script type="text/javascript">
$('.button.demo .follow')
  .state({
    text: {
      inactive : 'Follow',
      active   : 'Following'
    }
  })
;
</script>
  </div>
  <div class="example">
    <h4 class="ui header">
      <a href="https://www.semantic-ui.com/elements/divider.html">Divider</a>
    </h4>
    <div class="ui center aligned segment">
  <div class="ui button">A</div>
  <div class="ui horizontal divider">and</div>
  <div class="teal ui button">B</div>
</div>

<div class="ui two column stackable center aligned grid segment">
  <div class="column">
    <div class="ui button">A</div>
  </div>
  <div class="ui vertical divider">or</div>
  <div class="column">
    <div class="teal ui button">B</div>
  </div>
</div>

<div class="ui horizontal divider">
  <i class="heart icon"></i>
</div>

<h5 class="ui horizontal header divider">
  <i class="bar chart icon"></i>
  Specifications
</h5>

<div class="ui inverted segment">
  <p>A</p>
  <div class="ui inverted divider"></div>
  <p>B</p>
</div>
  </div>
  <div class="example">
    <h4 class="ui header">
      <a href="https://www.semantic-ui.com/elements/flag.html">Flag</a>
    </h4>
    <i class="andorra flag"></i>
<i class="uae flag"></i>
<i class="afghanistan flag"></i>
<i class="antigua flag"></i>
<i class="anguilla flag"></i>
<i class="albania flag"></i>
<i class="armenia flag"></i>
<i class="netherlands antilles flag"></i>
<i class="angola flag"></i>
<i class="argentina flag"></i>
<i class="american samoa flag"></i>
<i class="austria flag"></i>
<i class="australia flag"></i>
<i class="aruba flag"></i>
<i class="aland islands flag"></i>
<i class="azerbaijan flag"></i>
<i class="bosnia flag"></i>
<i class="barbados flag"></i>
<i class="bangladesh flag"></i>
<i class="belgium flag"></i>
<i class="burkina faso flag"></i>
<i class="bulgaria flag"></i>
<i class="bahrain flag"></i>
<i class="burundi flag"></i>
<i class="benin flag"></i>
<i class="bermuda flag"></i>
<i class="brunei flag"></i>
<i class="bolivia flag"></i>
<i class="brazil flag"></i>
<i class="bahamas flag"></i>
<i class="bhutan flag"></i>
<i class="bouvet island flag"></i>
<i class="botswana flag"></i>
<i class="belarus flag"></i>
<i class="belize flag"></i>
<i class="canada flag"></i>
<i class="cocos islands flag"></i>
<i class="congo flag"></i>
<i class="central african republic flag"></i>
<i class="congo brazzaville flag"></i>
<i class="switzerland flag"></i>
<i class="cote divoire flag"></i>
<i class="cook islands flag"></i>
<i class="chile flag"></i>
<i class="cameroon flag"></i>
<i class="china flag"></i>
<i class="colombia flag"></i>
<i class="costa rica flag"></i>
<i class="serbia flag"></i>
<i class="cuba flag"></i>
<i class="cape verde flag"></i>
<i class="christmas island flag"></i>
<i class="cyprus flag"></i>
<i class="czech republic flag"></i>
<i class="germany flag"></i>
<i class="djibouti flag"></i>
<i class="denmark flag"></i>
<i class="dominica flag"></i>
<i class="dominican republic flag"></i>
<i class="algeria flag"></i>
<i class="ecuador flag"></i>
<i class="estonia flag"></i>
<i class="egypt flag"></i>
<i class="western sahara flag"></i>
<i class="eritrea flag"></i>
<i class="spain flag"></i>
<i class="ethiopia flag"></i>
<i class="european union flag"></i>
<i class="finland flag"></i>
<i class="fiji flag"></i>
<i class="falkland islands flag"></i>
<i class="micronesia flag"></i>
<i class="faroe islands flag"></i>
<i class="france flag"></i>
<i class="gabon flag"></i>
<i class="united kingdom flag"></i>
<i class="grenada flag"></i>
<i class="georgia flag"></i>
<i class="french guiana flag"></i>
<i class="ghana flag"></i>
<i class="gibraltar flag"></i>
<i class="greenland flag"></i>
<i class="gambia flag"></i>
<i class="guinea flag"></i>
<i class="guadeloupe flag"></i>
<i class="equatorial guinea flag"></i>
<i class="greece flag"></i>
<i class="sandwich islands flag"></i>
<i class="guatemala flag"></i>
<i class="guam flag"></i>
<i class="guinea-bissau flag"></i>
<i class="guyana flag"></i>
<i class="hong kong flag"></i>
<i class="heard island flag"></i>
<i class="honduras flag"></i>
<i class="croatia flag"></i>
<i class="haiti flag"></i>
<i class="hungary flag"></i>
<i class="indonesia flag"></i>
<i class="ireland flag"></i>
<i class="israel flag"></i>
<i class="india flag"></i>
<i class="indian ocean territory flag"></i>
<i class="iraq flag"></i>
<i class="iran flag"></i>
<i class="iceland flag"></i>
<i class="italy flag"></i>
<i class="jamaica flag"></i>
<i class="jordan flag"></i>
<i class="japan flag"></i>
<i class="kenya flag"></i>
<i class="kyrgyzstan flag"></i>
<i class="cambodia flag"></i>
<i class="kiribati flag"></i>
<i class="comoros flag"></i>
<i class="saint kitts and nevis flag"></i>
<i class="north korea flag"></i>
<i class="south korea flag"></i>
<i class="kuwait flag"></i>
<i class="cayman islands flag"></i>
<i class="kazakhstan flag"></i>
<i class="laos flag"></i>
<i class="lebanon flag"></i>
<i class="saint lucia flag"></i>
<i class="liechtenstein flag"></i>
<i class="sri lanka flag"></i>
<i class="liberia flag"></i>
<i class="lesotho flag"></i>
<i class="lithuania flag"></i>
<i class="luxembourg flag"></i>
<i class="latvia flag"></i>
<i class="libya flag"></i>
<i class="morocco flag"></i>
<i class="monaco flag"></i>
<i class="moldova flag"></i>
<i class="montenegro flag"></i>
<i class="madagascar flag"></i>
<i class="marshall islands flag"></i>
<i class="macedonia flag"></i>
<i class="mali flag"></i>
<i class="burma flag"></i>
<i class="mongolia flag"></i>
<i class="macau flag"></i>
<i class="northern mariana islands flag"></i>
<i class="martinique flag"></i>
<i class="mauritania flag"></i>
<i class="montserrat flag"></i>
<i class="malta flag"></i>
<i class="mauritius flag"></i>
<i class="maldives flag"></i>
<i class="malawi flag"></i>
<i class="mexico flag"></i>
<i class="malaysia flag"></i>
<i class="mozambique flag"></i>
<i class="namibia flag"></i>
<i class="new caledonia flag"></i>
<i class="niger flag"></i>
<i class="norfolk island flag"></i>
<i class="nigeria flag"></i>
<i class="nicaragua flag"></i>
<i class="netherlands flag"></i>
<i class="norway flag"></i>
<i class="nepal flag"></i>
<i class="nauru flag"></i>
<i class="niue flag"></i>
<i class="new zealand flag"></i>
<i class="oman flag"></i>
<i class="panama flag"></i>
<i class="peru flag"></i>
<i class="french polynesia flag"></i>
<i class="new guinea flag"></i>
<i class="philippines flag"></i>
<i class="pakistan flag"></i>
<i class="poland flag"></i>
<i class="saint pierre flag"></i>
<i class="pitcairn islands flag"></i>
<i class="puerto rico flag"></i>
<i class="palestine flag"></i>
<i class="portugal flag"></i>
<i class="palau flag"></i>
<i class="paraguay flag"></i>
<i class="qatar flag"></i>
<i class="reunion flag"></i>
<i class="romania flag"></i>
<i class="serbia flag"></i>
<i class="russia flag"></i>
<i class="rwanda flag"></i>
<i class="saudi arabia flag"></i>
<i class="solomon islands flag"></i>
<i class="seychelles flag"></i>
<i class="sudan flag"></i>
<i class="sweden flag"></i>
<i class="singapore flag"></i>
<i class="saint helena flag"></i>
<i class="slovenia flag"></i>
<i class="jan mayen flag"></i>
<i class="slovakia flag"></i>
<i class="sierra leone flag"></i>
<i class="san marino flag"></i>
<i class="senegal flag"></i>
<i class="somalia flag"></i>
<i class="suriname flag"></i>
<i class="sao tome flag"></i>
<i class="el salvador flag"></i>
<i class="syria flag"></i>
<i class="swaziland flag"></i>
<i class="caicos islands flag"></i>
<i class="chad flag"></i>
<i class="french territories flag"></i>
<i class="togo flag"></i>
<i class="thailand flag"></i>
<i class="tajikistan flag"></i>
<i class="tokelau flag"></i>
<i class="timorleste flag"></i>
<i class="turkmenistan flag"></i>
<i class="tunisia flag"></i>
<i class="tonga flag"></i>
<i class="turkey flag"></i>
<i class="trinidad flag"></i>
<i class="tuvalu flag"></i>
<i class="taiwan flag"></i>
<i class="tanzania flag"></i>
<i class="ukraine flag"></i>
<i class="uganda flag"></i>
<i class="us minor islands flag"></i>
<i class="united states flag"></i>
<i class="uruguay flag"></i>
<i class="uzbekistan flag"></i>
<i class="vatican city flag"></i>
<i class="saint vincent flag"></i>
<i class="venezuela flag"></i>
<i class="british virgin islands flag"></i>
<i class="us virgin islands flag"></i>
<i class="vietnam flag"></i>
<i class="vanuatu flag"></i>
<i class="wallis and futuna flag"></i>
<i class="samoa flag"></i>
<i class="yemen flag"></i>
<i class="mayotte flag"></i>
<i class="south africa flag"></i>
<i class="zambia flag"></i>
<i class="zimbabwe flag"></i>
  </div>
  <div class="example">
    <h4 class="ui header">
      <a href="https://www.semantic-ui.com/elements/header.html">Header</a>
    </h4>
    <div class="ui two column grid">

  <div class="column">
    <h1 class="ui header">H1</h1>
    <h2 class="ui header">H2</h2>
    <h3 class="ui header">H3</h3>
    <h4 class="ui header">H4</h4>
    <h5 class="ui header">H5</h5>

    <div class="ui icon header">
      <i class="settings icon"></i>
      <div class="content">
        Icon Header
        <div class="sub header">Sub-header</div>
      </div>
    </div>

    <div class="ui header">
      <i class="settings icon"></i>
      <div class="content">
        Header
        <div class="sub header">Sub-header</div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui block header">
      <i class="settings icon"></i>
      <div class="content">
        Block
        <div class="sub header">Sub-header</div>
      </div>
    </div>

    <div class="ui dividing header">
      <i class="settings icon"></i>
      <div class="content">
        Dividing
        <div class="sub header">Sub-header</div>
      </div>
    </div>

    <div class="ui teal dividing header">
      <i class="settings icon"></i>
      <div class="content">
        Color
        <div class="sub header">Sub-header</div>
      </div>
    </div>

    <div class="ui top attached header">Attached</div>
    <div class="ui attached segment"></div>
    <div class="ui bottom attached header">Attached</div>
  </div>
</div>
  </div>
  <div class="example">
    <h4 class="ui header">
      <a href="https://www.semantic-ui.com/elements/icon.html">Icon</a>
    </h4>
    <div class="demo icons">
  <i class="search icon"></i>
  <i class="mail outline icon"></i>
  <i class="external link icon"></i>
  <i class="wifi icon"></i>
  <i class="setting icon"></i>
  <i class="home icon"></i>
  <i class="inbox icon"></i>
  <i class="browser icon"></i>
  <i class="tag icon"></i>
  <i class="tags icon"></i>
  <i class="calendar icon"></i>
  <i class="comment icon"></i>
  <i class="comments icon"></i>
  <i class="shop icon"></i>
  <i class="privacy icon"></i>
  <i class="settings icon"></i>
  <i class="trophy icon"></i>
  <i class="payment icon"></i>
  <i class="feed icon"></i>
  <i class="alarm outline icon"></i>
  <i class="tasks icon"></i>
  <i class="cloud icon"></i>
  <i class="lab icon"></i>
  <i class="mail icon"></i>
  <i class="idea icon"></i>
  <i class="dashboard icon"></i>
  <i class="sitemap icon"></i>
  <i class="alarm icon"></i>
  <i class="terminal icon"></i>
  <i class="code icon"></i>
  <i class="protect icon"></i>
  <i class="calendar outline icon"></i>
  <i class="ticket icon"></i>
  <i class="external link square icon"></i>
  <i class="map icon"></i>
  <i class="bug icon"></i>
  <i class="mail square icon"></i>
  <i class="history icon"></i>
  <i class="options icon"></i>
  <i class="comment outline icon"></i>
  <i class="comments outline icon"></i>
  <i class="download icon"></i>
  <i class="repeat icon"></i>
  <i class="refresh icon"></i>
  <i class="lock icon"></i>
  <i class="bookmark icon"></i>
  <i class="print icon"></i>
  <i class="write icon"></i>
  <i class="theme icon"></i>
  <i class="adjust icon"></i>
  <i class="edit icon"></i>
  <i class="external share icon"></i>
  <i class="ban icon"></i>
  <i class="mail forward icon"></i>
  <i class="share icon"></i>
  <i class="expand icon"></i>
  <i class="compress icon"></i>
  <i class="unhide icon"></i>
  <i class="hide icon"></i>
  <i class="random icon"></i>
  <i class="retweet icon"></i>
  <i class="sign out icon"></i>
  <i class="pin icon"></i>
  <i class="sign in icon"></i>
  <i class="upload icon"></i>
  <i class="call icon"></i>
  <i class="call square icon"></i>
  <i class="remove bookmark icon"></i>
  <i class="unlock icon"></i>
  <i class="configure icon"></i>
  <i class="filter icon"></i>
  <i class="wizard icon"></i>
  <i class="undo icon"></i>
  <i class="exchange icon"></i>
  <i class="cloud download icon"></i>
  <i class="cloud upload icon"></i>
  <i class="reply icon"></i>
  <i class="reply all icon"></i>
  <i class="erase icon"></i>
  <i class="unlock alternate icon"></i>
  <i class="archive icon"></i>
  <i class="translate icon"></i>
  <i class="recycle icon"></i>
  <i class="send icon"></i>
  <i class="send outline icon"></i>
  <i class="share alternate icon"></i>
  <i class="share alternate square icon"></i>
  <i class="wait icon"></i>
  <i class="write square icon"></i>
  <i class="share square icon"></i>
  <i class="help circle icon"></i>
  <i class="info circle icon"></i>
  <i class="warning icon"></i>
  <i class="warning circle icon"></i>
  <i class="warning sign icon"></i>
  <i class="help icon"></i>
  <i class="info icon"></i>
  <i class="announcement icon"></i>
  <i class="users icon"></i>
  <i class="doctor icon"></i>
  <i class="female icon"></i>
  <i class="male icon"></i>
  <i class="child icon"></i>
  <i class="user icon"></i>
  <i class="handicap icon"></i>
  <i class="student icon"></i>
  <i class="grid layout icon"></i>
  <i class="list layout icon"></i>
  <i class="block layout icon"></i>
  <i class="zoom icon"></i>
  <i class="zoom out icon"></i>
  <i class="resize vertical icon"></i>
  <i class="resize horizontal icon"></i>
  <i class="maximize icon"></i>
  <i class="crop icon"></i>
  <i class="cocktail icon"></i>
  <i class="road icon"></i>
  <i class="flag icon"></i>
  <i class="book icon"></i>
  <i class="gift icon"></i>
  <i class="leaf icon"></i>
  <i class="fire icon"></i>
  <i class="plane icon"></i>
  <i class="magnet icon"></i>
  <i class="legal icon"></i>
  <i class="lemon icon"></i>
  <i class="world icon"></i>
  <i class="travel icon"></i>
  <i class="shipping icon"></i>
  <i class="money icon"></i>
  <i class="lightning icon"></i>
  <i class="rain icon"></i>
  <i class="treatment icon"></i>
  <i class="suitcase icon"></i>
  <i class="bar icon"></i>
  <i class="flag outline icon"></i>
  <i class="flag checkered icon"></i>
  <i class="puzzle icon"></i>
  <i class="fire extinguisher icon"></i>
  <i class="rocket icon"></i>
  <i class="anchor icon"></i>
  <i class="bullseye icon"></i>
  <i class="sun icon"></i>
  <i class="moon icon"></i>
  <i class="fax icon"></i>
  <i class="life ring icon"></i>
  <i class="bomb icon"></i>
  <i class="crosshairs icon"></i>
  <i class="asterisk icon"></i>
  <i class="certificate icon"></i>
  <i class="circle icon"></i>
  <i class="quote left icon"></i>
  <i class="quote right icon"></i>
  <i class="ellipsis horizontal icon"></i>
  <i class="ellipsis vertical icon"></i>
  <i class="cube icon"></i>
  <i class="cubes icon"></i>
  <i class="circle notched icon"></i>
  <i class="circle thin icon"></i>
  <i class="checkmark icon"></i>
  <i class="remove icon"></i>
  <i class="checkmark box icon"></i>
  <i class="move icon"></i>
  <i class="add circle icon"></i>
  <i class="minus circle icon"></i>
  <i class="remove circle icon"></i>
  <i class="check circle icon"></i>
  <i class="remove circle outline icon"></i>
  <i class="check circle outline icon"></i>
  <i class="plus icon"></i>
  <i class="minus icon"></i>
  <i class="add square icon"></i>
  <i class="radio icon"></i>
  <i class="selected radio icon"></i>
  <i class="minus square icon"></i>
  <i class="minus square outline icon"></i>
  <i class="check square icon"></i>
  <i class="plus square outline icon"></i>
  <i class="film icon"></i>
  <i class="sound icon"></i>
  <i class="photo icon"></i>
  <i class="bar chart icon"></i>
  <i class="camera retro icon"></i>
  <i class="arrow circle outline down icon"></i>
  <i class="arrow circle outline up icon"></i>
  <i class="chevron left icon"></i>
  <i class="chevron right icon"></i>
  <i class="arrow left icon"></i>
  <i class="arrow right icon"></i>
  <i class="arrow up icon"></i>
  <i class="arrow down icon"></i>
  <i class="chevron up icon"></i>
  <i class="chevron down icon"></i>
  <i class="pointing right icon"></i>
  <i class="pointing left icon"></i>
  <i class="pointing up icon"></i>
  <i class="pointing down icon"></i>
  <i class="arrow circle left icon"></i>
  <i class="arrow circle right icon"></i>
  <i class="arrow circle up icon"></i>
  <i class="arrow circle down icon"></i>
  <i class="caret down icon"></i>
  <i class="caret up icon"></i>
  <i class="caret left icon"></i>
  <i class="caret right icon"></i>
  <i class="angle double left icon"></i>
  <i class="angle double right icon"></i>
  <i class="angle double up icon"></i>
  <i class="angle double down icon"></i>
  <i class="angle left icon"></i>
  <i class="angle right icon"></i>
  <i class="angle up icon"></i>
  <i class="angle down icon"></i>
  <i class="chevron circle left icon"></i>
  <i class="chevron circle right icon"></i>
  <i class="chevron circle up icon"></i>
  <i class="chevron circle down icon"></i>
  <i class="toggle down icon"></i>
  <i class="toggle up icon"></i>
  <i class="toggle right icon"></i>
  <i class="long arrow down icon"></i>
  <i class="long arrow up icon"></i>
  <i class="long arrow left icon"></i>
  <i class="long arrow right icon"></i>
  <i class="arrow circle outline right icon"></i>
  <i class="arrow circle outline left icon"></i>
  <i class="toggle left icon"></i>
  <i class="power icon"></i>
  <i class="trash icon"></i>
  <i class="disk outline icon"></i>
  <i class="desktop icon"></i>
  <i class="laptop icon"></i>
  <i class="tablet icon"></i>
  <i class="mobile icon"></i>
  <i class="game icon"></i>
  <i class="keyboard icon"></i>
  <i class="folder icon"></i>
  <i class="folder open icon"></i>
  <i class="level up icon"></i>
  <i class="level down icon"></i>
  <i class="file icon"></i>
  <i class="file outline icon"></i>
  <i class="file text icon"></i>
  <i class="file text outline icon"></i>
  <i class="folder outline icon"></i>
  <i class="folder open outline icon"></i>
  <i class="file pdf outline icon"></i>
  <i class="file word outline icon"></i>
  <i class="file excel outline icon"></i>
  <i class="file powerpoint outline icon"></i>
  <i class="file image outline icon"></i>
  <i class="file archive outline icon"></i>
  <i class="file audio outline icon"></i>
  <i class="file video outline icon"></i>
  <i class="file code outline icon"></i>
  <i class="barcode icon"></i>
  <i class="qrcode icon"></i>
  <i class="fork icon"></i>
  <i class="html5 icon"></i>
  <i class="css3 icon"></i>
  <i class="rss square icon"></i>
  <i class="openid icon"></i>
  <i class="database icon"></i>
  <i class="heart icon"></i>
  <i class="star icon"></i>
  <i class="empty star icon"></i>
  <i class="thumbs outline up icon"></i>
  <i class="thumbs outline down icon"></i>
  <i class="star half icon"></i>
  <i class="empty heart icon"></i>
  <i class="smile icon"></i>
  <i class="frown icon"></i>
  <i class="meh icon"></i>
  <i class="star half empty icon"></i>
  <i class="thumbs up icon"></i>
  <i class="thumbs down icon"></i>
  <i class="music icon"></i>
  <i class="video play outline icon"></i>
  <i class="volume off icon"></i>
  <i class="volume down icon"></i>
  <i class="volume up icon"></i>
  <i class="record icon"></i>
  <i class="step backward icon"></i>
  <i class="fast backward icon"></i>
  <i class="backward icon"></i>
  <i class="play icon"></i>
  <i class="pause icon"></i>
  <i class="stop icon"></i>
  <i class="forward icon"></i>
  <i class="fast forward icon"></i>
  <i class="step forward icon"></i>
  <i class="eject icon"></i>
  <i class="unmute icon"></i>
  <i class="mute icon"></i>
  <i class="video play icon"></i>
  <i class="marker icon"></i>
  <i class="coffee icon"></i>
  <i class="food icon"></i>
  <i class="building outline icon"></i>
  <i class="hospital icon"></i>
  <i class="emergency icon"></i>
  <i class="first aid icon"></i>
  <i class="military icon"></i>
  <i class="h icon"></i>
  <i class="location arrow icon"></i>
  <i class="space shuttle icon"></i>
  <i class="university icon"></i>
  <i class="building icon"></i>
  <i class="paw icon"></i>
  <i class="spoon icon"></i>
  <i class="car icon"></i>
  <i class="taxi icon"></i>
  <i class="tree icon"></i>
  <i class="table icon"></i>
  <i class="columns icon"></i>
  <i class="sort icon"></i>
  <i class="sort ascending icon"></i>
  <i class="sort descending icon"></i>
  <i class="sort alphabet ascending icon"></i>
  <i class="sort alphabet descending icon"></i>
  <i class="sort content ascending icon"></i>
  <i class="sort content descending icon"></i>
  <i class="sort numeric ascending icon"></i>
  <i class="sort numeric descending icon"></i>
  <i class="font icon"></i>
  <i class="bold icon"></i>
  <i class="italic icon"></i>
  <i class="text height icon"></i>
  <i class="text width icon"></i>
  <i class="align left icon"></i>
  <i class="align center icon"></i>
  <i class="align right icon"></i>
  <i class="align justify icon"></i>
  <i class="list icon"></i>
  <i class="outdent icon"></i>
  <i class="indent icon"></i>
  <i class="linkify icon"></i>
  <i class="cut icon"></i>
  <i class="copy icon"></i>
  <i class="attach icon"></i>
  <i class="save icon"></i>
  <i class="content icon"></i>
  <i class="unordered list icon"></i>
  <i class="ordered list icon"></i>
  <i class="strikethrough icon"></i>
  <i class="underline icon"></i>
  <i class="paste icon"></i>
  <i class="unlink icon"></i>
  <i class="superscript icon"></i>
  <i class="subscript icon"></i>
  <i class="header icon"></i>
  <i class="paragraph icon"></i>
  <i class="euro icon"></i>
  <i class="pound icon"></i>
  <i class="dollar icon"></i>
  <i class="rupee icon"></i>
  <i class="yen icon"></i>
  <i class="ruble icon"></i>
  <i class="won icon"></i>
  <i class="lira icon"></i>
  <i class="twitter square icon"></i>
  <i class="facebook square icon"></i>
  <i class="linkedin square icon"></i>
  <i class="github square icon"></i>
  <i class="twitter icon"></i>
  <i class="facebook icon"></i>
  <i class="github icon"></i>
  <i class="pinterest icon"></i>
  <i class="pinterest square icon"></i>
  <i class="google plus square icon"></i>
  <i class="google plus icon"></i>
  <i class="linkedin icon"></i>
  <i class="github alternate icon"></i>
  <i class="maxcdn icon"></i>
  <i class="bitcoin icon"></i>
  <i class="youtube square icon"></i>
  <i class="youtube icon"></i>
  <i class="xing icon"></i>
  <i class="xing square icon"></i>
  <i class="youtube play icon"></i>
  <i class="dropbox icon"></i>
  <i class="stack overflow icon"></i>
  <i class="instagram icon"></i>
  <i class="flickr icon"></i>
  <i class="adn icon"></i>
  <i class="bitbucket icon"></i>
  <i class="bitbucket square icon"></i>
  <i class="tumblr icon"></i>
  <i class="tumblr square icon"></i>
  <i class="apple icon"></i>
  <i class="windows icon"></i>
  <i class="android icon"></i>
  <i class="linux icon"></i>
  <i class="dribbble icon"></i>
  <i class="skype icon"></i>
  <i class="foursquare icon"></i>
  <i class="trello icon"></i>
  <i class="gittip icon"></i>
  <i class="vk icon"></i>
  <i class="weibo icon"></i>
  <i class="renren icon"></i>
  <i class="pagelines icon"></i>
  <i class="stack exchange icon"></i>
  <i class="vimeo icon"></i>
  <i class="slack icon"></i>
  <i class="wordpress icon"></i>
  <i class="yahoo icon"></i>
  <i class="google icon"></i>
  <i class="reddit icon"></i>
  <i class="reddit square icon"></i>
  <i class="stumbleupon circle icon"></i>
  <i class="stumbleupon icon"></i>
  <i class="delicious icon"></i>
  <i class="digg icon"></i>
  <i class="pied piper icon"></i>
  <i class="pied piper alternate icon"></i>
  <i class="drupal icon"></i>
  <i class="joomla icon"></i>
  <i class="behance icon"></i>
  <i class="behance square icon"></i>
  <i class="steam icon"></i>
  <i class="steam square icon"></i>
  <i class="spotify icon"></i>
  <i class="deviantart icon"></i>
  <i class="soundcloud icon"></i>
  <i class="vine icon"></i>
  <i class="codepen icon"></i>
  <i class="jsfiddle icon"></i>
  <i class="rebel icon"></i>
  <i class="empire icon"></i>
  <i class="git square icon"></i>
  <i class="git icon"></i>
  <i class="hacker news icon"></i>
  <i class="tencent weibo icon"></i>
  <i class="qq icon"></i>
  <i class="wechat icon"></i>
  <i class="like icon"></i>
  <i class="favorite icon"></i>
  <i class="video icon"></i>
  <i class="check icon"></i>
  <i class="remove icon"></i>
  <i class="close icon"></i>
  <i class="cancel icon"></i>
  <i class="delete icon"></i>
  <i class="x icon"></i>
  <i class="zoom in icon"></i>
  <i class="magnify icon"></i>
  <i class="shutdown icon"></i>
  <i class="signal icon"></i>
  <i class="clock icon"></i>
  <i class="time icon"></i>
  <i class="play circle outline icon"></i>
  <i class="clockwise icon"></i>
  <i class="headphone icon"></i>
  <i class="volume off icon"></i>
  <i class="camera icon"></i>
  <i class="video camera icon"></i>
  <i class="picture icon"></i>
  <i class="pencil icon"></i>
  <i class="compose icon"></i>
  <i class="point icon"></i>
  <i class="tint icon"></i>
  <i class="signup icon"></i>
  <i class="plus circle icon"></i>
  <i class="minus circle icon"></i>
  <i class="dont icon"></i>
  <i class="minimize icon"></i>
  <i class="add icon"></i>
  <i class="eye icon"></i>
  <i class="attention icon"></i>
  <i class="cart icon"></i>
  <i class="plane icon"></i>
  <i class="shuffle icon"></i>
  <i class="talk icon"></i>
  <i class="chat icon"></i>
  <i class="shopping cart icon"></i>
  <i class="bar graph icon"></i>
  <i class="key icon"></i>
  <i class="privacy icon"></i>
  <i class="cogs icon"></i>
  <i class="discussions icon"></i>
  <i class="like outline icon"></i>
  <i class="dislike outline icon"></i>
  <i class="heart outline icon"></i>
  <i class="log out icon"></i>
  <i class="thumb tack icon"></i>
  <i class="winner icon"></i>
  <i class="bookmark outline icon"></i>
  <i class="phone square icon"></i>
  <i class="phone square icon"></i>
  <i class="credit card icon"></i>
  <i class="rss icon"></i>
  <i class="hdd outline icon"></i>
  <i class="bullhorn icon"></i>
  <i class="bell icon"></i>
  <i class="hand outline right icon"></i>
  <i class="hand outline left icon"></i>
  <i class="hand outline up icon"></i>
  <i class="hand outline down icon"></i>
  <i class="globe icon"></i>
  <i class="wrench icon"></i>
  <i class="briefcase icon"></i>
  <i class="group icon"></i>
  <i class="flask icon"></i>
  <i class="sidebar icon"></i>
  <i class="bars icon"></i>
  <i class="list ul icon"></i>
  <i class="list ol icon"></i>
  <i class="numbered list icon"></i>
  <i class="magic icon"></i>
  <i class="truck icon"></i>
  <i class="currency icon"></i>
  <i class="triangle down icon"></i>
  <i class="dropdown icon"></i>
  <i class="triangle up icon"></i>
  <i class="triangle left icon"></i>
  <i class="triangle right icon"></i>
  <i class="envelope icon"></i>
  <i class="conversation icon"></i>
  <i class="lightning icon"></i>
  <i class="umbrella icon"></i>
  <i class="lightbulb icon"></i>
  <i class="suitcase icon"></i>
  <i class="bell outline icon"></i>
  <i class="ambulance icon"></i>
  <i class="medkit icon"></i>
  <i class="fighter jet icon"></i>
  <i class="beer icon"></i>
  <i class="plus square icon"></i>
  <i class="computer icon"></i>
  <i class="circle outline icon"></i>
  <i class="spinner icon"></i>
  <i class="gamepad icon"></i>
  <i class="star half full icon"></i>
  <i class="remove link icon"></i>
  <i class="question icon"></i>
  <i class="attention icon"></i>
  <i class="eraser icon"></i>
  <i class="microphone icon"></i>
  <i class="microphone slash icon"></i>
  <i class="shield icon"></i>
  <i class="target icon"></i>
  <i class="play circle icon"></i>
  <i class="pencil square icon"></i>
  <i class="compass icon"></i>
  <i class="eur icon"></i>
  <i class="gbp icon"></i>
  <i class="usd icon"></i>
  <i class="inr icon"></i>
  <i class="jpy icon"></i>
  <i class="rub icon"></i>
  <i class="krw icon"></i>
  <i class="btc icon"></i>
  <i class="try icon"></i>
  <i class="zip icon"></i>
  <i class="dot circle outline icon"></i>
  <i class="sliders icon"></i>
  <i class="graduation icon"></i>
  <i class="weixin icon"></i>
</div>

<div class="ui divider"></div>

<i class="circular users icon"></i>
<i class="circular inverted users icon"></i>
<i class="circular settings icon"></i>
<i class="circular settings icon"></i>
<i class="bordered users icon"></i>
<i class="bordered inverted black users icon"></i>
<i class="spinner loading icon"></i>
<i class="notched circle loading icon"></i>
<i class="circular teal users icon"></i>
<i class="circular inverted teal users icon"></i>
<i class="bordered teal users icon"></i>
<i class="bordered inverted teal users icon"></i>
<i class="small settin
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console