Usage

LineIcons Usage Guide

We follow the simplest way for including and usage, here are the basic guideline to use and include LineIcons on your projects.


Using as Icon Font by Including on Project Header

Copy-paste the stylesheet link into project head to load LineIcons CSS, this snippet will load LineIcons on your project.

<link href="your-project-dir/LineIcons/LineIcons.min.css" rel="stylesheet">
<!-- or --> 
<link href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css" rel="stylesheet">


HTML

You can find all HTML classes on Icons page, and here are few example how to use them on HTML file.

<i class="lni-add-file"></i>
<i class="lni-cart"></i>
<i class="lni-calculator"></i>

Starter Template

You can copy-paste this starter template which shows all the snippets and easiest way to get started

<!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='https://cdn.lineicons.com/1.0.1/LineIcons.min.css' rel='stylesheet'>
<title>LineIcons Starter Template</title>
</head>
<body>
 <h1>Icons Added!</h1>
<i class="lni-add-file"></i>
<i class="lni-cart"></i>
<i class="lni-calculator"></i>
</body>
</html>

Extras

Free CDN

CDN is quickest way to get started, include this snippet on header of your HTML file and start using without hosting icon files on your server!

<link rel="stylesheet" href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css">

Or You can also use:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GrayGrids/LineIcons/LineIcons.css">

Icon Size Classes

There are 4 different size classes available, such as: size-lg, size-md, size-sm, size-xs and here are the demos:

<i class='lni-emoji-happy size-lg'></i>
<i class='lni-emoji-cool size-md'></i>
<i class='lni-emoji-neutral size-sm'></i>
<i class='lni-emoji-sad size-xs'></i>

Animation Classes

There are few common animation effects comes with LineIcons CSS, you can use them just inserting the class, here are demos:

<i class='lni-spinner lni-spin-effect'></i>
<i class='lni-alarm lni-tada-effect'></i>
<i class='lni-medium lni-flashing-effect'></i>
<i class='lni-android lni-burst-effect'></i>
<i class='lni-spinner lni-arrow-left lni-fade-left-effect'></i>
<i class='lni-arrow-right lni-fade-right-effect'></i>
<i class='lni-arrow-up lni-fade-up-effect'></i>
<i class='lni-arrow-down lni-fade-down-effect'></i>