Preview

Vertical list

  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete

Horizontal list

  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete
  • Lorem ipsum dolor sit amete

Icon box

Lorem ipsum dolor sit amete

Icon box

Lorem ipsum dolor sit amete

Icon box

Lorem ipsum dolor sit amete

Icon box

Lorem ipsum dolor sit amete

Usage

Base

<div class="icon-links">
    <a href="#"><i class="im-notepad-2"></i></a>
    <a href="#"><i class="im-optimization"></i></a>
    <a href="#"><i class="im-over-time2"></i></a>
</div>

Grid

<div class="icon-links icon-links-grid">
    <a href="#"><i class="im-notepad-2"></i></a>
    <a href="#"><i class="im-optimization"></i></a>
    <a href="#"><i class="im-over-time2"></i></a>
</div>

Button

<div class="icon-links icon-links-button">
    <a href="#"><i class="im-notepad-2"></i></a>
    <a href="#"><i class="im-optimization"></i></a>
    <a href="#"><i class="im-over-time2"></i></a>
</div>

Popup

<div class="icon-links icon-links-popup">
    <i></i>
    <div>
        <a href="#"><i class="im-notepad-2"></i></a>
        <a href="#"><i class="im-optimization"></i></a>
        <a href="#"><i class="im-over-time2"></i></a>
    </div>
</div>

<ul class="icon-list">
    <li><i class="im-notepad-2"></i> Lorem ipsum dolor sit amete</li>
    <li><i class="im-optimization"></i> Lorem ipsum dolor sit amete</li>
    <li><i class="im-over-time2"></i> Lorem ipsum dolor sit amete</li>
</ul>

<div class="icon-box icon-box-top">
    <i class="im-notepad-2"></i>
    <div class="caption">
        <h3>Icon box</h3>
        <p>Lorem ipsum dolor sit amete</p>
    </div>
</div>

Installation

<link async rel="stylesheet" href="themekit/media/icons/iconsmind/line-icons.min.css">
<link async rel="stylesheet" href="themekit/media/icons/iconsmind/solid-icons.min.css">
<link async rel="stylesheet" href="themekit/media/icons/fontawesome/all.css">

Include only the icons set you want to use. Include it into the footer.

Settings

Name Type Description
Icons lists CSS Font Awesome Icons Mind
Icon size CSS Add one for the following classes to set the icon size: text-xs, text-sm,text-md,text-lg.
Try it Text xs Text sm Text md Text lg
Icon links size CSS Add the class icon-lg to the component to set the a larger icon size.
Try it Icon lg
Icon links position CSS Add one of the following classes to the component to align the content: align-center,align-right.
Try it Align center Align right
Icon list size CSS Add one for the following classes to the component to set the icon size: icon-md,icon-lg.
Try it Icon md Icon lg
Icon list type CSS To change the icon list to the default styles add one of the following classes:
icon-circle Set a circle icon for each item. Try it
icon-line Set a circle icon for each item. Try it
icon-decimal Set a circle icon for each item (only vertical layout). Try it
Icon list direction CSS Add the class icon-list-horizontal to the component to change the layout to horizontal.
Icon box position CSS Add one for the following classes to the component to set the icon position.
icon-box-top Top position. Try it
icon-box-left Lest position. Try it
icon-box-right Right position. Try it
Icon box alignment CSS Add one of the following classes to the component to align the content: align-center,align-right.
Try it Align center Align right
Font Awesome
Icons Mind
Text lists