Icons

Shock includes 3,348 icons across two libraries, both integrated with the template’s color system so you can tint any icon with a class.

Font Awesome2,016+ icons — the internet's icon library, used via web font.

Ionic Icons1,332 premium icons, shipped locally as SVG in assets/svg.

Font Awesome web font

Font Awesome renders through an <i> tag. The icon and primary classes are Shock additions — they apply the template’s icon sizing and color:

<i class="fa-solid fa-camera icon primary"></i>

Ionic Icons local SVG

The Ionic set ships as SVG files in assets/svg. Reference one with an <img> tag and the data-cbase-icon attribute:

<img src="assets/svg/layers-outline.svg" alt="Icon name" data-cbase-icon="32" />

The data-cbase-icon attribute (the number is the size) converts the image into inline SVG so it can be colored with Shock’s color classes — just like a Font Awesome icon.

SVG icons need a local server

Because the Ionic icons are loaded as separate SVG files, they won’t render if you open the HTML directly from disk (file://). Run the template through a local server — a tool like XAMPP works well — while you develop.

Continue to Global SectionsBuild the header/navbar with mega menus and sticky behavior.