Permalink
Find file
d5dd32c Jul 11, 2012
346 lines (338 sloc) 24.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Symbola - An icon font for maps</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(function() {
$("[rel=tooltip]").tooltip();
$('.font-size').slider({
value: (60/500) * 100,
slide: function(event, ui) {
var minFontSize = 3;
var maxFontSize = 500;
var fontSize = Math.round(((ui.value / 100) * (maxFontSize - minFontSize)) + minFontSize);
$('.icon').css('font-size', fontSize + 'px');
$('.icon').css('width', (fontSize + 4) + 'px');
$('.icon').css('height', (fontSize + 4) + 'px');
$('.icon').css('line-height', fontSize + 'px');
$('.font-size-label').html('Change the font size: ' + fontSize + 'px');
}
});
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/symbola.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jquery-ui-1.8.21.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><strong>Symbola</strong> - an icon font for maps</a>
<div class="downloads">
<a class="download" href="https://github.com/zhm/symbola">View on GitHub</a>
<a class="download" href="fonts/Symbola.otf">Download OTF</a>
<a class="download" href="fonts/Symbola.ttf">Download TTF</a>
</div>
</div>
</div>
</div>
<div class="container main">
<p class="lead">
This font allows you to manage symbology in the datasource and helps reduce duplication
in your carto/mapnik stylesheet. Using a font for the icons also lets you easily apply all of
the standard Mapnik text effects like <code>text-fill</code> to change the icon color in TileMill.
</p>
<p class="lead">
The is a font made from public domain SVG's. The designers deserve all of the credit.
I'm just packaging the SVG's into fonts. It's derived from the MapBox <a href="https://github.com/mapbox/maki/">Maki</a>,
the <a href="http://thenounproject.com/collections/aiga/">AIGA</a>, and the <a href="http://thenounproject.com/collections/national-park-service/">National Park Service</a> icon sets.
</p>
<p class="lead">
Check out the <a href="https://github.com/zhm/symbola/blob/master/README.md">README</a> for usage instructions. It also includes
instructions on how to add your own icons to it and create your own version of the font.
</p>
<div>
<p class="lead"><strong class="font-size-label">Change the font size: 60px</strong></p>
<div class="font-size"></div>
</div>
<div class="icons">
<a class="icon" href="#" rel="tooltip" title="&amp;#x2100;">&#x2100;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2101;">&#x2101;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2102;">&#x2102;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2103;">&#x2103;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2104;">&#x2104;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2105;">&#x2105;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2106;">&#x2106;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2107;">&#x2107;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2108;">&#x2108;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2109;">&#x2109;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210a;">&#x210a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210b;">&#x210b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210c;">&#x210c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210d;">&#x210d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210e;">&#x210e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x210f;">&#x210f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2110;">&#x2110;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2111;">&#x2111;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2112;">&#x2112;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2113;">&#x2113;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2114;">&#x2114;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2115;">&#x2115;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2116;">&#x2116;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2117;">&#x2117;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2118;">&#x2118;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2119;">&#x2119;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211a;">&#x211a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211b;">&#x211b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211c;">&#x211c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211d;">&#x211d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211e;">&#x211e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x211f;">&#x211f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2120;">&#x2120;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2121;">&#x2121;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2122;">&#x2122;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2123;">&#x2123;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2124;">&#x2124;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2125;">&#x2125;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2126;">&#x2126;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2127;">&#x2127;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2128;">&#x2128;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2129;">&#x2129;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212a;">&#x212a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212b;">&#x212b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212c;">&#x212c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212d;">&#x212d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212e;">&#x212e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x212f;">&#x212f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2130;">&#x2130;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2131;">&#x2131;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2132;">&#x2132;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2133;">&#x2133;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2134;">&#x2134;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2135;">&#x2135;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2136;">&#x2136;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2137;">&#x2137;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2138;">&#x2138;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2139;">&#x2139;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213a;">&#x213a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213b;">&#x213b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213c;">&#x213c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213d;">&#x213d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213e;">&#x213e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x213f;">&#x213f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2140;">&#x2140;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2141;">&#x2141;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2142;">&#x2142;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2143;">&#x2143;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2144;">&#x2144;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2145;">&#x2145;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2146;">&#x2146;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2147;">&#x2147;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2148;">&#x2148;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2149;">&#x2149;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214a;">&#x214a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214b;">&#x214b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214c;">&#x214c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214d;">&#x214d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214e;">&#x214e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x214f;">&#x214f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2150;">&#x2150;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2151;">&#x2151;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2152;">&#x2152;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2153;">&#x2153;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2154;">&#x2154;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2155;">&#x2155;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2156;">&#x2156;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2157;">&#x2157;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2158;">&#x2158;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2159;">&#x2159;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215a;">&#x215a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215b;">&#x215b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215c;">&#x215c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215d;">&#x215d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215e;">&#x215e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x215f;">&#x215f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2160;">&#x2160;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2161;">&#x2161;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2162;">&#x2162;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2163;">&#x2163;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2164;">&#x2164;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2165;">&#x2165;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2166;">&#x2166;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2167;">&#x2167;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2168;">&#x2168;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2169;">&#x2169;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216a;">&#x216a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216b;">&#x216b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216c;">&#x216c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216d;">&#x216d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216e;">&#x216e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x216f;">&#x216f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2170;">&#x2170;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2171;">&#x2171;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2172;">&#x2172;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2173;">&#x2173;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2174;">&#x2174;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2175;">&#x2175;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2176;">&#x2176;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2177;">&#x2177;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2178;">&#x2178;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2179;">&#x2179;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217a;">&#x217a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217b;">&#x217b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217c;">&#x217c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217d;">&#x217d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217e;">&#x217e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x217f;">&#x217f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2180;">&#x2180;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2181;">&#x2181;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2182;">&#x2182;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2183;">&#x2183;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2184;">&#x2184;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2185;">&#x2185;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2186;">&#x2186;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2187;">&#x2187;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2188;">&#x2188;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2189;">&#x2189;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218a;">&#x218a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218b;">&#x218b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218c;">&#x218c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218d;">&#x218d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218e;">&#x218e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x218f;">&#x218f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2190;">&#x2190;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2191;">&#x2191;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2192;">&#x2192;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2193;">&#x2193;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2194;">&#x2194;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2195;">&#x2195;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2196;">&#x2196;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2197;">&#x2197;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2198;">&#x2198;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2199;">&#x2199;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219a;">&#x219a;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219b;">&#x219b;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219c;">&#x219c;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219d;">&#x219d;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219e;">&#x219e;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x219f;">&#x219f;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a0;">&#x21a0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a1;">&#x21a1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a2;">&#x21a2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a3;">&#x21a3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a4;">&#x21a4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a5;">&#x21a5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a6;">&#x21a6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a7;">&#x21a7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a8;">&#x21a8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21a9;">&#x21a9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21aa;">&#x21aa;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ab;">&#x21ab;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ac;">&#x21ac;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ad;">&#x21ad;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ae;">&#x21ae;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21af;">&#x21af;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b0;">&#x21b0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b1;">&#x21b1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b2;">&#x21b2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b3;">&#x21b3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b4;">&#x21b4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b5;">&#x21b5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b6;">&#x21b6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b7;">&#x21b7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b8;">&#x21b8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21b9;">&#x21b9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ba;">&#x21ba;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21bb;">&#x21bb;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21bc;">&#x21bc;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21bd;">&#x21bd;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21be;">&#x21be;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21bf;">&#x21bf;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c0;">&#x21c0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c1;">&#x21c1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c2;">&#x21c2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c3;">&#x21c3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c4;">&#x21c4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c5;">&#x21c5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c6;">&#x21c6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c7;">&#x21c7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c8;">&#x21c8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21c9;">&#x21c9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ca;">&#x21ca;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21cb;">&#x21cb;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21cc;">&#x21cc;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21cd;">&#x21cd;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ce;">&#x21ce;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21cf;">&#x21cf;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d0;">&#x21d0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d1;">&#x21d1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d2;">&#x21d2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d3;">&#x21d3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d4;">&#x21d4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d5;">&#x21d5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d6;">&#x21d6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d7;">&#x21d7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d8;">&#x21d8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21d9;">&#x21d9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21da;">&#x21da;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21db;">&#x21db;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21dc;">&#x21dc;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21dd;">&#x21dd;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21de;">&#x21de;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21df;">&#x21df;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e0;">&#x21e0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e1;">&#x21e1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e2;">&#x21e2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e3;">&#x21e3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e4;">&#x21e4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e5;">&#x21e5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e6;">&#x21e6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e7;">&#x21e7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e8;">&#x21e8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21e9;">&#x21e9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ea;">&#x21ea;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21eb;">&#x21eb;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ec;">&#x21ec;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ed;">&#x21ed;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ee;">&#x21ee;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ef;">&#x21ef;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f0;">&#x21f0;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f1;">&#x21f1;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f2;">&#x21f2;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f3;">&#x21f3;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f4;">&#x21f4;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f5;">&#x21f5;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f6;">&#x21f6;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f7;">&#x21f7;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f8;">&#x21f8;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21f9;">&#x21f9;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21fa;">&#x21fa;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21fb;">&#x21fb;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21fc;">&#x21fc;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21fd;">&#x21fd;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21fe;">&#x21fe;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x21ff;">&#x21ff;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2200;">&#x2200;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2201;">&#x2201;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2202;">&#x2202;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2203;">&#x2203;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2204;">&#x2204;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2205;">&#x2205;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2206;">&#x2206;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2207;">&#x2207;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2208;">&#x2208;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x2209;">&#x2209;</a>
<a class="icon" href="#" rel="tooltip" title="&amp;#x220a;">&#x220a;</a>
</div>
</div>
</body>
</html>