Simplify basic usage.

cubing · Jan 8, 2025 · 97d0bb6 · 97d0bb6
1 parent bcf4d7c
commit 97d0bb6
Showing 1 changed file with 12 additions and 22 deletions.
diff --git a/src/web/icons.cubing.net/index.html b/src/web/icons.cubing.net/index.html
@@ -49,32 +49,22 @@ <h1><span class="cubing-icon event-clock"></span> It's time for cubing icons!</h
       <h2><a href="#cdn-usage" class="section-header-link">Use cubing icons in your web project</a></h2>
 
       <p>
-        The simplest way to use cubing icons in your project is to include one <a
-          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">CSS <code>&lt;link&gt;</code>
-          element</a>
-        on
-        your page and then use <code>class</code> on <a
-          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code> elements</a>
-        to
-        specify icons.
-      </p>
-
-      <p>
-        Here's an example:
+        The simplest way to use cubing icons in your project is as follows:
       </p>
 
       <div class="sample">
         <code>
-      <span class="dim">&lt;!-- The following line is needed only once per page. --&gt;<br></span>
-      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.cubing.net/v0/css/@cubing/icons/css&quot;&gt;
-      <br>
-      <br>
-      &lt;ul&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon event-333</b>"&gt;&lt;/span&gt; 3×3×3&lt;/li&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon event-clock</b>"&gt;&lt;/span&gt; Clock&lt;/li&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon unofficial-fto</b>"&gt;&lt;/span&gt; FTO&lt;/li&gt;<br>
-      &lt;/ul&gt;
-    </code>
+          <span class="dim">&lt;!-- Include the following line once on your page: --&gt;<br></span>
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.cubing.net/v0/css/@cubing/icons/css&quot;&gt;
+          <br>
+          <br>
+          <span class="dim">&lt;!-- Add any number of icons like this: --&gt;<br></span>
+          <span class="dim">&lt;ul&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon event-333</b>"&gt;&lt;/span&gt;<span class="dim"> 3×3×3&lt;/li&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon event-clock</b>"&gt;&lt;/span&gt;<span class="dim"> Clock&lt;/li&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon unofficial-fto</b>"&gt;&lt;/span&gt;<span class="dim"> FTO&lt;/li&gt;<br>
+          &lt;/ul&gt;</span>
+        </code>
       </div>
 
       <p>