Icons

There are thousands of different icon packs available on the internet that you can use. Premium ones do cost something but most of the time we can get around with using some great free icon packs.

Line Icons

Line Icons is a free icon pack. It includes great amount of icons that you can get started with. It has both free and paid versions of the pack available.

Getting Started

To get started with Line Icons, paste these two lines of code in your page's head section:

HTML

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

This will load the Line Icons CSS to your website and now you have all the available icons available.

Using the Icons

It is super easy to use the icons that we just imported on our site. You can reference the Line Icons icons page to view what icon options you have available. By clicking on a icon you can view how to use them.

Example:

HTML

<i class="lni lni-app-store"></i>

Adding Icons to any part of your Website

Icons can be also added to any other part of your website, too. For example to create a icon for created at footer item after article text, we could add something like this:

HTML

<footer>
  <span class="article-footer">
    <i class="lni lni-timer"></i> Created 2 days ago
    &nbsp;&nbsp;<i class="lni lni-pencil"></i> Written by Aleksi
  </span>
</footer>

Resizing the Icons

Icons can be resized by changing their font-size with CSS. For example:

CSS

.lni.lni-timer {
  font-size: 70px;
}