Introduction

Quickstart

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.

Quickstart

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.

Like this:

<link rel="stylesheet" href="./icons/lineicons.css">

Starter Template

<!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 CDN

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.

Free CDN:

<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.

Pro CDN:

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

Quickstart

After that scroll down to CDN Link to copy the link and add that to your head tag.

Quickstart

Usage

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>