[TASK] Use own iconfont set

Reduce overhead in initial load
This commit is contained in:
Xaver Maierhofer 2016-05-22 15:26:16 +02:00
parent 3305d35d00
commit c878e0de97
11 changed files with 124 additions and 6 deletions

Binary file not shown.

View File

@ -0,0 +1,27 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="hopglass" horiz-adv-x="512">
<font-face font-family="hopglass" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph glyph-name="android-add" unicode="&#62151;" d="M416 235l-139 0 0-139-42 0 0 139-139 0 0 42 139 0 0 139 42 0 0-139 139 0z"/>
<glyph glyph-name="chevron-left" unicode="&#61732;" d="M214 256l167 174c4 4 4 11 0 16l-30 30c-4 5-11 5-16 1l-204-213c-2-2-3-5-3-8 0-3 1-6 3-8l204-213c5-4 12-4 16 0l30 31c4 4 4 11 0 16z"/>
<glyph glyph-name="chevron-right" unicode="&#61733;" d="M298 256l-167 174c-4 4-4 11 0 16l30 30c5 5 12 5 16 1l204-213c2-2 3-5 3-8 0-3-1-6-3-8l-204-213c-4-4-11-4-16 0l-30 31c-4 4-4 11 0 16z"/>
<glyph glyph-name="pin" unicode="&#62371;" d="M332 284c-1 0-3 1-4 2-7 4-12 11-14 19l-18 118 0 5c0 7 4 11 10 13 0 1 1 1 2 1 7 4 12 8 12 17 0 20-7 21-18 21l-92 0c-11 0-18-1-18-21 0-9 5-13 12-17 1 0 2 0 2-1 6-3 10-6 10-13l0-5-18-118c-2-8-7-15-14-19-1-1-2-2-4-2-19-10-36-31-36-55 0-16 4-21 15-21l81 0 12-176 8 0 12 176 81 0c12 0 15 5 15 21 0 24-16 45-36 55z"/>
<glyph glyph-name="wifi" unicode="&#62044;" d="M256 416c-80 0-156-30-214-84l-10-10 10-9 32-32 10-10 9 9c45 41 102 64 163 64 60 0 118-23 163-64l9-9 10 10 32 32 10 9-10 10c-58 54-134 84-214 84z m141-160c-38 35-88 54-141 54l-9 0 0 0c-49-2-96-21-132-54l-11-10 10-10 33-32 9-9 10 8c25 22 57 35 90 35 33 0 65-13 91-35l9-8 9 9 33 32 10 10z m-141-160l10 9 53 53 10 10-11 10c-16 11-33 20-62 20-29 0-45-10-61-20l-12-10 11-10 53-53z"/>
<glyph glyph-name="eye" unicode="&#61747;" d="M256 384c-82 0-146-49-224-128 67-68 124-128 224-128 100 0 173 76 224 127-52 58-125 129-224 129z m0-219c-49 0-90 41-90 91 0 50 41 91 90 91 49 0 90-41 90-91 0-50-41-91-90-91z m0 123c0 8 3 15 8 21-3 0-5 0-8 0-29 0-52-24-52-53 0-29 23-53 52-53 29 0 52 24 52 53 0 2 0 5 0 7-6-4-12-7-20-7-18 0-32 14-32 32z"/>
<glyph glyph-name="ios-arrow-thin-left" unicode="&#62421;" d="M190 162c3 3 3 8 0 12l-67 74 285 0c4 0 8 4 8 8 0 4-4 8-8 8l-285 0 67 74c3 4 3 8 0 12-3 3-9 3-12 0 0 0-79-87-80-88 0-1-2-3-2-6 0-3 2-5 2-6 1-1 80-88 80-88 2-1 4-2 6-2 2 0 4 1 6 2z"/>
<glyph glyph-name="ios-arrow-thin-right" unicode="&#62422;" d="M322 162c-3 3-3 8 0 12l67 74-285 0c-4 0-8 4-8 8 0 4 4 8 8 8l285 0-67 74c-3 4-3 8 0 12 3 3 9 3 12 0 0 0 79-87 80-88 0-1 2-3 2-6 0-3-2-5-2-6-1-1-80-88-80-88-2-1-4-2-6-2-2 0-4 1-6 2z"/>
<glyph glyph-name="arrow-up-b" unicode="&#61709;" d="M413 185l-2 2-136 156c-4 6-11 9-19 9-8 0-14-4-19-9l-136-156-2-3c-2-2-3-5-3-8 0-9 7-16 17-16l286 0c10 0 17 7 17 16 0 3-1 6-3 9z"/>
<glyph glyph-name="arrow-down-b" unicode="&#61700;" d="M99 327l2-2 136-156c4-6 11-9 19-9 8 0 15 3 19 9l136 156 2 2c2 3 3 6 3 9 0 9-7 16-17 16l-286 0c-10 0-17-7-17-16 0-3 1-6 3-9z"/>
<glyph glyph-name="android-locate" unicode="&#62185;" d="M256 336c-44 0-80-36-80-80 0-44 36-80 80-80 44 0 80 36 80 80 0 44-36 80-80 80z m191-59c-10 89-81 160-170 170l0 33-42 0 0-33c-89-10-160-81-170-170l-33 0 0-42 33 0c10-89 81-160 170-170l0-33 42 0 0 33c89 10 160 81 170 170l33 0 0 42z m-191-170c-82 0-149 67-149 149 0 82 67 149 149 149 82 0 149-67 149-149 0-82-67-149-149-149z"/>
<glyph glyph-name="android-close" unicode="&#62167;" d="M405 375l-30 30-119-119-119 119-30-30 119-119-119-119 30-30 119 119 119-119 30 30-119 119z"/>
<glyph glyph-name="android-lock" unicode="&#62354;" d="M376 326l-20 0 0 40c0 55-45 100-100 100-55 0-100-45-100-100l0-40-20 0c-22 0-40-18-40-40l0-200c0-22 18-40 40-40l240 0c22 0 40 18 40 40l0 200c0 22-18 40-40 40z m-120-182c-22 0-40 18-40 40 0 22 18 40 40 40 22 0 40-18 40-40 0-22-18-40-40-40z m62 182l-124 0 0 40c0 34 28 62 62 62 34 0 62-28 62-62z"/>
<glyph glyph-name="ios-copy" unicode="&#62492;" d="M144 96l0 304-32 0 0-336 240 0 0 32z m181 352l-165 0 0-336 240 0 0 261z m43-112l-80 0 0 80 16 0 0-64 64 0z"/>
<glyph glyph-name="location" unicode="&#62550;" d="M256 448c-66 0-119-54-119-120 0-115 119-264 119-264 0 0 119 149 119 264 0 66-53 120-119 120z m0-178c-31 0-56 25-56 56 0 32 25 57 56 57 31 0 56-25 56-57 0-31-25-56-56-56z"/>
<glyph glyph-name="android-remove" unicode="&#62196;" d="M96 277l320 0 0-42-320 0z"/>
<glyph glyph-name="ios-person" unicode="&#62590;" d="M363 148c-13 5-31 6-43 9-7 1-17 5-20 9-3 4-1 41-1 41 0 0 6 10 9 18 4 8 7 31 7 31 0 0 7 0 9 12 3 13 7 19 6 28 0 9-5 10-5 10 0 0 5 13 5 42 1 34-25 68-74 68-49 0-75-34-74-68 0-28 5-42 5-42 0 0-5-1-5-10-1-9 3-14 6-27 2-12 9-12 9-12 0 0 4-24 7-32 3-8 9-18 9-18 0 0 2-37-1-41-3-4-13-8-20-9-12-3-30-4-43-9-13-5-53-20-53-52l320 0c0 32-40 47-53 52z"/>
</font></defs></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,92 @@
@font-face {
font-family: "Ionicons";
src: url("fonts/hopglass.woff2") format("woff2"),
url("fonts/hopglass.woff") format("woff"),
url("fonts/hopglass.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
[class^="ion-"]:before,
[class*=" ion-"]:before, .ion-inside {
display: inline-block;
font-family: "ionicons" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-android-add:before {
content: "\f2c7";
}
.ion-chevron-left:before {
content: "\f124";
}
.ion-chevron-right:before {
content: "\f125";
}
.ion-pin:before {
content: "\f3a3";
}
.ion-wifi:before {
content: "\f25c";
}
.ion-eye:before {
content: "\f133";
}
.ion-ios-arrow-thin-left:before {
content: "\f3d5";
}
.ion-ios-arrow-thin-right:before {
content: "\f3d6";
}
.ion-arrow-up-b:before {
content: "\f10d";
}
.ion-arrow-down-b:before {
content: "\f104";
}
.ion-android-locate:before {
content: "\f2e9";
}
.ion-android-close:before {
content: "\f2d7";
}
.ion-android-lock:before {
content: "\f392";
}
.ion-ios-copy:before {
content: "\f41c";
}
.ion-location:before {
content: "\f456";
}
.ion-android-remove:before {
content: "\f2f4";
}
.ion-ios-person:before {
content: "\f47e";
}

View File

@ -11,7 +11,6 @@
"Leaflet.label": "~0.2.1",
"chroma-js": "~0.6.1",
"leaflet": "~0.7.3",
"ionicons": "~2.0.1",
"moment": "~2.9.0",
"requirejs": "~2.1.16",
"tablesort": "https://github.com/tristen/tablesort.git#v3.0.2",

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="hopglass-icons.css">
<link rel="stylesheet" href="roboto-slab-fontface.css">
<link rel="stylesheet" href="roboto-fontface.css">
<link rel="stylesheet" href="style.css">

View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css">
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
<link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="assets/hopglass-icons.css">
<link rel="stylesheet" href="style.css">
<script src="bower_components/es6-shim/es6-shim.min.js"></script>
<script src="bower_components/requirejs/require.js" data-main="app"></script>

View File

@ -86,7 +86,7 @@ define(["map/clientlayer", "map/labelslayer",
onAdd: function () {
var button = L.DomUtil.create("button", "coord-picker");
button.textContent = "\uF2A6";
button.textContent = "\uF3A3";
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().

View File

@ -42,11 +42,11 @@ module.exports = function (grunt) {
},
ionicons: {
src: ["fonts/*",
"css/ionicons.min.css"
"hopglass-icons.css"
],
expand: true,
dest: "build/",
cwd: "bower_components/ionicons/"
cwd: "assets/icons/"
},
leafletImages: {
src: ["images/*"],