diff --git a/src/Umbraco.Web.UI.Client/gulpfile.js b/src/Umbraco.Web.UI.Client/gulpfile.js
index be72090661..30ef9c749f 100644
--- a/src/Umbraco.Web.UI.Client/gulpfile.js
+++ b/src/Umbraco.Web.UI.Client/gulpfile.js
@@ -38,7 +38,7 @@ function processJs(files, out) {
 }
 
 function processLess(files, out) {
-   
+
     var processors = [
          autoprefixer,
          cssnano
@@ -64,7 +64,7 @@ var sources = {
     less: {
         installer: { files: ["src/less/installer.less"], out: "installer.css" },
         nonodes: { files: ["src/less/pages/nonodes.less"], out: "nonodes.style.min.css"},
-        preview: { files: ['src/less/canvas-designer.less', 'src/less/helveticons.less'], out: "canvasdesigner.css" },
+        preview: { files: ["src/less/canvas-designer.less"], out: "canvasdesigner.css" },
         umbraco: { files: ["src/less/belle.less"], out: "umbraco.css" }
     },
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
index 095027d86b..7410c09580 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
@@ -1,4 +1,6 @@
 
+@import "helveticons.less";
+
 /******* font-face *******/
 
 @font-face {
@@ -14,7 +16,7 @@ body {
     overflow: hidden;
     height: 100%;
     width: 100%;
-    width: calc(100% - 80px); // 80px is the fixed left menu for toggling the different browser sizes
+    width: calc(~"100% - 80px"); // 80px is the fixed left menu for toggling the different browser sizes
     position: absolute;
     padding: 0;
     margin: 0;