Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Made a few changes to the sample page

  • Loading branch information...
commit 917d0231e92c66dcbc40c20904961a2af936188a 1 parent 31e985a
@zhm authored
Showing with 600 additions and 280 deletions.
  1. +2 −2 README.md
  2. +23 −3 css/symbola.css
  3. +300 −275 index.html
  4. +275 −0 js/bootstrap-tooltip.js
View
4 README.md
@@ -1,4 +1,4 @@
-# Symbola - an icon font for TileMill and Mapnik
+# Symbola - an icon font for maps
This is a font made from public domain SVG's. The designers deserve all of the credit,
I'm just packaging them into fonts.
@@ -73,6 +73,6 @@ To delete the fonts:
make clean
To add new icons, just add more svg files to the `svg` directory. Right now the `generate.py` script is fairly
-brittle, so the file names must be sequential. The font glyphs start at 0x2100 (8448 decimal). So take the glyph
+brittle, so the file names must be sequential. The font glyphs start at 0x2100 (8448 decimal). So take the svg
number and add 8448 to it to get the unicode character required for your icon. Don't forget to convert that number
back to hex if you use the PostgreSQL syntax above.
View
26 css/symbola.css
@@ -1,16 +1,36 @@
@font-face { font-family: Symbola; src: url('../fonts/Symbola.otf'); }
.clear { clear: both; }
+.main {
+ margin-top: 60px;
+}
+
+.downloads {
+ float: right;
+ padding-top: 12px;
+}
+
+.download {
+ font-size: 13pt !important;
+ margin: 0 12px;
+}
+
.icons {
- margin-top: 80px;
+ margin-top: 28px;
}
.icon {
float: left;
font-family: Symbola;
- font-size: 36px;
+ font-size: 48px;
width: 50px;
height: 50px;
- margin: 10px;
+ margin: 20px;
color: black;
+ line-height: 48px !important;
+}
+
+.icon:hover {
+ text-decoration: none !important;
+ color: black !important;
}
View
575 index.html
@@ -1,296 +1,321 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Symbola - An icon font for TileMill and Mapnik</title>
+ <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/underscore.min.js"></script>
+ <script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("[rel=tooltip]").tooltip();
+ });
+ </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" />
- </head>
- <body>
+ </head>
+ <body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="brand" href="#">Symbola - An icon font for TileMill and Mapnik</a>
+ <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">
+ <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 class="icons">
- <div class="icon" title="&amp;#x2100;">&#x2100;</div>
- <div class="icon" title="&amp;#x2101;">&#x2101;</div>
- <div class="icon" title="&amp;#x2102;">&#x2102;</div>
- <div class="icon" title="&amp;#x2103;">&#x2103;</div>
- <div class="icon" title="&amp;#x2104;">&#x2104;</div>
- <div class="icon" title="&amp;#x2105;">&#x2105;</div>
- <div class="icon" title="&amp;#x2106;">&#x2106;</div>
- <div class="icon" title="&amp;#x2107;">&#x2107;</div>
- <div class="icon" title="&amp;#x2108;">&#x2108;</div>
- <div class="icon" title="&amp;#x2109;">&#x2109;</div>
- <div class="icon" title="&amp;#x210a;">&#x210a;</div>
- <div class="icon" title="&amp;#x210b;">&#x210b;</div>
- <div class="icon" title="&amp;#x210c;">&#x210c;</div>
- <div class="icon" title="&amp;#x210d;">&#x210d;</div>
- <div class="icon" title="&amp;#x210e;">&#x210e;</div>
- <div class="icon" title="&amp;#x210f;">&#x210f;</div>
- <div class="icon" title="&amp;#x2110;">&#x2110;</div>
- <div class="icon" title="&amp;#x2111;">&#x2111;</div>
- <div class="icon" title="&amp;#x2112;">&#x2112;</div>
- <div class="icon" title="&amp;#x2113;">&#x2113;</div>
- <div class="icon" title="&amp;#x2114;">&#x2114;</div>
- <div class="icon" title="&amp;#x2115;">&#x2115;</div>
- <div class="icon" title="&amp;#x2116;">&#x2116;</div>
- <div class="icon" title="&amp;#x2117;">&#x2117;</div>
- <div class="icon" title="&amp;#x2118;">&#x2118;</div>
- <div class="icon" title="&amp;#x2119;">&#x2119;</div>
- <div class="icon" title="&amp;#x211a;">&#x211a;</div>
- <div class="icon" title="&amp;#x211b;">&#x211b;</div>
- <div class="icon" title="&amp;#x211c;">&#x211c;</div>
- <div class="icon" title="&amp;#x211d;">&#x211d;</div>
- <div class="icon" title="&amp;#x211e;">&#x211e;</div>
- <div class="icon" title="&amp;#x211f;">&#x211f;</div>
- <div class="icon" title="&amp;#x2120;">&#x2120;</div>
- <div class="icon" title="&amp;#x2121;">&#x2121;</div>
- <div class="icon" title="&amp;#x2122;">&#x2122;</div>
- <div class="icon" title="&amp;#x2123;">&#x2123;</div>
- <div class="icon" title="&amp;#x2124;">&#x2124;</div>
- <div class="icon" title="&amp;#x2125;">&#x2125;</div>
- <div class="icon" title="&amp;#x2126;">&#x2126;</div>
- <div class="icon" title="&amp;#x2127;">&#x2127;</div>
- <div class="icon" title="&amp;#x2128;">&#x2128;</div>
- <div class="icon" title="&amp;#x2129;">&#x2129;</div>
- <div class="icon" title="&amp;#x212a;">&#x212a;</div>
- <div class="icon" title="&amp;#x212b;">&#x212b;</div>
- <div class="icon" title="&amp;#x212c;">&#x212c;</div>
- <div class="icon" title="&amp;#x212d;">&#x212d;</div>
- <div class="icon" title="&amp;#x212e;">&#x212e;</div>
- <div class="icon" title="&amp;#x212f;">&#x212f;</div>
- <div class="icon" title="&amp;#x2130;">&#x2130;</div>
- <div class="icon" title="&amp;#x2131;">&#x2131;</div>
- <div class="icon" title="&amp;#x2132;">&#x2132;</div>
- <div class="icon" title="&amp;#x2133;">&#x2133;</div>
- <div class="icon" title="&amp;#x2134;">&#x2134;</div>
- <div class="icon" title="&amp;#x2135;">&#x2135;</div>
- <div class="icon" title="&amp;#x2136;">&#x2136;</div>
- <div class="icon" title="&amp;#x2137;">&#x2137;</div>
- <div class="icon" title="&amp;#x2138;">&#x2138;</div>
- <div class="icon" title="&amp;#x2139;">&#x2139;</div>
- <div class="icon" title="&amp;#x213a;">&#x213a;</div>
- <div class="icon" title="&amp;#x213b;">&#x213b;</div>
- <div class="icon" title="&amp;#x213c;">&#x213c;</div>
- <div class="icon" title="&amp;#x213d;">&#x213d;</div>
- <div class="icon" title="&amp;#x213e;">&#x213e;</div>
- <div class="icon" title="&amp;#x213f;">&#x213f;</div>
- <div class="icon" title="&amp;#x2140;">&#x2140;</div>
- <div class="icon" title="&amp;#x2141;">&#x2141;</div>
- <div class="icon" title="&amp;#x2142;">&#x2142;</div>
- <div class="icon" title="&amp;#x2143;">&#x2143;</div>
- <div class="icon" title="&amp;#x2144;">&#x2144;</div>
- <div class="icon" title="&amp;#x2145;">&#x2145;</div>
- <div class="icon" title="&amp;#x2146;">&#x2146;</div>
- <div class="icon" title="&amp;#x2147;">&#x2147;</div>
- <div class="icon" title="&amp;#x2148;">&#x2148;</div>
- <div class="icon" title="&amp;#x2149;">&#x2149;</div>
- <div class="icon" title="&amp;#x214a;">&#x214a;</div>
- <div class="icon" title="&amp;#x214b;">&#x214b;</div>
- <div class="icon" title="&amp;#x214c;">&#x214c;</div>
- <div class="icon" title="&amp;#x214d;">&#x214d;</div>
- <div class="icon" title="&amp;#x214e;">&#x214e;</div>
- <div class="icon" title="&amp;#x214f;">&#x214f;</div>
- <div class="icon" title="&amp;#x2150;">&#x2150;</div>
- <div class="icon" title="&amp;#x2151;">&#x2151;</div>
- <div class="icon" title="&amp;#x2152;">&#x2152;</div>
- <div class="icon" title="&amp;#x2153;">&#x2153;</div>
- <div class="icon" title="&amp;#x2154;">&#x2154;</div>
- <div class="icon" title="&amp;#x2155;">&#x2155;</div>
- <div class="icon" title="&amp;#x2156;">&#x2156;</div>
- <div class="icon" title="&amp;#x2157;">&#x2157;</div>
- <div class="icon" title="&amp;#x2158;">&#x2158;</div>
- <div class="icon" title="&amp;#x2159;">&#x2159;</div>
- <div class="icon" title="&amp;#x215a;">&#x215a;</div>
- <div class="icon" title="&amp;#x215b;">&#x215b;</div>
- <div class="icon" title="&amp;#x215c;">&#x215c;</div>
- <div class="icon" title="&amp;#x215d;">&#x215d;</div>
- <div class="icon" title="&amp;#x215e;">&#x215e;</div>
- <div class="icon" title="&amp;#x215f;">&#x215f;</div>
- <div class="icon" title="&amp;#x2160;">&#x2160;</div>
- <div class="icon" title="&amp;#x2161;">&#x2161;</div>
- <div class="icon" title="&amp;#x2162;">&#x2162;</div>
- <div class="icon" title="&amp;#x2163;">&#x2163;</div>
- <div class="icon" title="&amp;#x2164;">&#x2164;</div>
- <div class="icon" title="&amp;#x2165;">&#x2165;</div>
- <div class="icon" title="&amp;#x2166;">&#x2166;</div>
- <div class="icon" title="&amp;#x2167;">&#x2167;</div>
- <div class="icon" title="&amp;#x2168;">&#x2168;</div>
- <div class="icon" title="&amp;#x2169;">&#x2169;</div>
- <div class="icon" title="&amp;#x216a;">&#x216a;</div>
- <div class="icon" title="&amp;#x216b;">&#x216b;</div>
- <div class="icon" title="&amp;#x216c;">&#x216c;</div>
- <div class="icon" title="&amp;#x216d;">&#x216d;</div>
- <div class="icon" title="&amp;#x216e;">&#x216e;</div>
- <div class="icon" title="&amp;#x216f;">&#x216f;</div>
- <div class="icon" title="&amp;#x2170;">&#x2170;</div>
- <div class="icon" title="&amp;#x2171;">&#x2171;</div>
- <div class="icon" title="&amp;#x2172;">&#x2172;</div>
- <div class="icon" title="&amp;#x2173;">&#x2173;</div>
- <div class="icon" title="&amp;#x2174;">&#x2174;</div>
- <div class="icon" title="&amp;#x2175;">&#x2175;</div>
- <div class="icon" title="&amp;#x2176;">&#x2176;</div>
- <div class="icon" title="&amp;#x2177;">&#x2177;</div>
- <div class="icon" title="&amp;#x2178;">&#x2178;</div>
- <div class="icon" title="&amp;#x2179;">&#x2179;</div>
- <div class="icon" title="&amp;#x217a;">&#x217a;</div>
- <div class="icon" title="&amp;#x217b;">&#x217b;</div>
- <div class="icon" title="&amp;#x217c;">&#x217c;</div>
- <div class="icon" title="&amp;#x217d;">&#x217d;</div>
- <div class="icon" title="&amp;#x217e;">&#x217e;</div>
- <div class="icon" title="&amp;#x217f;">&#x217f;</div>
- <div class="icon" title="&amp;#x2180;">&#x2180;</div>
- <div class="icon" title="&amp;#x2181;">&#x2181;</div>
- <div class="icon" title="&amp;#x2182;">&#x2182;</div>
- <div class="icon" title="&amp;#x2183;">&#x2183;</div>
- <div class="icon" title="&amp;#x2184;">&#x2184;</div>
- <div class="icon" title="&amp;#x2185;">&#x2185;</div>
- <div class="icon" title="&amp;#x2186;">&#x2186;</div>
- <div class="icon" title="&amp;#x2187;">&#x2187;</div>
- <div class="icon" title="&amp;#x2188;">&#x2188;</div>
- <div class="icon" title="&amp;#x2189;">&#x2189;</div>
- <div class="icon" title="&amp;#x218a;">&#x218a;</div>
- <div class="icon" title="&amp;#x218b;">&#x218b;</div>
- <div class="icon" title="&amp;#x218c;">&#x218c;</div>
- <div class="icon" title="&amp;#x218d;">&#x218d;</div>
- <div class="icon" title="&amp;#x218e;">&#x218e;</div>
- <div class="icon" title="&amp;#x218f;">&#x218f;</div>
- <div class="icon" title="&amp;#x2190;">&#x2190;</div>
- <div class="icon" title="&amp;#x2191;">&#x2191;</div>
- <div class="icon" title="&amp;#x2192;">&#x2192;</div>
- <div class="icon" title="&amp;#x2193;">&#x2193;</div>
- <div class="icon" title="&amp;#x2194;">&#x2194;</div>
- <div class="icon" title="&amp;#x2195;">&#x2195;</div>
- <div class="icon" title="&amp;#x2196;">&#x2196;</div>
- <div class="icon" title="&amp;#x2197;">&#x2197;</div>
- <div class="icon" title="&amp;#x2198;">&#x2198;</div>
- <div class="icon" title="&amp;#x2199;">&#x2199;</div>
- <div class="icon" title="&amp;#x219a;">&#x219a;</div>
- <div class="icon" title="&amp;#x219b;">&#x219b;</div>
- <div class="icon" title="&amp;#x219c;">&#x219c;</div>
- <div class="icon" title="&amp;#x219d;">&#x219d;</div>
- <div class="icon" title="&amp;#x219e;">&#x219e;</div>
- <div class="icon" title="&amp;#x219f;">&#x219f;</div>
- <div class="icon" title="&amp;#x21a0;">&#x21a0;</div>
- <div class="icon" title="&amp;#x21a1;">&#x21a1;</div>
- <div class="icon" title="&amp;#x21a2;">&#x21a2;</div>
- <div class="icon" title="&amp;#x21a3;">&#x21a3;</div>
- <div class="icon" title="&amp;#x21a4;">&#x21a4;</div>
- <div class="icon" title="&amp;#x21a5;">&#x21a5;</div>
- <div class="icon" title="&amp;#x21a6;">&#x21a6;</div>
- <div class="icon" title="&amp;#x21a7;">&#x21a7;</div>
- <div class="icon" title="&amp;#x21a8;">&#x21a8;</div>
- <div class="icon" title="&amp;#x21a9;">&#x21a9;</div>
- <div class="icon" title="&amp;#x21aa;">&#x21aa;</div>
- <div class="icon" title="&amp;#x21ab;">&#x21ab;</div>
- <div class="icon" title="&amp;#x21ac;">&#x21ac;</div>
- <div class="icon" title="&amp;#x21ad;">&#x21ad;</div>
- <div class="icon" title="&amp;#x21ae;">&#x21ae;</div>
- <div class="icon" title="&amp;#x21af;">&#x21af;</div>
- <div class="icon" title="&amp;#x21b0;">&#x21b0;</div>
- <div class="icon" title="&amp;#x21b1;">&#x21b1;</div>
- <div class="icon" title="&amp;#x21b2;">&#x21b2;</div>
- <div class="icon" title="&amp;#x21b3;">&#x21b3;</div>
- <div class="icon" title="&amp;#x21b4;">&#x21b4;</div>
- <div class="icon" title="&amp;#x21b5;">&#x21b5;</div>
- <div class="icon" title="&amp;#x21b6;">&#x21b6;</div>
- <div class="icon" title="&amp;#x21b7;">&#x21b7;</div>
- <div class="icon" title="&amp;#x21b8;">&#x21b8;</div>
- <div class="icon" title="&amp;#x21b9;">&#x21b9;</div>
- <div class="icon" title="&amp;#x21ba;">&#x21ba;</div>
- <div class="icon" title="&amp;#x21bb;">&#x21bb;</div>
- <div class="icon" title="&amp;#x21bc;">&#x21bc;</div>
- <div class="icon" title="&amp;#x21bd;">&#x21bd;</div>
- <div class="icon" title="&amp;#x21be;">&#x21be;</div>
- <div class="icon" title="&amp;#x21bf;">&#x21bf;</div>
- <div class="icon" title="&amp;#x21c0;">&#x21c0;</div>
- <div class="icon" title="&amp;#x21c1;">&#x21c1;</div>
- <div class="icon" title="&amp;#x21c2;">&#x21c2;</div>
- <div class="icon" title="&amp;#x21c3;">&#x21c3;</div>
- <div class="icon" title="&amp;#x21c4;">&#x21c4;</div>
- <div class="icon" title="&amp;#x21c5;">&#x21c5;</div>
- <div class="icon" title="&amp;#x21c6;">&#x21c6;</div>
- <div class="icon" title="&amp;#x21c7;">&#x21c7;</div>
- <div class="icon" title="&amp;#x21c8;">&#x21c8;</div>
- <div class="icon" title="&amp;#x21c9;">&#x21c9;</div>
- <div class="icon" title="&amp;#x21ca;">&#x21ca;</div>
- <div class="icon" title="&amp;#x21cb;">&#x21cb;</div>
- <div class="icon" title="&amp;#x21cc;">&#x21cc;</div>
- <div class="icon" title="&amp;#x21cd;">&#x21cd;</div>
- <div class="icon" title="&amp;#x21ce;">&#x21ce;</div>
- <div class="icon" title="&amp;#x21cf;">&#x21cf;</div>
- <div class="icon" title="&amp;#x21d0;">&#x21d0;</div>
- <div class="icon" title="&amp;#x21d1;">&#x21d1;</div>
- <div class="icon" title="&amp;#x21d2;">&#x21d2;</div>
- <div class="icon" title="&amp;#x21d3;">&#x21d3;</div>
- <div class="icon" title="&amp;#x21d4;">&#x21d4;</div>
- <div class="icon" title="&amp;#x21d5;">&#x21d5;</div>
- <div class="icon" title="&amp;#x21d6;">&#x21d6;</div>
- <div class="icon" title="&amp;#x21d7;">&#x21d7;</div>
- <div class="icon" title="&amp;#x21d8;">&#x21d8;</div>
- <div class="icon" title="&amp;#x21d9;">&#x21d9;</div>
- <div class="icon" title="&amp;#x21da;">&#x21da;</div>
- <div class="icon" title="&amp;#x21db;">&#x21db;</div>
- <div class="icon" title="&amp;#x21dc;">&#x21dc;</div>
- <div class="icon" title="&amp;#x21dd;">&#x21dd;</div>
- <div class="icon" title="&amp;#x21de;">&#x21de;</div>
- <div class="icon" title="&amp;#x21df;">&#x21df;</div>
- <div class="icon" title="&amp;#x21e0;">&#x21e0;</div>
- <div class="icon" title="&amp;#x21e1;">&#x21e1;</div>
- <div class="icon" title="&amp;#x21e2;">&#x21e2;</div>
- <div class="icon" title="&amp;#x21e3;">&#x21e3;</div>
- <div class="icon" title="&amp;#x21e4;">&#x21e4;</div>
- <div class="icon" title="&amp;#x21e5;">&#x21e5;</div>
- <div class="icon" title="&amp;#x21e6;">&#x21e6;</div>
- <div class="icon" title="&amp;#x21e7;">&#x21e7;</div>
- <div class="icon" title="&amp;#x21e8;">&#x21e8;</div>
- <div class="icon" title="&amp;#x21e9;">&#x21e9;</div>
- <div class="icon" title="&amp;#x21ea;">&#x21ea;</div>
- <div class="icon" title="&amp;#x21eb;">&#x21eb;</div>
- <div class="icon" title="&amp;#x21ec;">&#x21ec;</div>
- <div class="icon" title="&amp;#x21ed;">&#x21ed;</div>
- <div class="icon" title="&amp;#x21ee;">&#x21ee;</div>
- <div class="icon" title="&amp;#x21ef;">&#x21ef;</div>
- <div class="icon" title="&amp;#x21f0;">&#x21f0;</div>
- <div class="icon" title="&amp;#x21f1;">&#x21f1;</div>
- <div class="icon" title="&amp;#x21f2;">&#x21f2;</div>
- <div class="icon" title="&amp;#x21f3;">&#x21f3;</div>
- <div class="icon" title="&amp;#x21f4;">&#x21f4;</div>
- <div class="icon" title="&amp;#x21f5;">&#x21f5;</div>
- <div class="icon" title="&amp;#x21f6;">&#x21f6;</div>
- <div class="icon" title="&amp;#x21f7;">&#x21f7;</div>
- <div class="icon" title="&amp;#x21f8;">&#x21f8;</div>
- <div class="icon" title="&amp;#x21f9;">&#x21f9;</div>
- <div class="icon" title="&amp;#x21fa;">&#x21fa;</div>
- <div class="icon" title="&amp;#x21fb;">&#x21fb;</div>
- <div class="icon" title="&amp;#x21fc;">&#x21fc;</div>
- <div class="icon" title="&amp;#x21fd;">&#x21fd;</div>
- <div class="icon" title="&amp;#x21fe;">&#x21fe;</div>
- <div class="icon" title="&amp;#x21ff;">&#x21ff;</div>
- <div class="icon" title="&amp;#x2200;">&#x2200;</div>
- <div class="icon" title="&amp;#x2201;">&#x2201;</div>
- <div class="icon" title="&amp;#x2202;">&#x2202;</div>
- <div class="icon" title="&amp;#x2203;">&#x2203;</div>
- <div class="icon" title="&amp;#x2204;">&#x2204;</div>
- <div class="icon" title="&amp;#x2205;">&#x2205;</div>
- <div class="icon" title="&amp;#x2206;">&#x2206;</div>
- <div class="icon" title="&amp;#x2207;">&#x2207;</div>
- <div class="icon" title="&amp;#x2208;">&#x2208;</div>
- <div class="icon" title="&amp;#x2209;">&#x2209;</div>
- <div class="icon" title="&amp;#x220a;">&#x220a;</div>
+ <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>
+ </body>
</html>
View
275 js/bootstrap-tooltip.js
@@ -0,0 +1,275 @@
+/* ===========================================================
+ * bootstrap-tooltip.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#tooltips
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+ "use strict"; // jshint ;_;
+
+
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+ * =============================== */
+
+ var Tooltip = function (element, options) {
+ this.init('tooltip', element, options)
+ }
+
+ Tooltip.prototype = {
+
+ constructor: Tooltip
+
+ , init: function (type, element, options) {
+ var eventIn
+ , eventOut
+
+ this.type = type
+ this.$element = $(element)
+ this.options = this.getOptions(options)
+ this.enabled = true
+
+ if (this.options.trigger != 'manual') {
+ eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
+ eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
+ this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
+ this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
+ }
+
+ this.options.selector ?
+ (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+ this.fixTitle()
+ }
+
+ , getOptions: function (options) {
+ options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
+
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
+ return options
+ }
+
+ , enter: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (!self.options.delay || !self.options.delay.show) return self.show()
+
+ clearTimeout(this.timeout)
+ self.hoverState = 'in'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'in') self.show()
+ }, self.options.delay.show)
+ }
+
+ , leave: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (this.timeout) clearTimeout(this.timeout)
+ if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+ self.hoverState = 'out'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'out') self.hide()
+ }, self.options.delay.hide)
+ }
+
+ , show: function () {
+ var $tip
+ , inside
+ , pos
+ , actualWidth
+ , actualHeight
+ , placement
+ , tp
+
+ if (this.hasContent() && this.enabled) {
+ $tip = this.tip()
+ this.setContent()
+
+ if (this.options.animation) {
+ $tip.addClass('fade')
+ }
+
+ placement = typeof this.options.placement == 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ inside = /in/.test(placement)
+
+ $tip
+ .remove()
+ .css({ top: 0, left: 0, display: 'block' })
+ .appendTo(inside ? this.$element : document.body)
+
+ pos = this.getPosition(inside)
+
+ actualWidth = $tip[0].offsetWidth
+ actualHeight = $tip[0].offsetHeight
+
+ switch (inside ? placement.split(' ')[1] : placement) {
+ case 'bottom':
+ tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'top':
+ tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'left':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
+ break
+ case 'right':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
+ break
+ }
+
+ $tip
+ .css(tp)
+ .addClass(placement)
+ .addClass('in')
+ }
+ }
+
+ , isHTML: function(text) {
+ // html string detection logic adapted from jQuery
+ return typeof text != 'string'
+ || ( text.charAt(0) === "<"
+ && text.charAt( text.length - 1 ) === ">"
+ && text.length >= 3
+ ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
+ }
+
+ , setContent: function () {
+ var $tip = this.tip()
+ , title = this.getTitle()
+
+ $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
+ $tip.removeClass('fade in top bottom left right')
+ }
+
+ , hide: function () {
+ var that = this
+ , $tip = this.tip()
+
+ $tip.removeClass('in')
+
+ function removeWithAnimation() {
+ var timeout = setTimeout(function () {
+ $tip.off($.support.transition.end).remove()
+ }, 500)
+
+ $tip.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ $tip.remove()
+ })
+ }
+
+ $.support.transition && this.$tip.hasClass('fade') ?
+ removeWithAnimation() :
+ $tip.remove()
+ }
+
+ , fixTitle: function () {
+ var $e = this.$element
+ if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+ $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+ }
+ }
+
+ , hasContent: function () {
+ return this.getTitle()
+ }
+
+ , getPosition: function (inside) {
+ return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+ width: this.$element[0].offsetWidth
+ , height: this.$element[0].offsetHeight
+ })
+ }
+
+ , getTitle: function () {
+ var title
+ , $e = this.$element
+ , o = this.options
+
+ title = $e.attr('data-original-title')
+ || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
+
+ return title
+ }
+
+ , tip: function () {
+ return this.$tip = this.$tip || $(this.options.template)
+ }
+
+ , validate: function () {
+ if (!this.$element[0].parentNode) {
+ this.hide()
+ this.$element = null
+ this.options = null
+ }
+ }
+
+ , enable: function () {
+ this.enabled = true
+ }
+
+ , disable: function () {
+ this.enabled = false
+ }
+
+ , toggleEnabled: function () {
+ this.enabled = !this.enabled
+ }
+
+ , toggle: function () {
+ this[this.tip().hasClass('in') ? 'hide' : 'show']()
+ }
+
+ }
+
+
+ /* TOOLTIP PLUGIN DEFINITION
+ * ========================= */
+
+ $.fn.tooltip = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('tooltip')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.tooltip.Constructor = Tooltip
+
+ $.fn.tooltip.defaults = {
+ animation: true
+ , placement: 'top'
+ , selector: false
+ , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+ , trigger: 'hover'
+ , title: ''
+ , delay: 0
+ }
+
+}(window.jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.