430 lines
13 KiB
HTML
430 lines
13 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Document</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
color: #666;
|
||
|
|
background: #fafafa;
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
font-size: 1em;
|
||
|
|
line-height: 1.4
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
display: block;
|
||
|
|
padding: 3em 3em 2em 3em;
|
||
|
|
background-color: #fff
|
||
|
|
}
|
||
|
|
|
||
|
|
header p {
|
||
|
|
margin: 0 0 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
font-size: .7em;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 0 2em 0
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a {
|
||
|
|
display: inline-block;
|
||
|
|
text-decoration: none;
|
||
|
|
margin-left: 2em;
|
||
|
|
color: #0f7595;
|
||
|
|
white-space: nowrap
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a:hover {
|
||
|
|
text-decoration: underline
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a.current {
|
||
|
|
font-weight: bold;
|
||
|
|
text-decoration: underline;
|
||
|
|
color: #666
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
padding: 2em 3em 0 3em
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-box {
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 20px;
|
||
|
|
position: relative;
|
||
|
|
background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: center;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-box.inverted {
|
||
|
|
background: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-wrapper {
|
||
|
|
width: 150px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-snippet {
|
||
|
|
width: 100%;
|
||
|
|
overflow-x: scroll;
|
||
|
|
box-shadow: 0 0 1px grey inset;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
padding: 10px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
margin: 0;
|
||
|
|
padding: 5px 0;
|
||
|
|
font-size: 1em;
|
||
|
|
font-weight: normal;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
display: block;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 3em 3em 3em
|
||
|
|
}
|
||
|
|
|
||
|
|
footer p {
|
||
|
|
margin: 0;
|
||
|
|
font-size: .7em
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a {
|
||
|
|
color: #0f7595;
|
||
|
|
margin-left: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.icons {
|
||
|
|
padding: 50px 0;
|
||
|
|
max-width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
display: inline-block;
|
||
|
|
fill: currentColor !important;
|
||
|
|
vertical-align: middle;
|
||
|
|
max-width: 80%;
|
||
|
|
height: 80%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Symbols</h1>
|
||
|
|
<p>Example usage:</p>
|
||
|
|
<pre><code><svg><use xlink:href="icons.svg#svg-logo"></use></svg></code></pre>
|
||
|
|
</header>
|
||
|
|
<main class="icons">
|
||
|
|
<div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-bin"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-bin</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-block"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-block</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-book"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-book</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-bug"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-bug</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-delete"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-delete</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-minus"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-minus</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-ok"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-ok</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-pause"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-pause</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-play"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-play</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-circle-plus"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-circle-plus</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-code"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-code</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-cog"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-cog</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-devices"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-devices</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-github"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-github</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-globe"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-globe</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-help"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-help</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-home"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-home</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-imac"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-imac</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-jh"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-jh</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-list"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-list</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-list2"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-list2</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-logo-word"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-logo-word</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-logo"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-logo</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-newtab"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-newtab</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-pen"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-pen</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-pencil"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-pencil</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-plug"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-plug</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-repeat"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-repeat</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-square-add"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-square-add</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-square-up"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-square-up</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-sync-browser"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-sync-browser</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-sync"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-sync</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-syncall"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-syncall</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-target"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-target</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-terminal"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-terminal</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-time"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-time</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-trash"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-trash</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-twitter"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-twitter</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="icon-wrapper">
|
||
|
|
<div class="icon-box">
|
||
|
|
<svg><use xlink:href="icons.svg#svg-wifi"></use></svg>
|
||
|
|
</div>
|
||
|
|
<div class="icon-snippet">
|
||
|
|
<pre><code>svg-wifi</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|