More comprehensive system for displaying icons vertically centred within text

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index c3e7c18..1c30cb5 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -3,9 +3,9 @@ let XDate = require('xdate')
 
 return async (env, head, body, scripts) => {
   //let cart = await _require('/online_store/cart.jst')
+  let fa_search = await env.site.get_min_svg('/_svg/fa_search.svg')
   let get_session = await _require('/_lib/get_session.jst')
   //let icon_cart_small = await env.site.get_min_svg('/_svg/icon_cart_small.svg')
-  let icon_search_mono = await env.site.get_min_svg('/_svg/icon_search_mono.svg')
   let logo_large = await env.site.get_min_svg('/_svg/logo_large.svg')
   let menu = await env.site.get_menu('/_menu.json')
   let page = await _require('/_lib/page.jst')
@@ -92,7 +92,9 @@ return async (env, head, body, scripts) => {
                   input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
                   div.input-group-append {
                     button.btn.btn-outline-secondary#search-button(type="submit") {
-                      _out.push(icon_search_mono)
+                      div.icon24-outer {
+                        div.icon24-inner {_out.push(fa_search)}
+                      }
                     }
                   }
                 }

diff --git a/_svg/fa_search.svg b/_svg/fa_search.svg
new file mode 100644 (file)
index 0000000..1309464
--- /dev/null
+++ b/_svg/fa_search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
\ No newline at end of file

diff --git a/_svg/icon_search_mono.svg b/_svg/icon_search_mono.svg
deleted file mode 100644 (file)
index dd2d342..0000000
--- a/_svg/icon_search_mono.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
-  <title>search</title>
-  <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
-</svg>

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 0f93c88..53b4834 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -12,30 +12,32 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-left: calc(100vw - 100%);
 }
 
-// needed for svg icons inside card headers
+// needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
-// the svg is positioned at an arbitrary position within this
-.icon32-outer {
-  display: inline-block;
-  position: relative;
-  width: calc(32px + 1rem);
-  height: 0;
-}
-.icon32-inner {
-  position: absolute;
-  top: -22px;
-}
-
-// apply this to svg, see _svg/icon_search.svg
-.svg-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-  position: relative;
-  //bottom: -.125em;
+// the svg is positioned within this to vertically centre on a capital letter
+$icon-sizes: (
+  24: 24px,
+  32: 32px,
+  48: 48px,
+  64: 64px
+);
+@each $icon-size, $icon-size-px in $icon-sizes {
+  .icon#{$icon-size}-outer {
+    display: inline-block;
+    position: relative;
+    width: $icon-size-px;
+    height: 0;
+    vertical-align: baseline;
+  }
+  .icon#{$icon-size}-inner {
+    position: absolute;
+    left: 0px;
+    top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height
+    width: $icon-size-px;
+    height: $icon-size-px;
+    fill: currentColor;
+    stroke: currentColor;
+  }
 }
 
 // use this to display the pi symbol without horrible blocky look in Sans

diff --git a/css/bootstrap/_reboot.scss b/css/bootstrap/_reboot.scss
index cd93bfe..5339e13 100644 (file)
--- a/css/bootstrap/_reboot.scss
+++ b/css/bootstrap/_reboot.scss
@@ -254,12 +254,13 @@ img {
   border-style: none; // Remove the border on images inside links in IE 10-.
 }
 
-svg {
-  // Workaround for the SVG overflow bug in IE10/11 is still required.
-  // See https://github.com/twbs/bootstrap/issues/26878
-  overflow: hidden;
-  vertical-align: middle;
-}
+// Nick
+//svg {
+//  // Workaround for the SVG overflow bug in IE10/11 is still required.
+//  // See https://github.com/twbs/bootstrap/issues/26878
+//  overflow: hidden;
+//  vertical-align: middle;
+//}
 
 
 //

diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst
index 35d13eb..e9e29ca 100644 (file)
--- a/my_account/sign_up/index.html.jst
+++ b/my_account/sign_up/index.html.jst
@@ -41,14 +41,14 @@ return async env => {
       div.accordion#accordion(role="tablist" aria-multiselectable="true") {
         div.card#card-1 {
           div.card-header#card-1-heading(role="tab") {
-            span.icon32-outer#card-1-tick(hidden) {
-              span.icon32-inner {_out.push(icon_tick)}
+            div.icon32-outer.mr-2#card-1-tick(hidden) {
+              div.icon32-inner {_out.push(icon_tick)}
             }
-            span.icon32-outer#card-1-cross(hidden) {
-              span.icon32-inner {_out.push(icon_cross)}
+            div.icon32-outer.mr-2#card-1-cross(hidden) {
+              div.icon32-inner {_out.push(icon_cross)}
             }
-            span.icon32-outer#card-1-spinner(hidden) {
-              span.icon32-inner {
+            div.icon32-outer.mr-2#card-1-spinner(hidden) {
+              div.icon32-inner {
                 div.spinner-border(role="status") {}
               }
             }
@@ -130,14 +130,14 @@ return async env => {
         }
         div.card#card-2 {
           div.card-header#card-2-heading(role="tab") {
-            span.icon32-outer#card-2-tick(hidden) {
-              span.icon32-inner {_out.push(icon_tick)}
+            div.icon32-outer.mr-2#card-2-tick(hidden) {
+              div.icon32-inner {_out.push(icon_tick)}
             }
-            span.icon32-outer#card-2-cross(hidden) {
-              span.icon32-inner {_out.push(icon_cross)}
+            div.icon32-outer.mr-2#card-2-cross(hidden) {
+              div.icon32-inner {_out.push(icon_cross)}
             }
-            span.icon32-outer#card-2-spinner(hidden) {
-              span.icon32-inner {
+            div.icon32-outer.mr-2#card-2-spinner(hidden) {
+              div.icon32-inner {
                 div.spinner-border(role="status") {}
               }
             }