Import new icons proposed in #7618

The new icons are done using web fonts. They have been added to the UI demo page.

5 files changed, 272 insertions, 0 deletions

diff --git a/plugins/Morpheus/fonts/piwik.eot b/plugins/Morpheus/fonts/piwik.eot
new file mode 100644
index 0000000000..bd41afad9e
--- /dev/null
+++ b/plugins/Morpheus/fonts/piwik.eot
diff --git a/plugins/Morpheus/fonts/piwik.ttf b/plugins/Morpheus/fonts/piwik.ttf
new file mode 100644
index 0000000000..c81d69e10c
--- /dev/null
+++ b/plugins/Morpheus/fonts/piwik.ttf
diff --git a/plugins/Morpheus/stylesheets/base.less b/plugins/Morpheus/stylesheets/base.less
index dba6565672..bf2bfd1749 100644
--- a/plugins/Morpheus/stylesheets/base.less
+++ b/plugins/Morpheus/stylesheets/base.less
@@ -5,6 +5,7 @@
 @import "theme-advanced";
 @import "base/mixins";
 @import "base/bootstrap.css";
+@import "base/icons.css";
 
 /* General styles */
 @import "general/_default.less";
diff --git a/plugins/Morpheus/stylesheets/base/icons.css b/plugins/Morpheus/stylesheets/base/icons.css
new file mode 100644
index 0000000000..7f3f412733
--- /dev/null
+++ b/plugins/Morpheus/stylesheets/base/icons.css
@@ -0,0 +1,238 @@
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.eot');
+}
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    font-family: 'piwik';
+    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;
+}
+
+.icon-alien:before {
+    content: "\e600";
+}
+.icon-annotations:before {
+    content: "\e601";
+}
+.icon-arrow-left:before {
+    content: "\e602";
+}
+.icon-arrow-right:before {
+    content: "\e603";
+}
+.icon-business:before {
+    content: "\e604";
+}
+.icon-calendar:before {
+    content: "\e605";
+}
+.icon-chart-bar:before {
+    content: "\e606";
+}
+.icon-chart-line-details:before {
+    content: "\e607";
+}
+.icon-chart-line-edit:before {
+    content: "\e608";
+}
+.icon-chart-pie:before {
+    content: "\e609";
+}
+.icon-close:before {
+    content: "\e60a";
+}
+.icon-collapsed-arrows:before {
+    content: "\e60b";
+}
+.icon-configure:before {
+    content: "\e60c";
+}
+.icon-datepicker-arr-l:before {
+    content: "\e60d";
+}
+.icon-datepicker-arr-r:before {
+    content: "\e60e";
+}
+.icon-delete:before {
+    content: "\e60f";
+}
+.icon-document:before {
+    content: "\e610";
+}
+.icon-download:before {
+    content: "\e611";
+}
+.icon-drop:before {
+    content: "\e612";
+}
+.icon-ecommerce-abandoned-cart:before {
+    content: "\e613";
+}
+.icon-ecommerce-order:before {
+    content: "\e614";
+}
+.icon-email:before {
+    content: "\e615";
+}
+.icon-error:before {
+    content: "\e616";
+}
+.icon-export:before {
+    content: "\e617";
+}
+.icon-feed:before {
+    content: "\e618";
+}
+.icon-finance:before {
+    content: "\e619";
+}
+.icon-folder-charts:before {
+    content: "\e61a";
+}
+.icon-folder:before {
+    content: "\e61b";
+}
+.icon-fullscreen:before {
+    content: "\e61c";
+}
+.icon-goal:before {
+    content: "\e61d";
+}
+.icon-help-alt:before {
+    content: "\e61e";
+}
+.icon-help:before {
+    content: "\e61f";
+}
+.icon-html:before {
+    content: "\e620";
+}
+.icon-alert:before {
+    content: "\e621";
+}
+.icon-edit:before {
+    content: "\e622";
+}
+.icon-image:before {
+    content: "\e623";
+}
+.icon-info:before {
+    content: "\e624";
+}
+.icon-insights:before {
+    content: "\e625";
+}
+.icon-locked-2:before {
+    content: "\e626";
+}
+.icon-locked:before {
+    content: "\e627";
+}
+.icon-locked-3:before {
+    content: "\e628";
+}
+.icon-locked-4:before {
+    content: "\e629";
+}
+.icon-maximise:before {
+    content: "\e62a";
+}
+.icon-minimise:before {
+    content: "\e62b";
+}
+.icon-minus:before {
+    content: "\e62c";
+}
+.icon-newtab:before {
+    content: "\e62d";
+}
+.icon-ok:before {
+    content: "\e62e";
+}
+.icon-open-source:before {
+    content: "\e62f";
+}
+.icon-plus:before {
+    content: "\e630";
+}
+.icon-puzzle:before {
+    content: "\e631";
+}
+.icon-refresh:before {
+    content: "\e632";
+}
+.icon-reload:before {
+    content: "\e633";
+}
+.icon-search:before {
+    content: "\e634";
+}
+.icon-segment-users:before {
+    content: "\e635";
+}
+.icon-server-alt:before {
+    content: "\e636";
+}
+.icon-server:before {
+    content: "\e637";
+}
+.icon-show-hide:before {
+    content: "\e638";
+}
+.icon-show:before {
+    content: "\e639";
+}
+.icon-sort-asc:before {
+    content: "\e63a";
+}
+.icon-sort-desc:before {
+    content: "\e63b";
+}
+.icon-star:before {
+    content: "\e63c";
+}
+.icon-success:before {
+    content: "\e63d";
+}
+.icon-table-more:before {
+    content: "\e63e";
+}
+.icon-table:before {
+    content: "\e63f";
+}
+.icon-tag-cloud:before {
+    content: "\e640";
+}
+.icon-user-add:before {
+    content: "\e641";
+}
+.icon-user:before {
+    content: "\e642";
+}
+.icon-video-play:before {
+    content: "\e643";
+}
+.icon-visitors:before {
+    content: "\e644";
+}
+.icon-zoom-in:before {
+    content: "\e645";
+}
+.icon-zoom-out:before {
+    content: "\e646";
+}
diff --git a/plugins/Morpheus/templates/demo.twig b/plugins/Morpheus/templates/demo.twig
index de1f4da884..0a8d09d2c6 100644
--- a/plugins/Morpheus/templates/demo.twig
+++ b/plugins/Morpheus/templates/demo.twig
@@ -46,6 +46,11 @@
             border: 1px solid #e3e3e3;
             border-radius: 4px;
         }
+        #icon-list .icon {
+            font-family: monospace, monospace;
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
     </style>
 {% endblock %}
 
@@ -423,6 +428,34 @@
             <pre>&lt;table&gt;...&lt;/table&gt;</pre>
         </div>
 
+        <h2>Icons</h2>
+
+        <div class="demo">
+
+            <div id="icon-list" class="row">
+            </div>
+
+        </div>
+        <div class="demo-code">
+            <pre>&lt;span class=&quot;icon-ok&quot;&gt;&lt;/span&gt;</pre>
+        </div>
+
+        <script>
+            $(function () {
+                $.get('plugins/Morpheus/stylesheets/base/icons.css', function (data) {
+                    var classes = data.match(/\.(icon-[^:]+)/g);
+                    classes.forEach(function(icon) {
+                        var cssClass = icon.substring(1);
+
+                        var item = $('<div class="col-sm-4 icon"><span class="' + cssClass
+                                + '"></span> ' + cssClass + '</div>');
+
+                        $('#icon-list').append(item);
+                    });
+                });
+            });
+        </script>
+
     </div>
 
 {% endblock %}