Merge branch '701' into 'develop'

Versioning the font resources using webpack Closes #701 See merge request pleroma/pleroma-fe!1017

Merge branch '701' into 'develop'
Versioning the font resources using webpack Closes #701 See merge request pleroma/pleroma-fe!1017
7b1d5a4f · HJ · 5096bff1 · d37caeed · 7b1d5a4f · 7b1d5a4f
Commit 7b1d5a4f authored Dec 03, 2019 by HJ 🐼
21 changed files
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -3,6 +3,7 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var FontelloPlugin = require("fontello-webpack-plugin")

 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -11,6 +12,8 @@ var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
 var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

+var now = Date.now()
+
 module.exports = {
  entry: {
    app: './src/main.js'
@@ -90,6 +93,14 @@ module.exports = {
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, '..', 'src/sw.js'),
      filename: 'sw-pleroma.js'
+    }),
+    new FontelloPlugin({
+      config: require('../static/fontello.json'),
+      name: 'fontello',
+      output: {
+        css: '[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.
+        font: 'font/[name].' + now + '.[ext]'
+      }
    })
  ]
 }
--- a/index.html
+++ b/index.html
@@ -6,8 +6,6 @@
    <title>Pleroma</title>
    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
-    <link rel="stylesheet" href="/static/font/css/fontello.css">
-    <link rel="stylesheet" href="/static/font/css/animation.css">
  </head>
  <body class="hidden">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>

--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "file-loader": "^3.0.1",
+    "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^3.0.0",
    "http-proxy-middleware": "^0.17.2",

--- a/src/App.scss
+++ b/src/App.scss
@@ -855,3 +855,18 @@ nav {
 .btn.btn-default {
  min-height: 28px;
 }
+
+.animate-spin {
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(359deg);
+  }
+}
--- a/static/font/LICENSE.txt
+++ b/static/font/LICENSE.txt
-Font license info
-
-
-## Font Awesome
-
-   Copyright (C) 2016 by Dave Gandy
-
-   Author:    Dave Gandy
-   License:   SIL ()
-   Homepage:  http://fortawesome.github.com/Font-Awesome/
-
-
-## Entypo
-
-   Copyright (C) 2012 by Daniel Bruce
-
-   Author:    Daniel Bruce
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.entypo.com
-
-
-## Iconic
-
-   Copyright (C) 2012 by P.J. Onori
-
-   Author:    P.J. Onori
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://somerandomdude.com/work/iconic/
-
-
-## Fontelico
-
-   Copyright (C) 2012 by Fontello project
-
-   Author:    Crowdsourced, for Fontello project
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://fontello.com
-
-
--- a/static/font/README.txt
+++ b/static/font/README.txt
-This webfont is generated by http://fontello.com open source project.
-
-
-================================================================================
-Please, note, that you should obey original font licenses, used to make this
-webfont pack. Details available in LICENSE.txt file.
-
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
-  site in "About" section.
-
- If your project is open-source, usually, it will be ok to make LICENSE.txt
-  file publicly available in your repository.
-
- Fonts, used in Fontello, don't require a clickable link on your site.
-  But any kind of additional authors crediting is welcome.
-================================================================================
-
-
-Comments on archive content
---------------------------
-
- /font/* - fonts in different formats
-
- /css/*  - different kinds of css, for all situations. Should be ok with 
-  twitter bootstrap. Also, you can skip <i> style and assign icon classes
-  directly to text elements, if you don't mind about IE7.
-
- demo.html - demo file, to show your webfont content
-
- LICENSE.txt - license info about source fonts, used to build your one.
-
- config.json - keeps your settings. You can import it back into fontello
-  anytime, to continue your work
-
-
-Why so many CSS files ?
-----------------------
-
-Because we like to fit all your needs :)
-
- basic file, <your_font_name>.css - is usually enough, it contains @font-face
-  and character code definitions
-
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
-  directly into html
-
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
-  rules, but still wish to benefit from css generation. That can be very
-  convenient for automated asset build systems. When you need to update font -
-  no need to manually edit files, just override old version with archive
-  content. See fontello source code for examples.
-
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
-  CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
-  We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
-  server headers. But if you ok with dirty hack - this file is for you. Note,
-  that data url moved to separate @font-face to avoid problems with <IE9, when
-  string is too long.
-
- animate.css - use it to get ideas about spinner rotation animation.
-
-
-Attention for server setup
--------------------------
-
-You MUST setup server to reply with proper `mime-types` for font files -
-otherwise some browsers will fail to show fonts.
-
-Usually, `apache` already has necessary settings, but `nginx` and other
-webservers should be tuned. Here is list of mime types for our file extensions:
-
- `application/vnd.ms-fontobject` - eot
- `application/x-font-woff` - woff
- `application/x-font-ttf` - ttf
- `image/svg+xml` - svg
--- a/static/font/css/animation.css
+++ b/static/font/css/animation.css
-/*
-   Animation example, for spinners
-*/
-.animate-spin {
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-@-moz-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-webkit-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-o-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-ms-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
--- a/static/font/css/fontello-codes.css
+++ b/static/font/css/fontello-codes.css
-
-.icon-cancel:before { content: '\e800'; } /* '' */
-.icon-upload:before { content: '\e801'; } /* '' */
-.icon-star:before { content: '\e802'; } /* '' */
-.icon-star-empty:before { content: '\e803'; } /* '' */
-.icon-retweet:before { content: '\e804'; } /* '' */
-.icon-eye-off:before { content: '\e805'; } /* '' */
-.icon-search:before { content: '\e806'; } /* '' */
-.icon-cog:before { content: '\e807'; } /* '' */
-.icon-logout:before { content: '\e808'; } /* '' */
-.icon-down-open:before { content: '\e809'; } /* '' */
-.icon-attach:before { content: '\e80a'; } /* '' */
-.icon-picture:before { content: '\e80b'; } /* '' */
-.icon-video:before { content: '\e80c'; } /* '' */
-.icon-right-open:before { content: '\e80d'; } /* '' */
-.icon-left-open:before { content: '\e80e'; } /* '' */
-.icon-up-open:before { content: '\e80f'; } /* '' */
-.icon-bell-ringing-o:before { content: '\e810'; } /* '' */
-.icon-lock:before { content: '\e811'; } /* '' */
-.icon-globe:before { content: '\e812'; } /* '' */
-.icon-brush:before { content: '\e813'; } /* '' */
-.icon-attention:before { content: '\e814'; } /* '' */
-.icon-plus:before { content: '\e815'; } /* '' */
-.icon-adjust:before { content: '\e816'; } /* '' */
-.icon-edit:before { content: '\e817'; } /* '' */
-.icon-pencil:before { content: '\e818'; } /* '' */
-.icon-pin:before { content: '\e819'; } /* '' */
-.icon-wrench:before { content: '\e81a'; } /* '' */
-.icon-chart-bar:before { content: '\e81b'; } /* '' */
-.icon-zoom-in:before { content: '\e81c'; } /* '' */
-.icon-spin3:before { content: '\e832'; } /* '' */
-.icon-spin4:before { content: '\e834'; } /* '' */
-.icon-link-ext:before { content: '\f08e'; } /* '' */
-.icon-link-ext-alt:before { content: '\f08f'; } /* '' */
-.icon-menu:before { content: '\f0c9'; } /* '' */
-.icon-mail-alt:before { content: '\f0e0'; } /* '' */
-.icon-gauge:before { content: '\f0e4'; } /* '' */
-.icon-comment-empty:before { content: '\f0e5'; } /* '' */
-.icon-bell-alt:before { content: '\f0f3'; } /* '' */
-.icon-plus-squared:before { content: '\f0fe'; } /* '' */
-.icon-reply:before { content: '\f112'; } /* '' */
-.icon-smile:before { content: '\f118'; } /* '' */
-.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
-.icon-ellipsis:before { content: '\f141'; } /* '' */
-.icon-play-circled:before { content: '\f144'; } /* '' */
-.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
-.icon-binoculars:before { content: '\f1e5'; } /* '' */
-.icon-user-plus:before { content: '\f234'; } /* '' */
\ No newline at end of file
--- a/static/font/css/fontello-embedded.css
+++ b/static/font/css/fontello-embedded.css
--- a/static/font/css/fontello-ie7-codes.css
+++ b/static/font/css/fontello-ie7-codes.css
-
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
-.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
-.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
-.icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
-.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
-.icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
-.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
-.icon-attach { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
-.icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80b;&nbsp;'); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80c;&nbsp;'); }
-.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80d;&nbsp;'); }
-.icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80e;&nbsp;'); }
-.icon-up-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80f;&nbsp;'); }
-.icon-bell-ringing-o { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe810;&nbsp;'); }
-.icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe811;&nbsp;'); }
-.icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe812;&nbsp;'); }
-.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe813;&nbsp;'); }
-.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe814;&nbsp;'); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe815;&nbsp;'); }
-.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe816;&nbsp;'); }
-.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe817;&nbsp;'); }
-.icon-pencil { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe818;&nbsp;'); }
-.icon-pin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe819;&nbsp;'); }
-.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81a;&nbsp;'); }
-.icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81b;&nbsp;'); }
-.icon-zoom-in { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81c;&nbsp;'); }
-.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
-.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
-.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
-.icon-link-ext-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08f;&nbsp;'); }
-.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }
-.icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e0;&nbsp;'); }
-.icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e4;&nbsp;'); }
-.icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e5;&nbsp;'); }
-.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0f3;&nbsp;'); }
-.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0fe;&nbsp;'); }
-.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
-.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf118;&nbsp;'); }
-.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf13e;&nbsp;'); }
-.icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf141;&nbsp;'); }
-.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf144;&nbsp;'); }
-.icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf164;&nbsp;'); }
-.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
-.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf234;&nbsp;'); }
\ No newline at end of file
--- a/static/font/css/fontello-ie7.css
+++ b/static/font/css/fontello-ie7.css
-[class^="icon-"], [class*=" icon-"] {
-  font-family: 'fontello';
-  font-style: normal;
-  font-weight: normal;
- 
-  /* fix buttons height */
-  line-height: 1em;
- 
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-}
- 
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
-.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
-.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
-.icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
-.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
-.icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
-.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
-.icon-attach { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
-.icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80b;&nbsp;'); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80c;&nbsp;'); }
-.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80d;&nbsp;'); }
-.icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80e;&nbsp;'); }
-.icon-up-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80f;&nbsp;'); }
-.icon-bell-ringing-o { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe810;&nbsp;'); }
-.icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe811;&nbsp;'); }
-.icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe812;&nbsp;'); }
-.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe813;&nbsp;'); }
-.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe814;&nbsp;'); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe815;&nbsp;'); }
-.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe816;&nbsp;'); }
-.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe817;&nbsp;'); }
-.icon-pencil { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe818;&nbsp;'); }
-.icon-pin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe819;&nbsp;'); }
-.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81a;&nbsp;'); }
-.icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81b;&nbsp;'); }
-.icon-zoom-in { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe81c;&nbsp;'); }
-.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
-.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
-.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
-.icon-link-ext-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08f;&nbsp;'); }
-.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }
-.icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e0;&nbsp;'); }
-.icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e4;&nbsp;'); }
-.icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0e5;&nbsp;'); }
-.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0f3;&nbsp;'); }
-.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0fe;&nbsp;'); }
-.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
-.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf118;&nbsp;'); }
-.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf13e;&nbsp;'); }
-.icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf141;&nbsp;'); }
-.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf144;&nbsp;'); }
-.icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf164;&nbsp;'); }
-.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
-.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf234;&nbsp;'); }
\ No newline at end of file
--- a/static/font/css/fontello.css
+++ b/static/font/css/fontello.css
-@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?70867224');
-  src: url('../font/fontello.eot?70867224#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?70867224') format('woff2'),
-       url('../font/fontello.woff?70867224') format('woff'),
-       url('../font/fontello.ttf?70867224') format('truetype'),
-       url('../font/fontello.svg?70867224#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?70867224#fontello') format('svg');
-  }
-}
-*/
- 
- [class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
- 
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
- 
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
- 
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
- 
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
- 
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
- 
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
- 
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
- 
-.icon-cancel:before { content: '\e800'; } /* '' */
-.icon-upload:before { content: '\e801'; } /* '' */
-.icon-star:before { content: '\e802'; } /* '' */
-.icon-star-empty:before { content: '\e803'; } /* '' */
-.icon-retweet:before { content: '\e804'; } /* '' */
-.icon-eye-off:before { content: '\e805'; } /* '' */
-.icon-search:before { content: '\e806'; } /* '' */
-.icon-cog:before { content: '\e807'; } /* '' */
-.icon-logout:before { content: '\e808'; } /* '' */
-.icon-down-open:before { content: '\e809'; } /* '' */
-.icon-attach:before { content: '\e80a'; } /* '' */
-.icon-picture:before { content: '\e80b'; } /* '' */
-.icon-video:before { content: '\e80c'; } /* '' */
-.icon-right-open:before { content: '\e80d'; } /* '' */
-.icon-left-open:before { content: '\e80e'; } /* '' */
-.icon-up-open:before { content: '\e80f'; } /* '' */
-.icon-bell-ringing-o:before { content: '\e810'; } /* '' */
-.icon-lock:before { content: '\e811'; } /* '' */
-.icon-globe:before { content: '\e812'; } /* '' */
-.icon-brush:before { content: '\e813'; } /* '' */
-.icon-attention:before { content: '\e814'; } /* '' */
-.icon-plus:before { content: '\e815'; } /* '' */
-.icon-adjust:before { content: '\e816'; } /* '' */
-.icon-edit:before { content: '\e817'; } /* '' */
-.icon-pencil:before { content: '\e818'; } /* '' */
-.icon-pin:before { content: '\e819'; } /* '' */
-.icon-wrench:before { content: '\e81a'; } /* '' */
-.icon-chart-bar:before { content: '\e81b'; } /* '' */
-.icon-zoom-in:before { content: '\e81c'; } /* '' */
-.icon-spin3:before { content: '\e832'; } /* '' */
-.icon-spin4:before { content: '\e834'; } /* '' */
-.icon-link-ext:before { content: '\f08e'; } /* '' */
-.icon-link-ext-alt:before { content: '\f08f'; } /* '' */
-.icon-menu:before { content: '\f0c9'; } /* '' */
-.icon-mail-alt:before { content: '\f0e0'; } /* '' */
-.icon-gauge:before { content: '\f0e4'; } /* '' */
-.icon-comment-empty:before { content: '\f0e5'; } /* '' */
-.icon-bell-alt:before { content: '\f0f3'; } /* '' */
-.icon-plus-squared:before { content: '\f0fe'; } /* '' */
-.icon-reply:before { content: '\f112'; } /* '' */
-.icon-smile:before { content: '\f118'; } /* '' */
-.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
-.icon-ellipsis:before { content: '\f141'; } /* '' */
-.icon-play-circled:before { content: '\f144'; } /* '' */
-.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
-.icon-binoculars:before { content: '\f1e5'; } /* '' */
-.icon-user-plus:before { content: '\f234'; } /* '' */
\ No newline at end of file
--- a/static/font/demo.html
+++ b/static/font/demo.html
-<!DOCTYPE html>
-<html>
-  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-    <meta charset="UTF-8"><style>/*
- * Bootstrap v2.2.1
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-.clearfix {
-  *zoom: 1;
-}
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.clearfix:after {
-  clear: both;
-}
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-a:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-a:hover,
-a:active {
-  outline: 0;
-}
-button,