This is a quick start guide to show you how you can use Lineicons.
Using Lineicons is easy. All you have to do is include the CSS file on your head tag.
You can link the CSS in two ways one is by using the CDN and the other one is by including the local CSS file.
Loading CSS locally
To use the local CSS file first you’ll have to download the files. You can download the files from the download menu.
Go ahead and download it. After that extract it and copy the lineicons.css file and the fonts folder and paste them to your project.
Now link the lineicons.css file to your project head to load the icons.
<link rel="stylesheet" href="lineicons.css">
You can also put all the Lineicons files and folders inside a folder. That way you’ll have to add the folder name before the lineicons.css file when linking it.
<link rel="stylesheet" href="./icons/lineicons.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Lineicons CSS --> <link href="your-project-dir/icon-font/lineicons.css" rel="stylesheet" /> <title>Lineicons Starter Template</title> </head> <body> <h1>Icons Added!</h1> <i class="lni lni-add-file"></i> <i class="lni lni-cart"></i> <i class="lni lni-calculator"></i> </body> </html>
Using the CDN is the easiest one. All you have to do is copy the CDN link and attach it to the head tag.
Lineicons offers CDN for both Free and Premium plans.
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
Go ahead and add it to the head tag of your project to load Lineicons on your project.
To load Lineicons using the Pro CDN first you’ll have to get it.
You can get the CDN link from Profile>CDN Settings>CDN Links
After that scroll down to CDN Link to copy the link and add that to your head tag.
The setup is done, now you can use the icons easily.
Go ahead and copy the icon code from the icon gallery and use them in your HTML.
<i class="lni lni-facebook-fill"></i> <i class="lni lni-patreon"></i>