resolves #9 include FontAwesome and admonition icons

.eleventy.js

@@ -14,7 +14,7 @@ const DocumentModelConverter = require('./lib/document-model-converter.js')
 asciidoctor.ConverterFactory.register(new DocumentModelConverter(), ['json'])
 
 module.exports = function (eleventyConfig, rest) {
-  eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,webp,ico,txt,json,webmanifest,xml,woff2}')
+  eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,webp,ico,txt,json,webmanifest,xml,woff2,otf,eot,ttf,woff}')
   eleventyConfig.addPassthroughCopy('pages/_redirects')
   eleventyConfig.setBrowserSyncConfig({
     files: ['_site/**/*'],

.stylelintrc

@@ -7,6 +7,8 @@
     "selector-id-pattern": null
   },
   "ignoreFiles": [
-    "pages/assets/subfont/**.css"
+    "pages/assets/subfont/**.css",
+    "pages/assets/css/_font-awesome.css"
+
   ]
 }

pages/assets/css/_base.css

@@ -1863,3 +1863,32 @@ pre code.hljs {
 .hljs-ln-code {
   padding-left: 10px;
 }
+
+i.fa[class^="icon-"],
+i.fa[class*=" icon-"]::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-right: 0.25rem;
+  margin-left: -0.5rem;
+}
+
+i.fa.icon-important::before {
+  background: no-repeat url("../img/important.svg");
+}
+
+i.fa.icon-note::before {
+  background: no-repeat url("../img/note.svg");
+}
+
+i.fa.icon-tip::before {
+  background: no-repeat url("../img/tip.svg");
+}
+
+i.fa.icon-caution::before {
+  background: no-repeat url("../img/caution.svg");
+}
+
+i.fa.icon-warning::before {
+  background: no-repeat url("../img/warning.svg");
+}

pages/assets/css/_doc.css

@@ -107,7 +107,12 @@
 
 #editorPreview i.fa {
   hyphens: none;
-  font-style: normal;
+  display: inline-block;
+}
+
+#editorPreview span.icon > i.fa {
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font: normal normal normal 1rem FontAwesome;
 }
 
 #editorPreview p code,
@@ -334,7 +339,7 @@
   line-height: 1;
   font-weight: var(--admonition-label-font-weight);
   text-transform: uppercase;
-  border-radius: 0.45rem;
+  border-radius: 1rem;
   transform: translate(-0.5rem, -50%);
 }
 
@@ -367,6 +372,7 @@
   display: inline-flex;
   align-items: center;
   height: 100%;
+  font-style: normal;
 }
 
 #editorPreview .admonitionblock .icon i::after {

pages/assets/css/main.css

 @import "highlight.js/styles/default.css";
 @import "highlight.js/styles/monokai-sublime.css";
+@import "_font-awesome.css";
 @import "_minireset.css";
 @import "_base.css";
 @import "_doc.css";

pages/assets/img/caution.svg

+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#000000" opacity="0.20" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>
+  <g transform="translate(254.8 256)">
+    <g transform="scale(0.6, 0.6)">
+      <path fill="white" d="M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z" transform="translate(-188 -256)"/>
+    </g>
+  </g>
+</svg>

pages/assets/img/important.svg

+<svg class="svg-inline--fa fa-times fa-w-11 fa-inverse" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#000000" opacity="0.20" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>
+  <g transform="translate(255 256)">
+    <g transform="scale(0.6, 0.6)">
+      <path fill="white" d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z" transform="translate(-95 -256)"/>
+    </g>
+  </g>
+</svg>

pages/assets/img/note.svg

+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#000000" opacity="0.20" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>
+  <g transform="translate(255.4 256)">
+    <g transform="scale(0.6, 0.6)">
+      <path fill="white" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z" transform="translate(-95 -256)"/>
+    </g>
+  </g>
+</svg>

pages/assets/img/tip.svg

+<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#000000" opacity="0.20" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>
+  <g transform="translate(256 256)">
+    <g transform="scale(0.6, 0.6)">
+      <path fill="white" d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z" transform="translate(-176 -256)"/>
+    </g>
+  </g>
+</svg>

pages/assets/img/warning.svg

+<svg class="svg-inline--fa fa-times fa-w-11 fa-inverse" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="#000000" opacity="0.20" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>
+  <g transform="translate(255 256)">
+    <g transform="scale(0.6, 0.6)">
+      <path fill="white" d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z" transform="translate(-95 -256)"/>
+    </g>
+  </g>
+</svg>