Skip to content

Instantly share code, notes, and snippets.

@christopherjenkins

christopherjenkins/index.html

Created October 18, 2012 06:57
Show Gist options
  • Save christopherjenkins/3910226 to your computer and use it in GitHub Desktop.
Save christopherjenkins/3910226 to your computer and use it in GitHub Desktop.
Download ZIP
Social Font-Face HTML
Raw
index.html
<!DOCTYPE html>
<head>
<title>Vector Font Icons</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div>
<h1>Web Symbols Typeface & Examples</h1>
<p>Web Symbols is an Open Font Licensed Font that can be <a href="http://www.justbenicestudio.com/studio/websymbols/">downloaded</a> and uploaded to your server to create some really nifty icons that we can manipulate in even cooler ways.</p>
<p>View the Source and the CSS to get some more information on how to implement these on your projects.</p>
</div>
<div class="WebFont">f t l g s r m y k</div>
<div class="WebFont Red">f t l g s r m y k</div>
<div class="WebFont Green">f t l g s r m y k</div>
<div class="WebFont Blue">f t l g s r m y k</div>
<div>
<p>We can also change the size just by changing the font-size property.</p>
</div>
<div class="WebFont" style="font-size:10px;">f t l g s r m y k</div>
<div class="WebFont Red" style="font-size:10px;">f t l g s r m y k</div>
<div class="WebFont Green" style="font-size:10px;">f t l g s r m y k</div>
<div class="WebFont Blue" style="font-size:10px;">f t l g s r m y k</div>
<div class="WebFont" style="font-size:15px;">f t l g s r m y k</div>
<div class="WebFont Red" style="font-size:15px;">f t l g s r m y k</div>
<div class="WebFont Green" style="font-size:15px;">f t l g s r m y k</div>
<div class="WebFont Blue" style="font-size:15px;">f t l g s r m y k</div>
<div class="WebFont" style="font-size:20px;">f t l g s r m y k</div>
<div class="WebFont Red" style="font-size:20px;">f t l g s r m y k</div>
<div class="WebFont Green" style="font-size:20px;">f t l g s r m y k</div>
<div class="WebFont Blue" style="font-size:20px;">f t l g s r m y k</div>
<div>
<p>Now Let's Kick it up a notch with some transitions! Hover for some Awesomeness!</p>
</div>
<div class="WebFont">
<div class="transition"><a href="#">f</a></div>
<div class="transition"><a href="#">t</a></div>
<div class="transition"><a href="#">l</a></div>
<div class="transition"><a href="#">g</a></div>
<div class="transition"><a href="#">s</a></div>
<div class="transition"><a href="#">r</a></div>
<div class="transition"><a href="#">m</a></div>
<div class="transition"><a href="#">y</a></div>
<div class="transition"><a href="#">k</a></div>
</div><br><br>
<div>
<p>Or We can do something like this!</p>
</div>
<div class="WebFont">
<div class="transition2"><a href="#">f</a></div>
<div class="transition2"><a href="#">t</a></div>
<div class="transition2"><a href="#">l</a></div>
<div class="transition2"><a href="#">g</a></div>
<div class="transition2"><a href="#">s</a></div>
<div class="transition2"><a href="#">r</a></div>
<div class="transition2"><a href="#">m</a></div>
<div class="transition2"><a href="#">y</a></div>
<div class="transition2"><a href="#">k</a></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment