Salla Icons is an icon library that can be easily integrated into a Twilight theme. It allows developers to add scalable vector icons to their website without the need for additional images. In this article, we'll go over the steps to add Salla Icons to a Twilight theme and show some examples of how to use it.To see a full example of the available icons, the developer can check out the following Codepen example here.
The above example provides a comprehensive list of the icons available in Salla Icons and demonstrates how to use them in a variety of contexts.
📙 What you'll learn#
How to use Salla Icons#
The first step to using Salla Icons in a Twilight theme is to make sure that icons library's CSS file in the theme's head section. Developer can either link to the CSS file hosted on the Salla Icons website or download it and host it on your own server:Once the CSS file is linked, you can start using Salla icons on the theme by using the appropriate class names.By default, each Twilight theme includes the Salla Icons library
Usage#
For example, to add a sicon-discount-calculator icon, the developer can use the following code:Developer can also use Salla Icons in conjunction with other HTML elements, such as buttons. For example, to create a "Add to Cart" button with a shopping cart icon sicon-add-to-cart, you can use the following code:Developer can also use Font Salla Icons with liquid variables, for example, to show the number of items in the cart:Browsing Salla Icons in an IcoMoon#
Salla Icons can be browsed and used from IcoMoon, a popular online icon library and tool for creating custom icon fonts. First, visit IcoMoon, and then follow the following steps:1.
Download the Salla Icons Library from here. Note: Click "s+ctrl" in windows or "Cmd -t" in Mac OS, to save the file locally. 3.
Click on Import Icon on the upper left of the page.
4.
Import the file downloaded in step 1.
5.
Choose the Icons you wish to use by clicking on the Icon. The selected Icons will chage color if selected.
7.
Click on Generate Font F on th bottom right of the page
8.
Click on prefrences to enter a prefix
10.
Click Download to download the zip file for the Icons
12.
Open Demo file, which will display the list of Icons with Salla Icon prefix
