Icon Replacement Demo — learnbess.com

Before & After

Audience Cards — 3 emoji replaced with Tabler SVG icons

The "Who this is for" section on learnbess.com uses emoji as icons inside audience cards. The skill swaps each emoji for a crisp, stroke-based SVG icon that scales cleanly at any size and can be themed via color: var(--primary).

Before emoji icons — platform-rendered, unthemeable

Original learnbess.com markup

⚡️

Career switchers

Coming from solar, wind, oil & gas, or electrical engineering? BESS has its own vocabulary, mental models, and commercial logic. This course closes the gap.

🏗️

New hires

Just joined a developer, EPC, or O&M team? Get up to speed fast. No more nodding along in meetings — understand what’s actually being decided.

🎯

Teams & managers

Running a BESS team or managing people who do? A shared vocabulary and common mental models cut through the noise and speed up every decision.

<!-- emoji approach -->
<p class="audience-icon">⚡️</p>
<!-- platform-rendered, no color control,
     inconsistent across OS/browser -->

After Tabler SVG icons — scalable, themeable

Modified markup 3 icons replaced

Career switchers

Coming from solar, wind, oil & gas, or electrical engineering? BESS has its own vocabulary, mental models, and commercial logic. This course closes the gap.

New hires

Just joined a developer, EPC, or O&M team? Get up to speed fast. No more nodding along in meetings — understand what’s actually being decided.

Teams & managers

Running a BESS team or managing people who do? A shared vocabulary and common mental models cut through the noise and speed up every decision.

<!-- SVG approach — inline, themeable -->
<svg class="audience-icon" viewBox="0 0 24 24"
     fill="none" stroke="currentColor"
     stroke-width="2" aria-hidden="true">
  <path d="M13 3v7h6l-8 11v-7H5z"/>
</svg>
<!-- color inherits from CSS:
     .audience-icon { color: var(--primary); } -->

Exact diff — audience-card icon element

src/pages/index.astro — audience cards section (3 × repeated)
- <p class="audience-icon">⚡️</p>+ <svg class="audience-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">+   <path d="M13 3v7h6l-8 11v-7H5z"/>+ </svg>  - <p class="audience-icon">🏗️</p>+ <svg class="audience-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">+   <path d="M6 21h6m-3 0V3L3 9h18M9 3l10 6"/>+   <path d="M17 9v4a2 2 0 1 1-2 2"/>+ </svg>  - <p class="audience-icon">🎯</p>+ <svg class="audience-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">+   <path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0"/>+   <path d="M7 12a5 5 0 1 0 10 0a5 5 0 1 0-10 0"/>+   <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/>+ </svg>

/* CSS change — same class, swap font-size for width/height */
/* Before: */
.audience-icon { font-size: 2rem; }

/* After: */
.audience-icon { width: 2rem; height: 2rem; color: var(--primary); }

Bonus — CSS `content:` Character Patterns

Extra scope

Beyond the audience cards, learnbess.com also uses content: "✓" and content: "→" in CSS pseudo-elements for pricing checkmarks and module navigation arrows. These can be upgraded to inline SVG data URIs for sharper rendering at high DPI and consistent cross-platform appearance.

✗ Before — content: "✓"

Lifetime course access
Certificate of completion
Module quizzes included
PDF reference glossary

.feature-list li::before {
  content: "✓";
  color: var(--primary);
  /* Rendered by OS font — varies on
     Windows, macOS, Android, iOS */
}

Platform glyph: rendering weight, baseline alignment, and size all vary across operating systems and browsers.

✓ After — SVG data URI background-image

Lifetime course access
Certificate of completion
Module quizzes included
PDF reference glossary

.feature-list li::before {
  content: "";
  background-image: url("data:image/svg+xml,
    %3Csvg xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 24 24' fill='none'
    stroke='%230066cc' stroke-width='2.5'
    stroke-linecap='round'
    stroke-linejoin='round'%3E
    %3Cpolyline points='20 6 9 17 4 12'/%3E
    %3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 14px; height: 14px;
}

SVG data URI: pixel-perfect at any DPI, brand color baked in, zero extra HTTP requests, consistent across every platform.

✗ Before — content: "→"

Module 1: Grid fundamentals
Module 2: Cell chemistry & BMS
Module 3: Power conversion
Module 4: Revenue stacking

.module-link::before {
  content: "→";
  color: var(--primary);
  /* Unicode arrow — weight inconsistent
     with body typeface */
}

The Unicode arrow character has no stroke-width control; it never quite matches the weight of a Tabler stroke icon used elsewhere on the page.

✓ After — tabler:arrow-right data URI

Module 1: Grid fundamentals
Module 2: Cell chemistry & BMS
Module 3: Power conversion
Module 4: Revenue stacking

.module-link::before {
  content: "";
  background-image: url("data:image/svg+xml,
    %3Csvg xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 24 24' fill='none'
    stroke='%230066cc' stroke-width='2.5'
    stroke-linecap='round'
    stroke-linejoin='round'%3E
    %3Cline x1='5' y1='12' x2='19' y2='12'/%3E
    %3Cpolyline points='12 5 19 12 12 19'/%3E
    %3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 13px; height: 13px;
}

Stroke weight matches all other Tabler icons on the page. Color stays on-brand and is easy to update from a single CSS variable.

Audience Cards — 3 emoji replaced with Tabler SVG icons

Career switchers

New hires

Teams & managers

Career switchers

New hires

Teams & managers

Bonus — CSS content: Character Patterns

Bonus — CSS `content:` Character Patterns