marble
Version:
WeDeploy's style guide and UI components
225 lines (214 loc) • 8.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Icons</title>
<link rel="stylesheet" href="../build/marble.css" />
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css" />
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css" />
<style type="text/css">
[class*="icon-"] {
color: #333;
cursor: pointer;
}
[class*="icon-"]:hover {
color: #999;
}
</style>
</head>
<body>
<h1>Icons 12</h1>
<span class="icon-12-alert"></span>
<span class="icon-12-apps"></span>
<span class="icon-12-arrow-down-rod"></span>
<span class="icon-12-arrow-down-short"></span>
<span class="icon-12-arrow-increase"></span>
<span class="icon-12-arrow-left-rod"></span>
<span class="icon-12-arrow-left-short"></span>
<span class="icon-12-arrow-right-rod"></span>
<span class="icon-12-arrow-right-short"></span>
<span class="icon-12-arrow-up-rod"></span>
<span class="icon-12-arrow-up-short"></span>
<span class="icon-12-arrows-expand"></span>
<span class="icon-12-arrows"></span>
<span class="icon-12-balloon-topic"></span>
<span class="icon-12-bell-off"></span>
<span class="icon-12-bell"></span>
<span class="icon-12-bookmark"></span>
<span class="icon-12-briefcase"></span>
<span class="icon-12-bug"></span>
<span class="icon-12-building"></span>
<span class="icon-12-camera"></span>
<span class="icon-12-card"></span>
<span class="icon-12-cart"></span>
<span class="icon-12-check"></span>
<span class="icon-12-clock"></span>
<span class="icon-12-close-short"></span>
<span class="icon-12-cloud"></span>
<span class="icon-12-code-file"></span>
<span class="icon-12-collections"></span>
<span class="icon-12-database"></span>
<span class="icon-12-download"></span>
<span class="icon-12-ellipses"></span>
<span class="icon-12-exclamation"></span>
<span class="icon-12-external"></span>
<span class="icon-12-eye-off"></span>
<span class="icon-12-eye"></span>
<span class="icon-12-facebook"></span>
<span class="icon-12-file"></span>
<span class="icon-12-flag"></span>
<span class="icon-12-flash-off"></span>
<span class="icon-12-flash"></span>
<span class="icon-12-folder"></span>
<span class="icon-12-forbidden"></span>
<span class="icon-12-fork"></span>
<span class="icon-12-gear"></span>
<span class="icon-12-github"></span>
<span class="icon-12-google"></span>
<span class="icon-12-graph"></span>
<span class="icon-12-groups"></span>
<span class="icon-12-hash"></span>
<span class="icon-12-heart-full"></span>
<span class="icon-12-house"></span>
<span class="icon-12-image"></span>
<span class="icon-12-info-card"></span>
<span class="icon-12-info"></span>
<span class="icon-12-leave"></span>
<span class="icon-12-link"></span>
<span class="icon-12-lock"></span>
<span class="icon-12-magnifier"></span>
<span class="icon-12-mail"></span>
<span class="icon-12-map"></span>
<span class="icon-12-menu"></span>
<span class="icon-12-minus"></span>
<span class="icon-12-module"></span>
<span class="icon-12-overlap"></span>
<span class="icon-12-pause"></span>
<span class="icon-12-pen"></span>
<span class="icon-12-people"></span>
<span class="icon-12-person-card-2"></span>
<span class="icon-12-person-card-3"></span>
<span class="icon-12-person"></span>
<span class="icon-12-persons"></span>
<span class="icon-12-pin"></span>
<span class="icon-12-play"></span>
<span class="icon-12-plus"></span>
<span class="icon-12-post"></span>
<span class="icon-12-rocket"></span>
<span class="icon-12-spinner-double-arrow"></span>
<span class="icon-12-star"></span>
<span class="icon-12-table"></span>
<span class="icon-12-trash"></span>
<span class="icon-12-twitter"></span>
<span class="icon-12-upload"></span>
<h1>Icons 16</h1>
<span class="icon-16-alert"></span>
<span class="icon-16-apps"></span>
<span class="icon-16-arrow-down-rod"></span>
<span class="icon-16-arrow-down-short"></span>
<span class="icon-16-arrow-left-rod"></span>
<span class="icon-16-arrow-left-short"></span>
<span class="icon-16-arrow-right-rod"></span>
<span class="icon-16-arrow-right-short"></span>
<span class="icon-16-arrow-up-rod"></span>
<span class="icon-16-arrow-up-short"></span>
<span class="icon-16-balloon-topic"></span>
<span class="icon-16-bell-off"></span>
<span class="icon-16-bell"></span>
<span class="icon-16-bookmark"></span>
<span class="icon-16-building"></span>
<span class="icon-16-bullhorn"></span>
<span class="icon-16-calendar"></span>
<span class="icon-16-camera"></span>
<span class="icon-16-cancel"></span>
<span class="icon-16-cart"></span>
<span class="icon-16-checkbox-checked"></span>
<span class="icon-16-checkbox-indeterminate"></span>
<span class="icon-16-checkbox-unchecked"></span>
<span class="icon-16-checkmark"></span>
<span class="icon-16-circle-arrow"></span>
<span class="icon-16-clear"></span>
<span class="icon-16-clip"></span>
<span class="icon-16-clock"></span>
<span class="icon-16-cloud"></span>
<span class="icon-16-code-file"></span>
<span class="icon-16-command-line"></span>
<span class="icon-16-contract"></span>
<span class="icon-16-cup"></span>
<span class="icon-16-database"></span>
<span class="icon-16-download"></span>
<span class="icon-16-dribbble"></span>
<span class="icon-16-ellipsis-vertical"></span>
<span class="icon-16-ellipsis"></span>
<span class="icon-16-expand"></span>
<span class="icon-16-external"></span>
<span class="icon-16-eye"></span>
<span class="icon-16-facebook"></span>
<span class="icon-16-filter"></span>
<span class="icon-16-flash-off"></span>
<span class="icon-16-flash"></span>
<span class="icon-16-folder"></span>
<span class="icon-16-fork"></span>
<span class="icon-16-gear"></span>
<span class="icon-16-github"></span>
<span class="icon-16-globe"></span>
<span class="icon-16-google"></span>
<span class="icon-16-graph"></span>
<span class="icon-16-groups"></span>
<span class="icon-16-hammer"></span>
<span class="icon-16-hash"></span>
<span class="icon-16-heart-full"></span>
<span class="icon-16-house"></span>
<span class="icon-16-image"></span>
<span class="icon-16-info"></span>
<span class="icon-16-layout"></span>
<span class="icon-16-liferay-logo-2-tiny"></span>
<span class="icon-16-link"></span>
<span class="icon-16-linkedin"></span>
<span class="icon-16-lock"></span>
<span class="icon-16-loop"></span>
<span class="icon-16-magnifier"></span>
<span class="icon-16-mail-full"></span>
<span class="icon-16-mail-off"></span>
<span class="icon-16-markdown"></span>
<span class="icon-16-menu"></span>
<span class="icon-16-minus"></span>
<span class="icon-16-module"></span>
<span class="icon-16-nodejs"></span>
<span class="icon-16-org_chart"></span>
<span class="icon-16-pause"></span>
<span class="icon-16-pen"></span>
<span class="icon-16-people"></span>
<span class="icon-16-person-card"></span>
<span class="icon-16-person"></span>
<span class="icon-16-persons"></span>
<span class="icon-16-phone-business"></span>
<span class="icon-16-phone-house"></span>
<span class="icon-16-phone-work"></span>
<span class="icon-16-phone"></span>
<span class="icon-16-play"></span>
<span class="icon-16-plus"></span>
<span class="icon-16-power-button"></span>
<span class="icon-16-radio-checked"></span>
<span class="icon-16-radio-unchecked"></span>
<span class="icon-16-send"></span>
<span class="icon-16-server"></span>
<span class="icon-16-skype"></span>
<span class="icon-16-speaker_off"></span>
<span class="icon-16-speaker_on"></span>
<span class="icon-16-speedometer"></span>
<span class="icon-16-spinner-double-arrows"></span>
<span class="icon-16-spinner-single-arrow"></span>
<span class="icon-16-star"></span>
<span class="icon-16-streams"></span>
<span class="icon-16-swift"></span>
<span class="icon-16-table"></span>
<span class="icon-16-tag"></span>
<span class="icon-16-thumb-down"></span>
<span class="icon-16-thumb-up"></span>
<span class="icon-16-trash"></span>
<span class="icon-16-twitter"></span>
<span class="icon-16-upload-file"></span>
<span class="icon-16-upload"></span>
</body>
</html>