resolves #9 include FontAwesome to support the playground and use it for the admonition icons

package-lock.json

@@ -28,6 +28,7 @@
         "cssnano-preset-lite": "^2.0.3",
         "eslint": "^8.9.0",
         "eslint-config-standard": "^17.0.0-1",
+        "font-awesome": "https://git@github.com/FortAwesome/Font-Awesome.git#v4.7.0",
         "highlight.js": "^9.18.3",
         "highlightjs-line-numbers.js": "^2.8.0",
         "postcss": "^8.4.6",
@@ -4881,6 +4882,15 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "git+https://git@github.com/FortAwesome/Font-Awesome.git#a8386aae19e200ddb0f6845b5feeee5eb7013687",
+      "dev": true,
+      "license": "(OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
@@ -14004,6 +14014,11 @@
       "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
       "dev": true
     },
+    "font-awesome": {
+      "version": "git+https://git@github.com/FortAwesome/Font-Awesome.git#a8386aae19e200ddb0f6845b5feeee5eb7013687",
+      "dev": true,
+      "from": "font-awesome@https://git@github.com/FortAwesome/Font-Awesome.git#v4.7.0"
+    },
     "fraction.js": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",

package.json

@@ -39,6 +39,7 @@
     "cssnano-preset-lite": "^2.0.3",
     "eslint": "^8.9.0",
     "eslint-config-standard": "^17.0.0-1",
+    "font-awesome": "https://git@github.com/FortAwesome/Font-Awesome.git#v4.7.0",
     "highlight.js": "^9.18.3",
     "highlightjs-line-numbers.js": "^2.8.0",
     "postcss": "^8.4.6",

pages/assets/css/_base.css

@@ -1865,3 +1865,36 @@ pre code.hljs {
 .hljs-ln-code {
   padding-left: 10px;
 }
+
+i.fa[class^="icon-"],
+i.fa[class*=" icon-"]::before {
+  content: "";
+  height: 100%;
+  width: 1.75rem;
+  margin-left: -0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5em 0 0 0.5em;
+  background: rgb(0 0 0 / 20%);
+}
+
+i.fa.icon-important::before {
+  content: "\f12a";
+}
+
+i.fa.icon-note::before {
+  content: "\f129";
+}
+
+i.fa.icon-tip::before {
+  content: "\f0eb";
+}
+
+i.fa.icon-caution::before {
+  content: "\f06d";
+}
+
+i.fa.icon-warning::before {
+  content: "\f071";
+}

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,
@@ -328,13 +333,12 @@
   position: absolute;
   top: 0;
   left: 0;
-  font-size: calc(15 / var(--rem-base) * 1rem);
   padding: 0 0.5rem;
   height: 1.25rem;
   line-height: 1;
   font-weight: var(--admonition-label-font-weight);
   text-transform: uppercase;
-  border-radius: 0.45rem;
+  border-radius: 0.5em;
   transform: translate(-0.5rem, -50%);
 }
 
@@ -364,13 +368,14 @@
 }
 
 #editorPreview .admonitionblock .icon i {
-  display: inline-flex;
-  align-items: center;
   height: 100%;
+  font-style: normal;
+  font-size: calc(15 / var(--rem-base) * 1rem);
 }
 
 #editorPreview .admonitionblock .icon i::after {
   content: attr(title);
+  padding-left: 0.5rem;
 }
 
 #editorPreview .imageblock {

pages/assets/css/main.css

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

rollup.config.js

@@ -46,7 +46,8 @@ export default {
             'node_modules/@fontsource/urbanist/files/urbanist-latin-900-normal.woff2',
             'node_modules/@fontsource/source-code-pro/files/source-code-pro-latin-400-normal.woff2',
             'node_modules/@fontsource/source-code-pro/files/source-code-pro-latin-500-normal.woff2',
-            'node_modules/@fontsource/source-code-pro/files/source-code-pro-latin-600-normal.woff2'
+            'node_modules/@fontsource/source-code-pro/files/source-code-pro-latin-600-normal.woff2',
+            'node_modules/font-awesome/fonts/fontawesome-webfont.woff2'
           ],
           dest: '_site/assets/css/files'
         }