Pulling in Amonkhet Inventions and Nemesis/Portal 2 code fixes; updating docs on using Keyrune via CDN

bower_components/keyrune/.bower.json

@@ -1,6 +1,7 @@
 {
   "name": "keyrune",
   "homepage": "http://andrewgioia.github.io/Keyrune",
+  "version": "2.2.2",
   "authors": [
     "Andrew Gioia <andrewgioia@gmail.com>"
   ],
@@ -31,11 +32,11 @@
     "node_modules",
     "bower_components"
   ],
-  "_release": "62d686615b",
+  "_release": "2.2.2",
   "_resolution": {
-    "type": "branch",
+    "type": "version",
-    "branch": "master",
+    "tag": "v2.2.2",
-    "commit": "62d686615b70e177a465da48084d650db4dc10ae"
+    "commit": "b5d1d69baab484bc6296bcc30c43609481e69ee1"
   },
   "_source": "https://github.com/andrewgioia/keyrune.git",
   "_target": "*",

bower_components/keyrune/bower.json

@@ -1,7 +1,7 @@
 {
     "name": "keyrune",
     "homepage": "http://andrewgioia.github.io/Keyrune",
-    "version": "2.2.0",
+    "version": "2.2.2",
     "authors": [
         "Andrew Gioia <andrewgioia@gmail.com>"
     ],

bower_components/keyrune/css/keyrune.css

@@ -264,6 +264,7 @@
 .ss-mmq:before {
   content: "\e625";
 }
+.ss-nem:before,
 .ss-nms:before {
   content: "\e626";
 }
@@ -536,6 +537,7 @@
 .ss-por:before {
   content: "\e664";
 }
+.ss-p02:before,
 .ss-po2:before {
   content: "\e665";
 }
@@ -713,6 +715,9 @@
 .ss-pmpu:before {
   content: "\e91a";
 }
+.ss-mp2:before {
+  content: "\e922";
+}
 /**
  * Online */
 .ss-med:before {

bower_components/keyrune/fonts/keyrune.svg

@@ -196,4 +196,5 @@
 <glyph unicode="&#xe91f;" glyph-name="pz2, pmotc" d="M705.038 385.742c0-106.838-86.61-193.446-193.448-193.446-106.836 0-193.446 86.608-193.446 193.446 0 106.836 86.61 193.446 193.446 193.446 106.838 0 193.448-86.61 193.448-193.446zM772.544 273.436l-12.186-182.906h210.506l38.556 336.084c-108.65-26.016-168.068-89.688-236.872-153.174zM244.698 362.582c-72.052 54.23-157.626 110.21-240.376 146.37l-3.976 34.66 286.7 3.964c0 0-23.302-23.302-36.012-74.142s-6.336-110.852-6.336-110.852zM250.634 273.436l12.184-182.906h-210.496l-38.556 336.084c108.65-26.016 168.068-89.688 236.872-153.174zM379.896 170.060h-50.906v-80.046h364.658v80.046h-50.904c-35.666-27.776-81.47-44.47-131.424-44.47s-95.758 16.694-131.424 44.47zM779.302 363.004c72.052 54.232 157.626 110.212 240.376 146.37l3.976 34.662-286.7 3.964c0 0 23.302-23.302 36.012-74.142s6.336-110.854 6.336-110.854zM771.692 805.942c21.74-56.472 35.072-116.88 35.008-177.532l205.592-0.012-119.012 177.536-121.588 0.008zM534.826 805.958c3.284-36.892 4.214-73.968 4.37-110.988-0.092-22.188-0.37-44.384-1.53-66.546l199.288-0.010c-0.318 37.182-5.398 71.438-15.664 107.246-7.102 23.922-14.818 47.752-25.662 70.288l-160.802 0.010zM312.568 805.974c-10.868-22.496-18.71-46.376-25.676-70.314-9.4-34.966-16.268-70.866-15.666-107.222l189.004-0.010c-1.13 22.16-1.486 44.356-1.53 66.542 0.152 37.032 1.154 74.088 4.37 110.994l-150.502 0.010zM121.39 805.986l-119.012-177.534 199.104-0.010c0.176 60.712 13.214 120.978 35.022 177.536l-115.114 0.008z" />
 <glyph unicode="&#xe920;" glyph-name="v0x" horiz-adv-x="624" d="M294.592 954.618c47.4-1.956 88.556-24.488 123.686-55.028 41.152-37.152 65.384-102.342 77.404-191.206 7.864-61.794 10.21-124.352 7.992-186.598l40.12-9.158c4.176 11.386 14.338 17.872 26.206 18.47 15.444 0 27.962-12.518 27.962-27.96l-0.144-2.842 15.394-3.514 10.168-488.040-0.312-0.128c0.358-1.762 0.154-0.546 0.312-3.686 0-15.442-12.518-27.96-27.96-27.96-8.64 0.208-17.406 3.998-22.358 11.332l-71.086-28.88c-4.174-11.178-14.396-17.452-26.024-18.038-15.018 0.258-27.15 11.892-27.908 26.91l-92.768 15.862c-4.11-12.066-14.116-19.258-26.754-19.896-15.442 0-27.96 12.518-27.96 27.962l0.064 1.278-82.494 14.106c-2.708-12.49-14.882-19.862-26.872-20.468-15.442 0-27.96 12.518-27.96 27.96l0.094 1.868-76.012 12.996c-4.18-10.87-14.482-16.836-25.758-17.406-14.76 0.26-27.14 11.686-27.89 26.58l-22.946 3.922-10.168 472.79 10.27 0.158 3.788 0.734c0.558 13.724 9.366 24.16 26.408 25.798 10.98 1.056 23.108-7.308 26.604-15.622l38.462 7.552c-0.726 15.752-0.184 5.048-1.958 32.094-2.564 34.63-4.044 58.214-4.984 82.578-1.958 50.712-0.806 92.71 4.582 129.062 7.192 48.512 25.204 83.368 48.252 112.788 36.674 46.812 81.74 62.474 142.55 63.63h-0.002zM291.578 857.318v0c-28.404 0.22-50.884-16.62-67.64-38.226-25.052-33.806-26.598-76.144-23.13-166.032 0.884-22.892 2.3-45.464 4.784-78.994 2.226-30.174 1.378-18.33 2.598-35.526l70.464-3.084c2.602 12.778 14.668 20.44 26.992 21.060 14.054-0.2 24.732-9.986 27.478-23.442l6.412-0.282 50.838-4.236 11.72-1.212c2.246 55.926-0.844 111.85-7.17 167.41-9.080 67.134-20.648 98.158-44.778 129.364-15.53 20.016-33.396 30.838-58.568 33.2z" />
 <glyph unicode="&#xe921;" glyph-name="dds" d="M0.046 424.448c0 0 89.368-139.822 116.36-149.134 9.866-3.402 64.492 48.19 132.236 118.018l60.012-75.942-116.934-116.45c0 0 93.304-98.934 114.544-80.608 104.094 89.814 198.886 183.418 280.282 273.522l79.514-80.574c-118.904-144.010-263.698-292.404-346.164-298.252-152.798-10.838-319.85 229.968-319.85 229.968v179.452zM519.558 707.434l-0.358-0.222c-8.86-17.342-20.91-31.416-31.786-45.224-37.108-47.114-76.678-92.248-116.626-136.952l67.446-79.128 73.108 73.568 318.752-317.746c0 0-93.304-98.934-114.542-80.608-31.002 26.748-61.532 54.268-91.27 82.106l-85.91-84.506c63.352-59.034 121.82-99.946 163.546-102.904 152.798-10.838 322.036 227.116 322.036 227.116v181.514c0 0-91.554-139.034-118.546-148.344-26.99-9.31-380.356 399.788-384.868 428.482-0.174 0.942-0.698 2.082-0.982 2.848zM321.164 935.676c-19.444-1.066-38.732-12.83-54.736-22.89-48.032-30.19-88.664-72.828-114.188-123.624-20.006-41.152-29.696-77.69-16.496-136.138 3.614-16.010 10.224-34.694 17.158-51.044 17.388-41.002 124.604-195.214 251.986-342.54l79.422 82.86c-128.028 134.934-222.2 254.682-250.482 316.684-43.694 95.782 94.15 238.314 94.15 271.888-0.338 3.742-3.452 4.704-6.814 4.804zM705.906 936.372c-5.18-0.104-10.942-0.18-12.070-6.288 0-19.004 55.704-61.074 83.742-124.884 20.626-46.944 29.004-100.548 12.568-140.186-13.522-32.614-40.244-75.54-86.454-134.024l70.998-77.988c50.56 64.894 72.404 95.788 84.478 128.576 27.382 74.356 26.95 99.082 21.682 150.842-7.136 70.13-44.692 133.814-102.624 173.916-20.942 14.498-44.768 26.844-70.306 30.030l-2.014 0.006z" />
+<glyph unicode="&#xe922;" glyph-name="mp2" horiz-adv-x="968" d="M380.178 250.996c-18.364 64.3 2.234 244.018-39.752 273.292-41.984 29.274-167.094 77.218-193.106 115.34-26.014 38.122 122.97 257.462 122.97 257.462s-205.71-107.646-267.686-288.336c-22.716-63.498 186.85-119.602 214.938-131.158 28.090-11.554 74.996-101.682 52.748-266.662 0-78.246 104.084-150.66 166.952-187.262 27.2-15.838 46.686-24.97 46.686-24.97-0.288 0 16.918 8.55 41.282 23.446 59.070 36.114 160.212 109.528 156.066 188.786-8.692 166.188 24.66 255.108 52.748 266.662 19.506 8.024 126.282 44.182 186.102 86.056 26.426 18.498 52.806 36.428 45.864 55.834-61.978 180.69-263.738 277.604-263.738 277.604s136.212-215.246 110.198-253.37c-26.014-38.122-157.174-86.4-199.158-115.674s-17.962-215.988-36.326-280.288c-11.736-41.088-46.462-67.478-70.006-81.176-13.3-7.74-23.032-11.428-23.032-11.428 0.324 0-8.864 3.434-21.98 10.348-26.634 14.036-69.466 42.414-81.77 85.494zM576.966 738.738c0 52.152-43.312 94.428-96.74 94.428-53.426 0-96.738-42.276-96.738-94.428s43.312-94.43 96.738-94.43c53.428 0 96.74 42.278 96.74 94.43z" />
 </font></defs></svg>

bower_components/keyrune/index.html

@@ -41,6 +41,7 @@
         You can view a few of the set symbol font icons and the available examples below
         (some may only be available for specific browsers).
     </p>
+    <h3>Standard rarities</h3>
     <p>
         <i class="ss ss-leg ss-3x ss-common"></i>&nbsp;
         <i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
@@ -65,6 +66,7 @@
         <i class="ss ss-zen ss-mythic"></i>&nbsp;
         Mythic Rare (Worldwake)
     </p>
+    <h3>Special rarities</h3>
     <p>
         <i class="ss ss-isd ss-3x ss-foil ss-grad"></i>&nbsp;
         <i class="ss ss-isd ss-2x ss-foil"></i>&nbsp;

bower_components/keyrune/less/icons.less

@@ -51,7 +51,8 @@
 .@{ss-prefix}-uds:before { content: "\e624"; } // Urza's Destiny
 /* Mercadian Block */
 .@{ss-prefix}-mmq:before { content: "\e625"; } // Mercadian Masque
-.@{ss-prefix}-nms:before { content: "\e626"; } // Nemesis
+.@{ss-prefix}-nem:before,
+.@{ss-prefix}-nms:before,{ content: "\e626"; } // Nemesis
 .@{ss-prefix}-pcy:before { content: "\e627"; } // Prophecy
 /* Invasion Block */
 .@{ss-prefix}-inv:before { content: "\e628"; } // Invasion
@@ -165,6 +166,7 @@
  * Beginner */
 
 .@{ss-prefix}-por:before { content: "\e664"; } // Portal
+.@{ss-prefix}-p02:before,
 .@{ss-prefix}-po2:before { content: "\e665"; } // Portal 2
 .@{ss-prefix}-ptk:before { content: "\e666"; } // Portal 3 Kingdoms
 .@{ss-prefix}-s99:before { content: "\e667"; } // Starter 1999
@@ -234,10 +236,11 @@
 .@{ss-prefix}-psalvat05:before { content: "\e909"; } // Salvat 2005
 .@{ss-prefix}-psalvat11:before { content: "\e90a"; } // Salvat 2011
 .@{ss-prefix}-mps:before,
-.@{ss-prefix}-mp1:before { content: "\e913"; } // Masterpieces: Kaladesh
+.@{ss-prefix}-mp1:before { content: "\e913"; } // Kaladesh Inventions
 .@{ss-prefix}-pxbox:before { content: "\e915"; } // Xbox Media Promo
 .@{ss-prefix}-pmps:before { content: "\e919"; } // Magic Premiere Shop
 .@{ss-prefix}-pmpu:before { content: "\e91a"; } // Mirrodin Pure promo
+.@{ss-prefix}-mp2:before { content: "\e922"; } // Amonkhet Invocations
 
 /**
  * Online */

bower_components/keyrune/less/variables.less

@@ -2,6 +2,6 @@
  * Global */
 
 @ss-font-path: '../fonts';
-@ss-version: '2.2.0';
+@ss-version: '2.2.2';
 @ss-font-size-base: 14px;
 @ss-prefix: ss;

bower_components/keyrune/sass/_variables.scss

@@ -1,7 +1,7 @@
 // _variables.scss
 
 // #.
-$keyrune_version: '2.1.6' !default;
+$keyrune_version: '2.2.2' !default;
 $keyrune_font_path:  '../fonts' !default;
 
 // #. Keyrune Font ==============================
@@ -111,6 +111,7 @@ $mtg_setlist: (
   ("Urza's Destiny", 'uds', "\e624"),
   // Mercadian block
   ("Mercadian Masque", 'mmq', "\e625"),
+  ("Nemesis", 'nem', "\e626"),
   ("Nemesis", 'nms', "\e626"),
   ("Prophecy", 'pcy', "\e627"),
   // Invasion block
@@ -216,6 +217,7 @@ $mtg_setlist: (
   ("Rinascimento", 'xrin', "\e918"),
   // # Beginner Sets
   ("Portal", 'por', "\e664"),
+  ("Portal 2", 'p02', "\e665"),
   ("Portal 2", 'po2', "\e665"),
   ("Portal 3 Kingdoms", 'ptk', "\e666"),
   ("Starter 1999", 's99', "\e667"),
@@ -276,6 +278,7 @@ $mtg_setlist: (
   ("Xbox Media Promo", 'pxbox', "\e915"),
   ("Magic Premiere Shop", 'pmps', "\e919"),
   ("Mirrodin Pure", 'pmpu', "\e91a"),
+  ("Amonkhet Invocations", 'mp2', "\e922"),
   // # Online Only
   ("Masters Edition", 'med', "\e68d"),
   ("Masters Edition II", 'me2', "\e68e"),

cheatsheet.html

@@ -165,14 +165,17 @@
                     <span class="utf"><i>&#xe625;</i> ss-mmq <code>&amp;#xe625;</code></span>
                     <span class="utf"><i>&#xe63e;</i> ss-mor <code>&amp;#xe63e;</code></span>
                     <span class="utf"><i>&#xe913;</i> ss-mp1 <code>&amp;#xe913;</code></span>
+                    <span class="utf"><i>&#xe922;</i> ss-mp2 <code>&amp;#xe922;</code></span>
                     <span class="utf"><i>&#xe913;</i> ss-mps <code>&amp;#xe913;</code></span>
                     <span class="utf"><i>&#xe631;</i> ss-mrd <code>&amp;#xe631;</code></span>
+                    <span class="utf"><i>&#xe626;</i> ss-nem <code>&amp;#xe626;</code></span>
                     <span class="utf"><i>&#xe626;</i> ss-nms <code>&amp;#xe626;</code></span>
                     <span class="utf"><i>&#xe649;</i> ss-nph <code>&amp;#xe649;</code></span>
                     <span class="utf"><i>&#xe62b;</i> ss-ody <code>&amp;#xe62b;</code></span>
                     <span class="utf"><i>&#xe901;</i> ss-ogw <code>&amp;#xe901;</code></span>
                     <span class="utf"><i>&#xe62e;</i> ss-ons <code>&amp;#xe62e;</code></span>
                     <span class="utf"><i>&#xe697;</i> ss-ori <code>&amp;#xe697;</code></span>
+                    <span class="utf"><i>&#xe665;</i> ss-p02 <code>&amp;#xe665;</code></span>
                     <span class="utf"><i>&#xe659;</i> ss-pc2 <code>&amp;#xe659;</code></span>
                     <span class="utf"><i>&#xe911;</i> ss-pca <code>&amp;#xe911;</code></span>
                     <span class="utf"><i>&#xe627;</i> ss-pcy <code>&amp;#xe627;</code></span>

css/main.css

@@ -145,6 +145,11 @@ h4 {
     text-align: left;
 }
 
+h5 {
+    font-size: 17px;
+    margin: 15px 0 5px;
+}
+
 main {
     margin: 0;
     padding: 20px 0 25px;
@@ -319,3 +324,4 @@ footer {
 .e { color: #63A35C; }
 .a { color: #795DA3; }
 .v { color: #183691; }
+.o { color: #ED8C5A; }

icons.html

@@ -35,7 +35,7 @@
                 <i class="ss ss-pmtg2"></i>
                 Download
             </a>
-            <h2 class="sub">Complete 189 Magic set symbol font icons</h2>
+            <h2 class="sub">Complete 190 Magic set symbol font icons</h2>
         </div>
     </header>
 
@@ -43,7 +43,7 @@
         <div class="wrapper">
             <section>
                 <h3>
-                    View the full list of 189 set and expansion symbols below, for all sets and special edition products up to <strong>Amonkhet</strong>. To use the symbols on your desktop or just get the vectors, check out the <a href="cheatsheet.html">Cheatsheet</a>.
+                    View the full list of 190 set and expansion symbols below, for all sets and special edition products up to <strong>Amonkhet</strong>. To use the symbols on your desktop or just get the vectors, check out the <a href="cheatsheet.html">Cheatsheet</a>.
                 </h3>
             </section>
             <section class="content">
@@ -171,8 +171,8 @@
                     <div class="icon" id="mmq" name="Mercadian Masques">
                         <span><i class="ss ss-mmq"></i> Mercadian Masques <em>(mmq)</em></span>
                     </div>
-                    <div class="icon" id="nms" name="Nemesis">
+                    <div class="icon" id="nem" name="Nemesis">
-                        <span><i class="ss ss-nms"></i> Nemesis <em>(nms)</em></span>
+                        <span><i class="ss ss-nem"></i> Nemesis <em>(nem)</em></span>
                     </div>
                     <div class="icon" id="pcy" name="Prophecy">
                         <span><i class="ss ss-pcy"></i> Prophecy <em>(pcy)</em></span>
@@ -432,8 +432,8 @@
                     <div class="icon" id="por" name="Portal">
                         <span><i class="ss ss-por"></i> Portal <em>(por)</em></span>
                     </div>
-                    <div class="icon" id="po2" name="Portal 2">
+                    <div class="icon" id="p02" name="Portal 2">
-                        <span><i class="ss ss-po2"></i> Portal 2 <em>(po2)</em></span>
+                        <span><i class="ss ss-p02"></i> Portal 2 <em>(p02)</em></span>
                     </div>
                     <div class="icon" id="ptk" name="Portal Three Kingdoms">
                         <span><i class="ss ss-ptk"></i> Portal Three Kingdoms <em>(ptk)</em></span>
@@ -608,8 +608,8 @@
                     <div class="icon" id="psalvat11" name="Salvat 2011">
                         <span><i class="ss ss-psalvat11"></i> Salvat 2011 <em>(psalvat11)</em></span>
                     </div>
-                    <div class="icon" id="mps" name="Kaladesh Inventions">
+                    <div class="icon" id="mp1" name="Kaladesh Inventions">
-                        <span><i class="ss ss-mps"></i> Kaladesh Inventions <em>(mps)</em></span>
+                        <span><i class="ss ss-mp1"></i> Kaladesh Inventions <em>(mp1)</em></span>
                     </div>
                     <div class="icon" id="pxbox" name="Xbox Media Promo">
                         <span><i class="ss ss-pxbox"></i> Xbox Media Promo <em>(pxbox)</em></span>
@@ -620,6 +620,9 @@
                     <div class="icon" id="pmpu" name="Mirrodin Pure">
                         <span><i class="ss ss-pmpu"></i> Mirrodin Pure <em>(pmpu)</em></span>
                     </div>
+                    <div class="icon" id="mp2" name="Amonkhet Invocations">
+                        <span><i class="ss ss-mp2"></i> Amonkhet Invocations <em>(mp2)</em></span>
+                    </div>
                 </div>
             </section>
             <section class="content">

index.html

@@ -45,7 +45,7 @@
                 </a>
             </div>
             <p>
-                Current version 2.2.0 includes all sets to Amonkhet.
+                Current version 2.2.2 includes all sets to Amonkhet.
             </p>
         </div>
     </header>
@@ -57,12 +57,31 @@
             </section>
             <section class="content">
                 <h4>Using Keyrune in your project</h4>
-                <p>Keyrune is CSS and font package you can use in your project to easily display MTG set symbols as font icons. You can download the source and manually include it in your application, or include it via Bower or Composer (project name "keyrune" for both).</p>
+                <p>Keyrune is CSS and font package you can use in your project to easily display MTG set symbols as font icons. You can download the source and manually include it in your application, or include it via Bower or NPM (project name "keyrune" for both).</p>
                 <p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ss ss-exp"&gt;&lt;/i&gt;</code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p>
+                <h5>Including Keyrune in your project</h5>
                 <p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p>
                 <blockquote>
                     &lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
                 </blockquote>
+                <p><strong>New!</strong> You can also now use Keyrune via CDN thanks to the amazing <a href="http://jsdelivr.com">jsDelivr</a> project! Include the latest CSS file and (currently) reference the font files via @font-face (we're working on removing this requirement as jsDelivr flattens the directory structure):</p>
+                <blockquote>
+                    &lt;<span class="e">link</span> <span class="a">href</span>="<span class="v">//cdn.jsdelivr.net/keyrune/latest/keyrune.min.css</span>" <span class="a">rel</span>="<span class="v">stylesheet</span>" <span class="a">type</span>="<span class="v">text/css</span>" /&gt;<br />
+                    &lt;<span class="e">style</span> <span class="a">type</span>="<span class="v">text/css</span>"&gt;<br />
+                    &nbsp;&nbsp;<span class="a">@font-face</span> {<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;font-family: '<span class="e">Keyrune</span>';<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;src: <span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.eot</span>');<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;src: <span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.eot?#iefix</span>') <span class="v">format</span>('<span class="e">embedded-opentype</span>'),<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.woff2</span>') <span class="v">format</span>('<span class="e">woff2</span>'),<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.woff</span>') <span class="v">format</span>('<span class="e">woff</span>'),<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.ttf</span>') <span class="v">format</span>('<span class="e">truetype</span>'),<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/keyrune/latest/keyrune.svg</span>') <span class="v">format</span>('<span class="e">svg</span>');<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;font-weight: <span class="o">normal</span>;<br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;font-style: <span class="o">normal</span>;<br />
+                    &nbsp;&nbsp;}<br />
+                    &lt;/<span class="e">style</span>&gt;
+                </blockquote>
+                <h5>Creating icons in your project</h5>
                 <p>Insert set symbol icons by using the <code>.ss</code> class and then the set code class, such as <code>.ss-mor</code> for Morningtide: <i class="ss ss-mor"></i></p>
                 <blockquote>
                     &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-mor"</span>&gt;&lt;/<span class="e">i</span>&gt;