Permalink
Browse files

Font size slider.

  • Loading branch information...
1 parent 917d023 commit d5dd32c140b61c9218a0c4b4758c8b9016891514 @zhm committed Jul 11, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -22,15 +22,19 @@
.icon {
float: left;
font-family: Symbola;
- font-size: 48px;
- width: 50px;
- height: 50px;
+ font-size: 60px;
+ width: 64px;
+ height: 64px;
margin: 20px;
color: black;
- line-height: 48px !important;
+ line-height: 56px !important;
}
.icon:hover {
text-decoration: none !important;
color: black !important;
}
+
+.font-size {
+ width: 260px;
+}
View
@@ -1,6 +1,6 @@
StartFontMetrics 2.0
Comment Generated by FontForge 20110222
-Comment Creation Date: Tue Jul 10 23:40:38 2012
+Comment Creation Date: Wed Jul 11 13:07:35 2012
FontName Symbola
FullName Symbola
FamilyName Symbola
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -13,6 +13,7 @@
ymin = glyph.boundingBox()[1]
glyph.transform([1, 0, 0, 1, 0, -ymin])
+ glyph.autoHint()
glyph.left_side_bearing = glyph.right_side_bearing = 10
View
@@ -4,18 +4,37 @@
<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();
+ $("[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">
@@ -45,6 +64,10 @@
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>
View

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit d5dd32c

Please sign in to comment.