custom icons

D David Veksler May 21, 2025 3:38 PM · 1 year ago 711a1b3457ba7c0f7a7548b5d19e6e338d610b04
Parent: b8f44ca0c
1 file changed +18 −7

brazilian-jiu-jitsu.html +18 −7 ▰▰▰▰▰
Diff

diff --git a/brazilian-jiu-jitsu.html b/brazilian-jiu-jitsu.html
index 5a5ab4c..fb09090 100644
--- a/brazilian-jiu-jitsu.html
+++ b/brazilian-jiu-jitsu.html
@@ -630,7 +630,13 @@
 
     <header class="page-header">
         <div class="container">
-            <h1><i class="bi bi-diagram-2-fill"></i> Brazilian Jiu-Jitsu Cheatsheet</h1>
+            <h1>
+                <svg width="0.8em" height="0.8em" viewBox="0 0 24 24" fill="currentColor" style="opacity: 0.9; color: var(--color-accent); vertical-align: -0.1em;" xmlns="http://www.w3.org/2000/svg" aria-label="Gi icon" role="img">
+                  <path d="M12,2 L2,5 L7,10 L12,7 L17,10 L22,5 L12,2 Z M7,10 L7,12 L17,12 L17,10 Z M7,12 L5,21 L19,21 L17,12 Z"/>
+                </svg>
+                Brazilian Jiu-Jitsu Cheatsheet
+              </h1>
+
             <p class="lead">Your comprehensive guide to the core concepts, positions, techniques (beginner to advanced), mindset, S&C, and principles of "The Gentle Art". Navigate the essentials of BJJ for all levels. Check off items as you master them. Printable.</p>
         </div>
     </header>
@@ -832,7 +838,7 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-diagram-3-fill"></i> Positional Hierarchy</h5>
+                        <h5><svg width="1.1em" height="1.1em" viewBox="0 0 16 16" fill="currentColor" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg"><path d="M8 1 L1.5 14 L14.5 14 Z M8 3.5 L3.5 13 L12.5 13 Z M8 6.5 L5.5 12 L10.5 12 Z"/></svg> Positional Hierarchy</h5>
                         <p class="card-text">Control leads to submissions. Understand the common positions from most to least dominant (generally for the top player).</p>
                         <ol style="list-style: none; padding-left: 0;">
                              <li data-category="position" data-skill="fundamental" data-style="both" data-position="back-control-top">
@@ -901,7 +907,7 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-shield-shaded"></i> The Guard (Bottom)</h5>
+                        <h5><svg width="1.1em" height="1.1em" viewBox="0 0 16 16" fill="currentColor" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM4.5 13.5V10c0-2.071 1.567-3.75 3.5-3.75s3.5 1.679 3.5 3.75v3.5a.5.5 0 0 1-1 0V10c0-1.519-.933-2.75-2.5-2.75S5.5 8.481 5.5 10v3.5a.5.5 0 0 1-1 0z"/></svg> The Guard (Bottom)</h5>
                         <p class="card-text">Using legs from your back to control, defend, sweep or submit. Grouped by common learning progression.</p>
 
                         <p class="group-label">Beginner / Fundamental:</p>
@@ -1142,7 +1148,7 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-arrow-repeat"></i> Sweeps (From Guard)</h5>
+                        <h5><svg width="1.1em" height="1.1em" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 3.5 A5 5 0 0 0 6.5 8.5 M4.5 12.5 A5 5 0 0 0 9.5 7.5" stroke-linecap="round"/><path d="M11.5 6.5 L11.5 3.5 L8.5 3.5 M4.5 9.5 L4.5 12.5 L7.5 12.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Sweeps (From Guard)</h5>
                         <p class="card-text">Reversing from bottom to top position. Grouped by common guard types/difficulty.</p>
 
                              <p class="group-label">Beginner / Fundamental (Often from Closed Guard):</p>
@@ -1290,7 +1296,7 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-explicit-fill"></i> Submissions (Finishes)</h5>
+                        <h5><svg width="1.1em" height="1.1em" viewBox="0 0 16 16" fill="currentColor" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg"><path d="M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm4 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4z M4.5 5.5l7 7 M11.5 5.5l-7 7" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round"/></svg> Submissions (Finishes)</h5>
                         <p class="card-text">Techniques forcing submission ("Tap"). Grouped by common learning progression and type.</p>
 
                             <p class="group-label">Beginner / Fundamental (High % from basic positions):</p>
@@ -1511,7 +1517,7 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-lightning-charge-fill"></i> Strength & Conditioning for BJJ</h5>
+                        <h5><svg width="1.1em" height="1.1em" viewBox="0 0 16 16" fill="currentColor" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 4.5A2.5 2.5 0 0 0 8 2a2.5 2.5 0 0 0-2.5 2.5H4V6h1.5a.5.5 0 0 1 0 1H4v1h1.5a.5.5 0 0 1 0 1H4v1.5A3.5 3.5 0 0 0 7.5 14h1A3.5 3.5 0 0 0 12 10.5V9h-1.5a.5.5 0 0 1 0-1H12V7h-1.5a.5.5 0 0 1 0-1H12V4.5h-1.5zM8 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/></svg> Strength & Conditioning for BJJ</h5>
                         <p class="card-text">Supporting your mat training with physical preparation can enhance performance, reduce injury risk, and improve recovery. Focus on functional fitness relevant to grappling.</p>
                         <ul>
                             <li data-category="s&c" data-skill="all" data-style="both">
@@ -1586,7 +1592,12 @@
              <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-brain"></i> Mindset & The Journey</h5>
+                        <h5>
+                            <svg width="1.1em" height="1.1em" viewBox="0 0 24 24" fill="currentColor" style="color: var(--color-secondary); margin-right: 0.2rem; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg" aria-label="Mindset icon" role="img">
+                              <path d="M12 3C8.69 3 6 5.69 6 9c0 2.08 1.07 3.92 2.69 5.06L7 19h10l-1.69-4.94C16.93 12.92 18 11.08 18 9c0-3.31-2.69-6-6-6zm-3.5 7.5c-.83 0-1.5-.67-1.5-1.5S7.67 7.5 8.5 7.5s1.5.67 1.5 1.5S9.33 10.5 8.5 10.5zm3.5-5C11.17 5.5 10.5 6.17 10.5 7s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S12.83 5.5 12 5.5zm3.5 5c-.83 0-1.5-.67-1.5-1.5S14.67 7.5 15.5 7.5s1.5.67 1.5 1.5S16.33 10.5 15.5 10.5z"/>
+                            </svg>
+                            Mindset & The Journey
+                          </h5>
                          <p class="card-text">BJJ is a marathon, not a sprint. Cultivating the right mindset is crucial for long-term progression and enjoyment.</p>
                          <ul>
                             <li data-category="mindset" data-skill="all" data-style="both">