Icons
Shock Theme has two essential icon libraries for building elements. Altogether there are 3,348 free and open-source icons that we consider the best available on the market.
- fontawesome.com +2,016
- ionic.io/ionicons +1,332
Font Awesome
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
Everything is already configured in web font mode and ready to use in Shock Theme, but if you want to understand how it works read the official documentation
Here is an example of an Font Awesome Icon:
<i class="fa-solid fa-camera icon primary">
Note that the icon and primary classes in the above example are extras to the Shock Theme. Read about the color system to learn how to color the icons.
Ionic Icon
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by Ionic.
Info
For better performance the Ionic Icons are distributed locally in SVG format in the folder assets/svg and have been improved to work together with the Shock Theme color system. If you need the original files, download the Designer Pack
Unlike the Font Awesome mentioned above, the Ionic Icon is not configured as a web font and therefore the img tag is used so that the icon is displayed correctly.
Here is an example of an Ionic Icon:
<img src="assets/svg/layers-outline.svg" alt="Icon name" data-cbase-icon="32" />
The data-cbase-icon attribute is responsible for converting the image file into SVG and allowing the colors to be assigned with color system from Shock Theme.
When you find an icon in the Ionic Icon Library just use the corresponding nomenclature on the element. Note an example for the cube-sharp icon where only part of the image URL has changed:
<img src="assets/svg/cube-sharp.svg" alt="Icon name" data-cbase-icon="32" />
Optionally you can add your priority SVG files in the assets/svg folder and use the Shock Theme icon system.
Info
SVG icons will not work when opening HTML files directly in your browser. We recommend that you build your website in a professional way, emulating a local server on your Desktop, for example: XAMPP or another one of your choice. When uploading the files to a web server, this will work fine, and optionally you can edit already hosted files, via FTP/SSH, etc.