techno-font
Version:
98 lines (82 loc) • 5.93 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../assets/techno-font.css" rel="stylesheet">
<link href="//cdn.rawgit.com/walchko/techno-font/v0.7.3/assets/techno-font.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<style>
body {
color: #333;
font-size: 12;
}
div {
margin: 5px;
width: 100%;
/*padding: 5px;*/
}
span {
font-size: 12;
margin: 5%;
text-align: middle;
}
.center {
text-align: center;
}
p, h1, h2 {
margin: 1em 1em;
}
header {
background-color: #0066cc;
color: white;
font-size: 400%;
height: 1.5em;
padding: 0.5em;
}
.right {
float: right;
}
.bob:visited, .bob:link {
color: white;
}
figure {
background-color: #eeeeee;
padding:0.25em;
}
.mybutton {
text-align: center;
margin: 3em;
}
</style>
</head>
<body>
<header>
Techno-Font v0.7.3
<a href="https://github.com/walchko/techno-font" class="bob"><i class="tf-github right"></i></a>
</header>
<div class="mybutton">
<a class="pure-button pure-button-primary" href="https://github.com/walchko/techno-font/archive/v0.7.3.zip">Download (zip)</a>
</div>
<h2>Usage</h2>
<p>To use the font, include assets/techno-font.css as well as the fonts in your project.</p>
<figure>
<p>
<code><link href="/assets/techno-font.css" rel="stylesheet"></code>
</p>
</figure>
<p>Or just link to it using RawGit (served via MaxCDN’s network):</p>
<figure>
<p><code><link href="https://cdn.rawgit.com/walchko/techno-font/v0.7.3/assets/techno-font.css" rel="stylesheet"></code></p></figure>
<p>Use the CSS classes listed below like this:</p>
<figure>
<p><code><i class="tf-archlinux"></i></code></p>
<p><code><i class="tf-archlinux tf-24"></i></code></p>
<p><code><i class="tf-archlinux tf-24" style="color:red"></i></code></p>
<p><code><i class="tf-archlinux" style="font-size:172px;color:red"></i></code></p>
</figure>
<hr>
<div class="pure-g center">
<div class="pure-u-1-5"><i class="tf-apple tf-48"></i><span>tf-apple</span></div><div class="pure-u-1-5"><i class="tf-archlinux tf-48"></i><span>tf-archlinux</span></div><div class="pure-u-1-5"><i class="tf-bitbucket tf-48"></i><span>tf-bitbucket</span></div><div class="pure-u-1-5"><i class="tf-bluetooth tf-48"></i><span>tf-bluetooth</span></div><div class="pure-u-1-5"><i class="tf-cassandra tf-48"></i><span>tf-cassandra</span></div><div class="pure-u-1-5"><i class="tf-centos tf-48"></i><span>tf-centos</span></div><div class="pure-u-1-5"><i class="tf-css3 tf-48"></i><span>tf-css3</span></div><div class="pure-u-1-5"><i class="tf-debian tf-48"></i><span>tf-debian</span></div><div class="pure-u-1-5"><i class="tf-desktop tf-48"></i><span>tf-desktop</span></div><div class="pure-u-1-5"><i class="tf-docker tf-48"></i><span>tf-docker</span></div><div class="pure-u-1-5"><i class="tf-dropbox tf-48"></i><span>tf-dropbox</span></div><div class="pure-u-1-5"><i class="tf-empire tf-48"></i><span>tf-empire</span></div><div class="pure-u-1-5"><i class="tf-fedora tf-48"></i><span>tf-fedora</span></div><div class="pure-u-1-5"><i class="tf-firstorder tf-48"></i><span>tf-firstorder</span></div><div class="pure-u-1-5"><i class="tf-freebsd tf-48"></i><span>tf-freebsd</span></div><div class="pure-u-1-5"><i class="tf-gentoo tf-48"></i><span>tf-gentoo</span></div><div class="pure-u-1-5"><i class="tf-git tf-48"></i><span>tf-git</span></div><div class="pure-u-1-5"><i class="tf-github tf-48"></i><span>tf-github</span></div><div class="pure-u-1-5"><i class="tf-hdd tf-48"></i><span>tf-hdd</span></div><div class="pure-u-1-5"><i class="tf-html5 tf-48"></i><span>tf-html5</span></div><div class="pure-u-1-5"><i class="tf-jsfiddle tf-48"></i><span>tf-jsfiddle</span></div><div class="pure-u-1-5"><i class="tf-linuxmint tf-48"></i><span>tf-linuxmint</span></div><div class="pure-u-1-5"><i class="tf-microchip tf-48"></i><span>tf-microchip</span></div><div class="pure-u-1-5"><i class="tf-mobile tf-48"></i><span>tf-mobile</span></div><div class="pure-u-1-5"><i class="tf-mongodb tf-48"></i><span>tf-mongodb</span></div><div class="pure-u-1-5"><i class="tf-nodejs tf-48"></i><span>tf-nodejs</span></div><div class="pure-u-1-5"><i class="tf-npm tf-48"></i><span>tf-npm</span></div><div class="pure-u-1-5"><i class="tf-opensuse tf-48"></i><span>tf-opensuse</span></div><div class="pure-u-1-5"><i class="tf-python tf-48"></i><span>tf-python</span></div><div class="pure-u-1-5"><i class="tf-qrcode tf-48"></i><span>tf-qrcode</span></div><div class="pure-u-1-5"><i class="tf-raspberrypi tf-48"></i><span>tf-raspberrypi</span></div><div class="pure-u-1-5"><i class="tf-rebel tf-48"></i><span>tf-rebel</span></div><div class="pure-u-1-5"><i class="tf-redhat tf-48"></i><span>tf-redhat</span></div><div class="pure-u-1-5"><i class="tf-rocket tf-48"></i><span>tf-rocket</span></div><div class="pure-u-1-5"><i class="tf-slackware tf-48"></i><span>tf-slackware</span></div><div class="pure-u-1-5"><i class="tf-stackexchange tf-48"></i><span>tf-stackexchange</span></div><div class="pure-u-1-5"><i class="tf-stackoverflow tf-48"></i><span>tf-stackoverflow</span></div><div class="pure-u-1-5"><i class="tf-tablet tf-48"></i><span>tf-tablet</span></div><div class="pure-u-1-5"><i class="tf-tux tf-48"></i><span>tf-tux</span></div><div class="pure-u-1-5"><i class="tf-twitter tf-48"></i><span>tf-twitter</span></div><div class="pure-u-1-5"><i class="tf-ubuntu tf-48"></i><span>tf-ubuntu</span></div><div class="pure-u-1-5"><i class="tf-vimeo tf-48"></i><span>tf-vimeo</span></div><div class="pure-u-1-5"><i class="tf-wireless tf-48"></i><span>tf-wireless</span></div><div class="pure-u-1-5"><i class="tf-youtube tf-48"></i><span>tf-youtube</span></div>
</div>
</body>
</html>