Add custom icon font for front-end use (#212)

assets/fonts/kolidecons/kolidecons.svg

@@ -0,0 +1,24 @@
+<?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 IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="username" horiz-adv-x="768" d="M622.272 520.832l-4.672 2.368 1.472 2.88c1.6 3.2 2.816 6.592 4.224 9.792 1.344 2.88 2.56 5.696 3.776 8.64 5.44 13.248 9.792 26.944 12.928 41.152 0.576 2.432 0.896 4.928 1.344 7.36 2.816 15.296 4.8 30.912 4.8 46.976 0 141.44-115.968 256-259.072 256s-259.072-114.56-259.072-256c0-18.688 2.304-36.8 6.144-54.336 1.088-5.12 3.2-9.856 4.672-14.848 3.52-12.416 7.424-24.704 12.8-36.288 0.704-1.536 0.96-3.328 1.728-4.928l1.92-4.032-6.4-3.2c-90.624-46.848-148.864-120.064-148.864-202.368 0-141.44 171.904-256 384-256s384 114.56 384 256c0 81.344-57.024 153.92-145.728 200.832zM387.072 832c107.84 0 195.072-86.144 195.072-192 0-14.208-1.856-28.224-4.992-42.048-1.024-4.288-2.688-8.32-3.968-12.544-2.816-9.152-5.952-18.112-10.048-26.816-31.168-65.088-97.984-110.592-176.064-110.592-78.528 0-145.6 45.888-176.512 111.488-4.032 8.576-7.040 17.536-9.792 26.624-1.28 4.16-2.944 8.064-3.904 12.352-3.008 13.504-4.864 27.392-4.864 41.536 0 105.856 87.168 192 195.072 192zM384 128c-180.928 0-320 92.736-320 192 0 54.848 42.688 110.080 119.616 148.288l8.832 4.352c47.488-53.888 116.608-88.64 194.624-88.64 77.056 0 145.408 33.856 192.896 86.656l8.512-4.352c74.368-38.144 115.52-92.544 115.52-146.304 0-99.264-139.072-192-320-192z" />
+<glyph unicode="&#xe901;" glyph-name="hosts" d="M46.545 913.455v-279.273h930.909v279.273h-930.909zM791.273 820.364h93.091v-93.091h-93.091v93.091zM139.636 820.364h512v-93.091h-512v93.091zM46.545 587.636v-279.273h930.909v279.273h-930.909zM791.273 494.545h93.091v-93.091h-93.091v93.091zM139.636 494.545h512v-93.091h-512v93.091zM46.545 261.818v-279.273h930.909v279.273h-930.909zM791.273 168.727h93.091v-93.091h-93.091v93.091zM139.636 168.727h512v-93.091h-512v93.091z" />
+<glyph unicode="&#xe902;" glyph-name="password" horiz-adv-x="768" d="M160.256 510.272c-0.768 66.304 0.256 102.976 6.144 145.152 18.88 136.128 81.088 208.576 217.6 208.576 136.96 0 199.040-71.808 217.728-206.848 5.76-41.6 6.784-77.696 6.016-143.232-0.192-17.536-0.256-22.4-0.256-30.080h64c0 7.232 0 12.032 0.256 29.376 0.832 68.48-0.32 107.008-6.656 152.704-22.656 163.648-107.776 262.080-281.088 262.080-173.056 0-258.176-99.136-280.96-263.808-6.464-46.272-7.616-85.312-6.784-154.624l0.256-29.568h64c0 7.68 0 12.608-0.256 30.272zM674.304 288c0 160.33-129.974 290.304-290.304 290.304s-290.304-129.974-290.304-290.304c0-160.33 129.974-290.304 290.304-290.304s290.304 129.974 290.304 290.304zM29.696 288c0 195.677 158.627 354.304 354.304 354.304s354.304-158.627 354.304-354.304c0-195.677-158.627-354.304-354.304-354.304s-354.304 158.627-354.304 354.304zM486.848 288c0 56.801-46.047 102.848-102.848 102.848s-102.848-46.047-102.848-102.848c0-56.801 46.047-102.848 102.848-102.848s102.848 46.047 102.848 102.848z" />
+<glyph unicode="&#xe903;" glyph-name="query" d="M512 913.455c186.182 0 372.364-46.545 372.364-93.091v-744.727c0-46.545-186.182-93.091-372.364-93.091s-372.364 46.545-372.364 93.091v744.727c0 46.545 186.182 93.091 372.364 93.091zM232.727 727.273v-139.636c0 0 93.091-46.545 279.273-46.545s279.273 46.545 279.273 46.545v139.636c0 0-139.636-46.545-279.273-46.545s-279.273 46.545-279.273 46.545zM232.727 494.545v-139.636c0 0 93.091-46.545 279.273-46.545s279.273 46.545 279.273 46.545v139.636c0 0-139.636-46.545-279.273-46.545s-279.273 46.545-279.273 46.545zM232.727 261.818v-139.636c0 0 93.091-46.545 279.273-46.545s279.273 46.545 279.273 46.545v139.636c0 0-139.636-46.545-279.273-46.545s-279.273 46.545-279.273 46.545z" />
+<glyph unicode="&#xe904;" glyph-name="email" horiz-adv-x="768" d="M64 224c0 17.856-14.080 32-32 32h704c-17.792 0-32-14.080-32-32v448c0-17.856 14.080-32 32-32h-704c17.792 0 32 14.080 32 32v-448zM32 704h704c17.664 0 32-14.72 32-32v-448c0-17.664-14.656-32-32-32h-704c-17.664 0-32 14.72-32 32v448c0 17.664 14.656 32 32 32zM64 578.112l272.704-171.712c26.112-16.384 64.64-16.192 90.432 0.512l276.864 179.456v76.8l-313.024-202.944c-2.787-1.281-6.046-2.028-9.48-2.028-3.379 0-6.588 0.723-9.483 2.023l-308.013 194.053v-76.16z" />
+<glyph unicode="&#xe905;" glyph-name="packs" d="M139.636 539.728l-93.091-0.389v-370.92c0-24.977 20.668-46.237 46.164-46.237h838.581c24.972 0 46.164 20.891 46.164 46.661v465.224c0 25.447-20.683 46.661-46.197 46.661h-464.223l-1.053-93.091h-303.24c-12.577 0-23.105-10.429-23.105-23.293v-24.615zM139.636 539.728l325.818 1.363 0.527 46.545h395.278c12.76 0 23.105-10.743 23.105-23.293v-325.778c0-12.864-10.528-23.293-23.105-23.293h-698.518c-12.76 0-23.105 10.743-23.105 23.293v301.162zM46.545 727.702v-187.040c0-25.125 20.743-46.116 46.331-46.116h372.792c25.122 0 46.331 20.647 46.331 46.116v187.040c0 25.125-20.743 46.116-46.331 46.116h-372.792c-25.122 0-46.331-20.647-46.331-46.116zM139.636 657.237c0 12.974 10.607 23.491 22.854 23.491h233.565c12.622 0 22.854-9.962 22.854-23.491v-46.109c0-12.974-10.607-23.491-22.854-23.491h-233.565c-12.622 0-22.854 9.962-22.854 23.491v46.109z" />
+<glyph unicode="&#xe906;" glyph-name="filter" horiz-adv-x="1195" d="M44.564 960c-47.369 0-57.413-26.095-22.351-58.361l437.32-402.439v-389.080c0-12.209 7.147-28.639 15.351-36.136l135.639-123.956c8.478-7.748 25.585-14.029 36.732-14.029h68.131c11.809 0 21.381 9.775 21.381 21.39v541.81l435.819 402.439c34.905 32.232 24.983 58.361-22.569 58.361h-1105.453z" />
+<glyph unicode="&#xe907;" glyph-name="penciledit" horiz-adv-x="1081" d="M974.861 709.307c-1.323-1.324-3.467-3.515-6.067-6.163-10.082 26.023-27.782 59.443-58.437 90.397-31.431 31.73-63.136 50.129-88.682 61.178 2.235 2.191 3.969 3.926 4.653 4.611 3.604 3.607 36.769 35.291 78.099 35.291 23.813 0 47.17-10.866 69.477-32.233 26.459-25.43 40.099-50.495 40.555-74.509 0.456-24.562-12.864-50.997-39.597-78.573zM196.427 218.332c17.518-4.611 53.967-18.079 91.191-55.654 28.694-28.945 42.106-60.767 48.173-80.17-44.159-14.199-141.326-47.755-203.322-67.752 18.339 60.402 49.177 154.178 63.957 203.576zM770.718 803.722c16.103-3.926 54.423-16.664 93.792-56.43 39.779-40.131 50.408-85.923 52.324-96.058-125.633-125.095-414.855-411.444-528.673-524.167-10.492 24.608-27.189 54.101-54.697 81.814-33.438 33.739-67.424 52.732-93.655 63.415 112.723 112.86 407.191 407.655 530.908 531.426zM1018.609 909.734c-34.807 33.374-73.172 50.266-114.183 50.266-64.048 0-110.762-41.409-123.581-54.056-17.974-17.851-631.771-632.416-631.771-632.416-4.014-4.018-6.934-9.040-8.439-14.564-13.868-51.225-83.208-278.36-83.892-280.642-3.558-11.642-0.411-24.334 8.166-32.872 6.204-6.163 14.415-9.451 22.809-9.451 3.285 0 6.66 0.502 9.899 1.552 2.372 0.776 236.669 76.564 275.217 88.114 5.064 1.507 9.717 4.246 13.503 7.99 24.36 24.106 596.827 590.687 634.873 629.95 39.278 40.542 58.802 82.773 58.072 125.46-0.776 42.185-21.167 82.773-60.673 120.667z" />
+<glyph unicode="&#xe908;" glyph-name="help" d="M512-17.455c257.071 0 465.455 208.384 465.455 465.455s-208.384 465.455-465.455 465.455c-257.024 0-465.455-208.384-465.455-465.455s208.431-465.455 465.455-465.455zM512 820.364c205.638 0 372.364-166.726 372.364-372.364s-166.726-372.364-372.364-372.364-372.364 166.726-372.364 372.364c0 205.638 166.726 372.364 372.364 372.364zM511.069 687.709c-85.783 0-141.591-49.85-145.687-130.048-0.093-1.955 0.605-3.817 1.908-5.213s3.165-2.141 5.073-2.141h54.412c3.677 0 6.703 2.793 6.935 6.423 3.258 42.217 31.325 67.398 75.124 67.398 42.449 0 70.935-24.669 70.935-61.44 0-30.953-12.055-48.826-47.802-70.703-46.685-27.974-67.351-59.671-67.025-102.726v-29.277c0-3.863 3.119-6.982 6.982-6.982h55.668c3.863 0 6.982 3.119 6.982 6.982v20.666c0 31.418 10.892 46.871 48.5 69.12 46.359 27.881 69.911 66.839 69.911 115.759 0 70.796-59.671 122.182-141.917 122.182zM504.087 308.131c-29.696 0-51.2-21.69-51.2-51.526 0-29.696 21.504-51.247 51.2-51.247 29.463 0 50.921 21.551 50.921 51.247 0 29.836-21.457 51.526-50.921 51.526z" />
+<glyph unicode="&#xe909;" glyph-name="search" d="M617.35 282.655c-54.951-42.258-123.762-67.382-198.441-67.382-179.944 0-325.818 145.874-325.818 325.818s145.874 325.818 325.818 325.818c179.944 0 325.818-145.874 325.818-325.818 0-72.456-23.651-139.388-63.654-193.497 2.881-1.813 5.606-3.975 8.115-6.484l230.55-230.55c18.132-18.133 18.223-47.441-0.081-65.744-18.177-18.177-47.602-18.223-65.744-0.081l-230.55 230.55c-2.293 2.293-4.297 4.765-6.013 7.37zM418.909 308.364c128.532 0 232.727 104.196 232.727 232.727s-104.196 232.727-232.727 232.727c-128.532 0-232.727-104.196-232.727-232.727s104.196-232.727 232.727-232.727z" />
+<glyph unicode="&#xe90a;" glyph-name="admin" d="M139.636 680.727v-139.636c0-63.537 13.91-167.468 93.091-232.727 0 0-139.636-46.545-186.182-93.091s-46.545-54.863-46.545-87.197v-87.308c0-32.138 25.372-58.222 56.538-58.222h724.695c31.213 0 56.585 26.084 56.585 58.222v87.308c0 34.254 0 40.652-46.545 87.197s-186.182 93.091-186.182 93.091c78.415 63.439 93.091 162.841 93.091 232.727v139.636c0 96.315-93.091 232.727-279.273 232.727s-279.273-136.413-279.273-232.727zM605.091 680.727v-139.636c0-50.699 7.004-142.276-46.545-186.182-8.019-6.593-46.545-46.545-46.545-46.545v-46.545c0 0 228.649-90.087 232.727-93.091v-93.091h-651.636v93.091c4.477 3.328 232.727 93.091 232.727 93.091 1.504 0.845 0 46.545 0 46.545s-30.321 33.004-46.545 46.545c-51.998 43.489-46.545 134.743-46.545 186.182v139.636c0 46.447 99.607 139.636 187.6 139.636 89.633 0 184.763-92.080 184.763-139.636zM930.909 642.127v-380.309h-186.182v93.091h93.091v93.091h-93.091v93.091h93.091v101.036c-54.234 19.169-93.091 70.892-93.091 131.691 0 77.119 62.517 139.636 139.636 139.636s139.636-62.517 139.636-139.636c0-60.799-38.856-112.522-93.091-131.691zM884.364 727.273c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545z" />
+<glyph unicode="&#xe90b;" glyph-name="upcarat" horiz-adv-x="1707" d="M1706.667-64h-1706.667l853.333 1024z" />
+<glyph unicode="&#xe90c;" glyph-name="downcarat" horiz-adv-x="1707" d="M853.333-64l-853.333 1024h1706.667z" />
+<glyph unicode="&#x1f32b;" glyph-name="alerts" d="M152.257 247.284c-27.353-43.522-8.745-78.521 41.342-78.521h636.841c50.115 0 68.596 35.155 41.342 78.521l-310.414 493.915c-27.353 43.522-71.442 43.366-98.697 0l-310.414-493.915zM385.61 791.609c63.366 100.331 189.366 100.469 252.819 0l311.941-493.915c66.395-105.127 4.556-222.058-118.364-222.058h-639.973c-122.888 0-184.859 116.772-118.364 222.058l311.941 493.915zM538.019 420.273c-2.675-25.092-49.362-25.092-52.037 0l-20.434 191.658c-1.277 11.976 10.738 22.251 26.019 22.251h40.868c15.281 0 27.295-10.275 26.019-22.251l-20.434-191.658zM558.545 308.364c0-25.706-20.839-46.545-46.545-46.545s-46.545 20.839-46.545 46.545c0 25.706 20.839 46.545 46.545 46.545s46.545-20.839 46.545-46.545z" />
+</font></defs></svg>

assets/stylesheets/fonts.css

@@ -28,6 +28,17 @@
 	font-style: normal;
 }
 
+@font-face {
+  font-family: 'kolidecons';
+  src: url('/assets/fonts/kolidecons/kolidecons.eot?12uvii');
+  src: url('/assets/fonts/kolidecons/kolidecons.eot?12uvii#iefix') format('embedded-opentype'),
+    url('/assets/fonts/kolidecons/kolidecons.ttf?12uvii') format('truetype'),
+    url('/assets/fonts/kolidecons/kolidecons.woff?12uvii') format('woff'),
+    url('/assets/fonts/kolidecons/kolidecons.svg?12uvii#kolidecons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

assets/stylesheets/icons.css

@@ -0,0 +1,57 @@
+[class^="kolidecon-"], [class*=" kolidecon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'kolidecons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.kolidecon-filter:before {
+  content: "\e906";
+}
+.kolidecon-penciledit:before {
+  content: "\e907";
+}
+.kolidecon-upcarat:before {
+  content: "\e90b";
+}
+.kolidecon-downcarat:before {
+  content: "\e90c";
+}
+.kolidecon-username:before {
+  content: "\e900";
+}
+.kolidecon-password:before {
+  content: "\e902";
+}
+.kolidecon-email:before {
+  content: "\e904";
+}
+.kolidecon-search:before {
+  content: "\e909";
+}
+.kolidecon-hosts:before {
+  content: "\e901";
+}
+.kolidecon-query:before {
+  content: "\e903";
+}
+.kolidecon-packs:before {
+  content: "\e905";
+}
+.kolidecon-alerts:before {
+  content: "\1f32b";
+}
+.kolidecon-help:before {
+  content: "\e908";
+}
+.kolidecon-admin:before {
+  content: "\e90a";
+}

frontend/pages/HomePage/HomePage.jsx

@@ -14,6 +14,7 @@ export class HomePage extends Component {
 
     return (
       <div>
+        <i className="kolidecon-username" />
         Home page
         {user && <Link to={LOGOUT}>Logout</Link>}
       </div>
@@ -28,4 +29,3 @@ const mapStateToProps = (state) => {
 };
 
 export default connect(mapStateToProps)(HomePage);
-

frontend/templates/react.tmpl

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="/assets/stylesheets/fonts.css">
+    <link rel="stylesheet" type="text/css" href="/assets/stylesheets/icons.css">
     <title>Kolide</title>
   </head>
   <body>