UNPKG

tabler-ui

Version:

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

516 lines 217 kB
<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Content-Language" content="en" /> <meta name="msapplication-TileColor" content="#2d89ef"> <meta name="theme-color" content="#4188c9"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <link rel="icon" href="./favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <!-- Generated: 2018-04-16 09:29:05 +0200 --> <title>Icons - tabler.github.io - a responsive, flat and full featured admin template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"> <script src="./assets/js/require.min.js"></script> <script> requirejs.config({ baseUrl: '.' }); </script> <!-- Dashboard Core --> <link href="./assets/css/dashboard.css" rel="stylesheet" /> <script src="./assets/js/dashboard.js"></script> <!-- c3.js Charts Plugin --> <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" /> <script src="./assets/plugins/charts-c3/plugin.js"></script> <!-- Google Maps Plugin --> <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" /> <script src="./assets/plugins/maps-google/plugin.js"></script> <!-- Input Mask Plugin --> <script src="./assets/plugins/input-mask/plugin.js"></script> </head> <body class=""> <div class="page"> <div class="page-main"> <div class="header py-4"> <div class="container"> <div class="d-flex"> <a class="header-brand" href="./index.html"> <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo"> </a> <div class="d-flex order-lg-2 ml-auto"> <div class="nav-item d-none d-md-flex"> <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a> </div> <div class="dropdown d-none d-md-flex"> <a class="nav-link icon" data-toggle="dropdown"> <i class="fe fe-bell"></i> <span class="nav-unread"></span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span> <div> <strong>Nathan</strong> pushed new commit: Fix page load performance issue. <div class="small text-muted">10 minutes ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span> <div> <strong>Alice</strong> started new task: Tabler UI design. <div class="small text-muted">1 hour ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span> <div> <strong>Rose</strong> deployed new version of NodeJS REST Api V3 <div class="small text-muted">2 hours ago</div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a> </div> </div> <div class="dropdown"> <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"> <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span> <span class="ml-2 d-none d-lg-block"> <span class="text-default">Jane Pearson</span> <small class="text-muted d-block mt-1">Administrator</small> </span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-user"></i> Profile </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-settings"></i> Settings </a> <a class="dropdown-item" href="#"> <span class="float-right"><span class="badge badge-primary">6</span></span> <i class="dropdown-icon fe fe-mail"></i> Inbox </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-send"></i> Message </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-help-circle"></i> Need help? </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-log-out"></i> Sign out </a> </div> </div> </div> <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse"> <span class="header-toggler-icon"></span> </a> </div> </div> </div> <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-3 ml-auto"> <form class="input-icon my-3 my-lg-0"> <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1"> <div class="input-icon-addon"> <i class="fe fe-search"></i> </div> </form> </div> <div class="col-lg order-lg-first"> <ul class="nav nav-tabs border-0 flex-column flex-lg-row"> <li class="nav-item"> <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a> </li> <li class="nav-item"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./cards.html" class="dropdown-item ">Cards design</a> <a href="./charts.html" class="dropdown-item ">Charts</a> <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./maps.html" class="dropdown-item ">Maps</a> <a href="./icons.html" class="dropdown-item active">Icons</a> <a href="./store.html" class="dropdown-item ">Store</a> <a href="./blog.html" class="dropdown-item ">Blog</a> <a href="./carousel.html" class="dropdown-item ">Carousel</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="./profile.html" class="dropdown-item ">Profile</a> <a href="./login.html" class="dropdown-item ">Login</a> <a href="./register.html" class="dropdown-item ">Register</a> <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a> <a href="./400.html" class="dropdown-item ">400 error</a> <a href="./401.html" class="dropdown-item ">401 error</a> <a href="./403.html" class="dropdown-item ">403 error</a> <a href="./404.html" class="dropdown-item ">404 error</a> <a href="./500.html" class="dropdown-item ">500 error</a> <a href="./503.html" class="dropdown-item ">503 error</a> <a href="./email.html" class="dropdown-item ">Email</a> <a href="./empty.html" class="dropdown-item ">Empty page</a> <a href="./rtl.html" class="dropdown-item ">RTL mode</a> </div> </li> <li class="nav-item dropdown"> <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a> </li> <li class="nav-item"> <a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a> </li> <li class="nav-item"> <a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a> </li> </ul> </div> </div> </div> </div> <div class="my-3 my-md-5"> <div class="container"> <div class="page-header"> <h1 class="page-title"> Icons </h1> </div> <div class="row row-cards"> <div class="col"> <div class="card"> <div class="card-header"> <div class="card-title">Feather Icons</div> </div> <div class="card-body"> <div class="row"> <div class="col-3"> <p>Simply beautiful open source icons. For more info <a href="https://feathericons.com" target="_blank">click here</a>.</p> <p><code>&lt;i class="fe fe-ICON_NAME"&gt;&lt;/i&gt;</code></p> </div> <div class="col-9"> <div class="icons-list-wrap"> <ul class="icons-list"> <li class="icons-list-item"><i class="fe fe-activity" data-toggle="tooltip" title="fe fe-activity"></i></li> <li class="icons-list-item"><i class="fe fe-airplay" data-toggle="tooltip" title="fe fe-airplay"></i></li> <li class="icons-list-item"><i class="fe fe-alert-circle" data-toggle="tooltip" title="fe fe-alert-circle"></i></li> <li class="icons-list-item"><i class="fe fe-alert-octagon" data-toggle="tooltip" title="fe fe-alert-octagon"></i></li> <li class="icons-list-item"><i class="fe fe-alert-triangle" data-toggle="tooltip" title="fe fe-alert-triangle"></i></li> <li class="icons-list-item"><i class="fe fe-align-center" data-toggle="tooltip" title="fe fe-align-center"></i></li> <li class="icons-list-item"><i class="fe fe-align-justify" data-toggle="tooltip" title="fe fe-align-justify"></i></li> <li class="icons-list-item"><i class="fe fe-align-left" data-toggle="tooltip" title="fe fe-align-left"></i></li> <li class="icons-list-item"><i class="fe fe-align-right" data-toggle="tooltip" title="fe fe-align-right"></i></li> <li class="icons-list-item"><i class="fe fe-anchor" data-toggle="tooltip" title="fe fe-anchor"></i></li> <li class="icons-list-item"><i class="fe fe-aperture" data-toggle="tooltip" title="fe fe-aperture"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-down" data-toggle="tooltip" title="fe fe-arrow-down"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-down-circle" data-toggle="tooltip" title="fe fe-arrow-down-circle"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-down-left" data-toggle="tooltip" title="fe fe-arrow-down-left"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-down-right" data-toggle="tooltip" title="fe fe-arrow-down-right"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-left" data-toggle="tooltip" title="fe fe-arrow-left"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-left-circle" data-toggle="tooltip" title="fe fe-arrow-left-circle"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-right" data-toggle="tooltip" title="fe fe-arrow-right"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-right-circle" data-toggle="tooltip" title="fe fe-arrow-right-circle"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-up" data-toggle="tooltip" title="fe fe-arrow-up"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-up-circle" data-toggle="tooltip" title="fe fe-arrow-up-circle"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-up-left" data-toggle="tooltip" title="fe fe-arrow-up-left"></i></li> <li class="icons-list-item"><i class="fe fe-arrow-up-right" data-toggle="tooltip" title="fe fe-arrow-up-right"></i></li> <li class="icons-list-item"><i class="fe fe-at-sign" data-toggle="tooltip" title="fe fe-at-sign"></i></li> <li class="icons-list-item"><i class="fe fe-award" data-toggle="tooltip" title="fe fe-award"></i></li> <li class="icons-list-item"><i class="fe fe-bar-chart" data-toggle="tooltip" title="fe fe-bar-chart"></i></li> <li class="icons-list-item"><i class="fe fe-bar-chart-2" data-toggle="tooltip" title="fe fe-bar-chart-2"></i></li> <li class="icons-list-item"><i class="fe fe-battery" data-toggle="tooltip" title="fe fe-battery"></i></li> <li class="icons-list-item"><i class="fe fe-battery-charging" data-toggle="tooltip" title="fe fe-battery-charging"></i></li> <li class="icons-list-item"><i class="fe fe-bell" data-toggle="tooltip" title="fe fe-bell"></i></li> <li class="icons-list-item"><i class="fe fe-bell-off" data-toggle="tooltip" title="fe fe-bell-off"></i></li> <li class="icons-list-item"><i class="fe fe-bluetooth" data-toggle="tooltip" title="fe fe-bluetooth"></i></li> <li class="icons-list-item"><i class="fe fe-bold" data-toggle="tooltip" title="fe fe-bold"></i></li> <li class="icons-list-item"><i class="fe fe-book" data-toggle="tooltip" title="fe fe-book"></i></li> <li class="icons-list-item"><i class="fe fe-book-open" data-toggle="tooltip" title="fe fe-book-open"></i></li> <li class="icons-list-item"><i class="fe fe-bookmark" data-toggle="tooltip" title="fe fe-bookmark"></i></li> <li class="icons-list-item"><i class="fe fe-box" data-toggle="tooltip" title="fe fe-box"></i></li> <li class="icons-list-item"><i class="fe fe-briefcase" data-toggle="tooltip" title="fe fe-briefcase"></i></li> <li class="icons-list-item"><i class="fe fe-calendar" data-toggle="tooltip" title="fe fe-calendar"></i></li> <li class="icons-list-item"><i class="fe fe-camera" data-toggle="tooltip" title="fe fe-camera"></i></li> <li class="icons-list-item"><i class="fe fe-camera-off" data-toggle="tooltip" title="fe fe-camera-off"></i></li> <li class="icons-list-item"><i class="fe fe-cast" data-toggle="tooltip" title="fe fe-cast"></i></li> <li class="icons-list-item"><i class="fe fe-check" data-toggle="tooltip" title="fe fe-check"></i></li> <li class="icons-list-item"><i class="fe fe-check-circle" data-toggle="tooltip" title="fe fe-check-circle"></i></li> <li class="icons-list-item"><i class="fe fe-check-square" data-toggle="tooltip" title="fe fe-check-square"></i></li> <li class="icons-list-item"><i class="fe fe-chevron-down" data-toggle="tooltip" title="fe fe-chevron-down"></i></li> <li class="icons-list-item"><i class="fe fe-chevron-left" data-toggle="tooltip" title="fe fe-chevron-left"></i></li> <li class="icons-list-item"><i class="fe fe-chevron-right" data-toggle="tooltip" title="fe fe-chevron-right"></i></li> <li class="icons-list-item"><i class="fe fe-chevron-up" data-toggle="tooltip" title="fe fe-chevron-up"></i></li> <li class="icons-list-item"><i class="fe fe-chevrons-down" data-toggle="tooltip" title="fe fe-chevrons-down"></i></li> <li class="icons-list-item"><i class="fe fe-chevrons-left" data-toggle="tooltip" title="fe fe-chevrons-left"></i></li> <li class="icons-list-item"><i class="fe fe-chevrons-right" data-toggle="tooltip" title="fe fe-chevrons-right"></i></li> <li class="icons-list-item"><i class="fe fe-chevrons-up" data-toggle="tooltip" title="fe fe-chevrons-up"></i></li> <li class="icons-list-item"><i class="fe fe-chrome" data-toggle="tooltip" title="fe fe-chrome"></i></li> <li class="icons-list-item"><i class="fe fe-circle" data-toggle="tooltip" title="fe fe-circle"></i></li> <li class="icons-list-item"><i class="fe fe-clipboard" data-toggle="tooltip" title="fe fe-clipboard"></i></li> <li class="icons-list-item"><i class="fe fe-clock" data-toggle="tooltip" title="fe fe-clock"></i></li> <li class="icons-list-item"><i class="fe fe-cloud" data-toggle="tooltip" title="fe fe-cloud"></i></li> <li class="icons-list-item"><i class="fe fe-cloud-drizzle" data-toggle="tooltip" title="fe fe-cloud-drizzle"></i></li> <li class="icons-list-item"><i class="fe fe-cloud-lightning" data-toggle="tooltip" title="fe fe-cloud-lightning"></i></li> <li class="icons-list-item"><i class="fe fe-cloud-off" data-toggle="tooltip" title="fe fe-cloud-off"></i></li> <li class="icons-list-item"><i class="fe fe-cloud-rain" data-toggle="tooltip" title="fe fe-cloud-rain"></i></li> <li class="icons-list-item"><i class="fe fe-cloud-snow" data-toggle="tooltip" title="fe fe-cloud-snow"></i></li> <li class="icons-list-item"><i class="fe fe-code" data-toggle="tooltip" title="fe fe-code"></i></li> <li class="icons-list-item"><i class="fe fe-codepen" data-toggle="tooltip" title="fe fe-codepen"></i></li> <li class="icons-list-item"><i class="fe fe-command" data-toggle="tooltip" title="fe fe-command"></i></li> <li class="icons-list-item"><i class="fe fe-compass" data-toggle="tooltip" title="fe fe-compass"></i></li> <li class="icons-list-item"><i class="fe fe-copy" data-toggle="tooltip" title="fe fe-copy"></i></li> <li class="icons-list-item"><i class="fe fe-corner-down-left" data-toggle="tooltip" title="fe fe-corner-down-left"></i></li> <li class="icons-list-item"><i class="fe fe-corner-down-right" data-toggle="tooltip" title="fe fe-corner-down-right"></i></li> <li class="icons-list-item"><i class="fe fe-corner-left-down" data-toggle="tooltip" title="fe fe-corner-left-down"></i></li> <li class="icons-list-item"><i class="fe fe-corner-left-up" data-toggle="tooltip" title="fe fe-corner-left-up"></i></li> <li class="icons-list-item"><i class="fe fe-corner-right-down" data-toggle="tooltip" title="fe fe-corner-right-down"></i></li> <li class="icons-list-item"><i class="fe fe-corner-right-up" data-toggle="tooltip" title="fe fe-corner-right-up"></i></li> <li class="icons-list-item"><i class="fe fe-corner-up-left" data-toggle="tooltip" title="fe fe-corner-up-left"></i></li> <li class="icons-list-item"><i class="fe fe-corner-up-right" data-toggle="tooltip" title="fe fe-corner-up-right"></i></li> <li class="icons-list-item"><i class="fe fe-cpu" data-toggle="tooltip" title="fe fe-cpu"></i></li> <li class="icons-list-item"><i class="fe fe-credit-card" data-toggle="tooltip" title="fe fe-credit-card"></i></li> <li class="icons-list-item"><i class="fe fe-crop" data-toggle="tooltip" title="fe fe-crop"></i></li> <li class="icons-list-item"><i class="fe fe-crosshair" data-toggle="tooltip" title="fe fe-crosshair"></i></li> <li class="icons-list-item"><i class="fe fe-database" data-toggle="tooltip" title="fe fe-database"></i></li> <li class="icons-list-item"><i class="fe fe-delete" data-toggle="tooltip" title="fe fe-delete"></i></li> <li class="icons-list-item"><i class="fe fe-disc" data-toggle="tooltip" title="fe fe-disc"></i></li> <li class="icons-list-item"><i class="fe fe-dollar-sign" data-toggle="tooltip" title="fe fe-dollar-sign"></i></li> <li class="icons-list-item"><i class="fe fe-download" data-toggle="tooltip" title="fe fe-download"></i></li> <li class="icons-list-item"><i class="fe fe-download-cloud" data-toggle="tooltip" title="fe fe-download-cloud"></i></li> <li class="icons-list-item"><i class="fe fe-droplet" data-toggle="tooltip" title="fe fe-droplet"></i></li> <li class="icons-list-item"><i class="fe fe-edit" data-toggle="tooltip" title="fe fe-edit"></i></li> <li class="icons-list-item"><i class="fe fe-edit-2" data-toggle="tooltip" title="fe fe-edit-2"></i></li> <li class="icons-list-item"><i class="fe fe-edit-3" data-toggle="tooltip" title="fe fe-edit-3"></i></li> <li class="icons-list-item"><i class="fe fe-external-link" data-toggle="tooltip" title="fe fe-external-link"></i></li> <li class="icons-list-item"><i class="fe fe-eye" data-toggle="tooltip" title="fe fe-eye"></i></li> <li class="icons-list-item"><i class="fe fe-eye-off" data-toggle="tooltip" title="fe fe-eye-off"></i></li> <li class="icons-list-item"><i class="fe fe-facebook" data-toggle="tooltip" title="fe fe-facebook"></i></li> <li class="icons-list-item"><i class="fe fe-fast-forward" data-toggle="tooltip" title="fe fe-fast-forward"></i></li> <li class="icons-list-item"><i class="fe fe-feather" data-toggle="tooltip" title="fe fe-feather"></i></li> <li class="icons-list-item"><i class="fe fe-file" data-toggle="tooltip" title="fe fe-file"></i></li> <li class="icons-list-item"><i class="fe fe-file-minus" data-toggle="tooltip" title="fe fe-file-minus"></i></li> <li class="icons-list-item"><i class="fe fe-file-plus" data-toggle="tooltip" title="fe fe-file-plus"></i></li> <li class="icons-list-item"><i class="fe fe-file-text" data-toggle="tooltip" title="fe fe-file-text"></i></li> <li class="icons-list-item"><i class="fe fe-film" data-toggle="tooltip" title="fe fe-film"></i></li> <li class="icons-list-item"><i class="fe fe-filter" data-toggle="tooltip" title="fe fe-filter"></i></li> <li class="icons-list-item"><i class="fe fe-flag" data-toggle="tooltip" title="fe fe-flag"></i></li> <li class="icons-list-item"><i class="fe fe-folder" data-toggle="tooltip" title="fe fe-folder"></i></li> <li class="icons-list-item"><i class="fe fe-folder-minus" data-toggle="tooltip" title="fe fe-folder-minus"></i></li> <li class="icons-list-item"><i class="fe fe-folder-plus" data-toggle="tooltip" title="fe fe-folder-plus"></i></li> <li class="icons-list-item"><i class="fe fe-git-branch" data-toggle="tooltip" title="fe fe-git-branch"></i></li> <li class="icons-list-item"><i class="fe fe-git-commit" data-toggle="tooltip" title="fe fe-git-commit"></i></li> <li class="icons-list-item"><i class="fe fe-git-merge" data-toggle="tooltip" title="fe fe-git-merge"></i></li> <li class="icons-list-item"><i class="fe fe-git-pull-request" data-toggle="tooltip" title="fe fe-git-pull-request"></i></li> <li class="icons-list-item"><i class="fe fe-github" data-toggle="tooltip" title="fe fe-github"></i></li> <li class="icons-list-item"><i class="fe fe-gitlab" data-toggle="tooltip" title="fe fe-gitlab"></i></li> <li class="icons-list-item"><i class="fe fe-globe" data-toggle="tooltip" title="fe fe-globe"></i></li> <li class="icons-list-item"><i class="fe fe-grid" data-toggle="tooltip" title="fe fe-grid"></i></li> <li class="icons-list-item"><i class="fe fe-hard-drive" data-toggle="tooltip" title="fe fe-hard-drive"></i></li> <li class="icons-list-item"><i class="fe fe-hash" data-toggle="tooltip" title="fe fe-hash"></i></li> <li class="icons-list-item"><i class="fe fe-headphones" data-toggle="tooltip" title="fe fe-headphones"></i></li> <li class="icons-list-item"><i class="fe fe-heart" data-toggle="tooltip" title="fe fe-heart"></i></li> <li class="icons-list-item"><i class="fe fe-help-circle" data-toggle="tooltip" title="fe fe-help-circle"></i></li> <li class="icons-list-item"><i class="fe fe-home" data-toggle="tooltip" title="fe fe-home"></i></li> <li class="icons-list-item"><i class="fe fe-image" data-toggle="tooltip" title="fe fe-image"></i></li> <li class="icons-list-item"><i class="fe fe-inbox" data-toggle="tooltip" title="fe fe-inbox"></i></li> <li class="icons-list-item"><i class="fe fe-info" data-toggle="tooltip" title="fe fe-info"></i></li> <li class="icons-list-item"><i class="fe fe-instagram" data-toggle="tooltip" title="fe fe-instagram"></i></li> <li class="icons-list-item"><i class="fe fe-italic" data-toggle="tooltip" title="fe fe-italic"></i></li> <li class="icons-list-item"><i class="fe fe-layers" data-toggle="tooltip" title="fe fe-layers"></i></li> <li class="icons-list-item"><i class="fe fe-layout" data-toggle="tooltip" title="fe fe-layout"></i></li> <li class="icons-list-item"><i class="fe fe-life-buoy" data-toggle="tooltip" title="fe fe-life-buoy"></i></li> <li class="icons-list-item"><i class="fe fe-link" data-toggle="tooltip" title="fe fe-link"></i></li> <li class="icons-list-item"><i class="fe fe-link-2" data-toggle="tooltip" title="fe fe-link-2"></i></li> <li class="icons-list-item"><i class="fe fe-linkedin" data-toggle="tooltip" title="fe fe-linkedin"></i></li> <li class="icons-list-item"><i class="fe fe-list" data-toggle="tooltip" title="fe fe-list"></i></li> <li class="icons-list-item"><i class="fe fe-loader" data-toggle="tooltip" title="fe fe-loader"></i></li> <li class="icons-list-item"><i class="fe fe-lock" data-toggle="tooltip" title="fe fe-lock"></i></li> <li class="icons-list-item"><i class="fe fe-log-in" data-toggle="tooltip" title="fe fe-log-in"></i></li> <li class="icons-list-item"><i class="fe fe-log-out" data-toggle="tooltip" title="fe fe-log-out"></i></li> <li class="icons-list-item"><i class="fe fe-mail" data-toggle="tooltip" title="fe fe-mail"></i></li> <li class="icons-list-item"><i class="fe fe-map" data-toggle="tooltip" title="fe fe-map"></i></li> <li class="icons-list-item"><i class="fe fe-map-pin" data-toggle="tooltip" title="fe fe-map-pin"></i></li> <li class="icons-list-item"><i class="fe fe-maximize" data-toggle="tooltip" title="fe fe-maximize"></i></li> <li class="icons-list-item"><i class="fe fe-maximize-2" data-toggle="tooltip" title="fe fe-maximize-2"></i></li> <li class="icons-list-item"><i class="fe fe-menu" data-toggle="tooltip" title="fe fe-menu"></i></li> <li class="icons-list-item"><i class="fe fe-message-circle" data-toggle="tooltip" title="fe fe-message-circle"></i></li> <li class="icons-list-item"><i class="fe fe-message-square" data-toggle="tooltip" title="fe fe-message-square"></i></li> <li class="icons-list-item"><i class="fe fe-mic" data-toggle="tooltip" title="fe fe-mic"></i></li> <li class="icons-list-item"><i class="fe fe-mic-off" data-toggle="tooltip" title="fe fe-mic-off"></i></li> <li class="icons-list-item"><i class="fe fe-minimize" data-toggle="tooltip" title="fe fe-minimize"></i></li> <li class="icons-list-item"><i class="fe fe-minimize-2" data-toggle="tooltip" title="fe fe-minimize-2"></i></li> <li class="icons-list-item"><i class="fe fe-minus" data-toggle="tooltip" title="fe fe-minus"></i></li> <li class="icons-list-item"><i class="fe fe-minus-circle" data-toggle="tooltip" title="fe fe-minus-circle"></i></li> <li class="icons-list-item"><i class="fe fe-minus-square" data-toggle="tooltip" title="fe fe-minus-square"></i></li> <li class="icons-list-item"><i class="fe fe-monitor" data-toggle="tooltip" title="fe fe-monitor"></i></li> <li class="icons-list-item"><i class="fe fe-moon" data-toggle="tooltip" title="fe fe-moon"></i></li> <li class="icons-list-item"><i class="fe fe-more-horizontal" data-toggle="tooltip" title="fe fe-more-horizontal"></i></li> <li class="icons-list-item"><i class="fe fe-more-vertical" data-toggle="tooltip" title="fe fe-more-vertical"></i></li> <li class="icons-list-item"><i class="fe fe-move" data-toggle="tooltip" title="fe fe-move"></i></li> <li class="icons-list-item"><i class="fe fe-music" data-toggle="tooltip" title="fe fe-music"></i></li> <li class="icons-list-item"><i class="fe fe-navigation" data-toggle="tooltip" title="fe fe-navigation"></i></li> <li class="icons-list-item"><i class="fe fe-navigation-2" data-toggle="tooltip" title="fe fe-navigation-2"></i></li> <li class="icons-list-item"><i class="fe fe-octagon" data-toggle="tooltip" title="fe fe-octagon"></i></li> <li class="icons-list-item"><i class="fe fe-package" data-toggle="tooltip" title="fe fe-package"></i></li> <li class="icons-list-item"><i class="fe fe-paperclip" data-toggle="tooltip" title="fe fe-paperclip"></i></li> <li class="icons-list-item"><i class="fe fe-pause" data-toggle="tooltip" title="fe fe-pause"></i></li> <li class="icons-list-item"><i class="fe fe-pause-circle" data-toggle="tooltip" title="fe fe-pause-circle"></i></li> <li class="icons-list-item"><i class="fe fe-percent" data-toggle="tooltip" title="fe fe-percent"></i></li> <li class="icons-list-item"><i class="fe fe-phone" data-toggle="tooltip" title="fe fe-phone"></i></li> <li class="icons-list-item"><i class="fe fe-phone-call" data-toggle="tooltip" title="fe fe-phone-call"></i></li> <li class="icons-list-item"><i class="fe fe-phone-forwarded" data-toggle="tooltip" title="fe fe-phone-forwarded"></i></li> <li class="icons-list-item"><i class="fe fe-phone-incoming" data-toggle="tooltip" title="fe fe-phone-incoming"></i></li> <li class="icons-list-item"><i class="fe fe-phone-missed" data-toggle="tooltip" title="fe fe-phone-missed"></i></li> <li class="icons-list-item"><i class="fe fe-phone-off" data-toggle="tooltip" title="fe fe-phone-off"></i></li> <li class="icons-list-item"><i class="fe fe-phone-outgoing" data-toggle="tooltip" title="fe fe-phone-outgoing"></i></li> <li class="icons-list-item"><i class="fe fe-pie-chart" data-toggle="tooltip" title="fe fe-pie-chart"></i></li> <li class="icons-list-item"><i class="fe fe-play" data-toggle="tooltip" title="fe fe-play"></i></li> <li class="icons-list-item"><i class="fe fe-play-circle" data-toggle="tooltip" title="fe fe-play-circle"></i></li> <li class="icons-list-item"><i class="fe fe-plus" data-toggle="tooltip" title="fe fe-plus"></i></li> <li class="icons-list-item"><i class="fe fe-plus-circle" data-toggle="tooltip" title="fe fe-plus-circle"></i></li> <li class="icons-list-item"><i class="fe fe-plus-square" data-toggle="tooltip" title="fe fe-plus-square"></i></li> <li class="icons-list-item"><i class="fe fe-pocket" data-toggle="tooltip" title="fe fe-pocket"></i></li> <li class="icons-list-item"><i class="fe fe-power" data-toggle="tooltip" title="fe fe-power"></i></li> <li class="icons-list-item"><i class="fe fe-printer" data-toggle="tooltip" title="fe fe-printer"></i></li> <li class="icons-list-item"><i class="fe fe-radio" data-toggle="tooltip" title="fe fe-radio"></i></li> <li class="icons-list-item"><i class="fe fe-refresh-ccw" data-toggle="tooltip" title="fe fe-refresh-ccw"></i></li> <li class="icons-list-item"><i class="fe fe-refresh-cw" data-toggle="tooltip" title="fe fe-refresh-cw"></i></li> <li class="icons-list-item"><i class="fe fe-repeat" data-toggle="tooltip" title="fe fe-repeat"></i></li> <li class="icons-list-item"><i class="fe fe-rewind" data-toggle="tooltip" title="fe fe-rewind"></i></li> <li class="icons-list-item"><i class="fe fe-rotate-ccw" data-toggle="tooltip" title="fe fe-rotate-ccw"></i></li> <li class="icons-list-item"><i class="fe fe-rotate-cw" data-toggle="tooltip" title="fe fe-rotate-cw"></i></li> <li class="icons-list-item"><i class="fe fe-rss" data-toggle="tooltip" title="fe fe-rss"></i></li> <li class="icons-list-item"><i class="fe fe-save" data-toggle="tooltip" title="fe fe-save"></i></li> <li class="icons-list-item"><i class="fe fe-scissors" data-toggle="tooltip" title="fe fe-scissors"></i></li> <li class="icons-list-item"><i class="fe fe-search" data-toggle="tooltip" title="fe fe-search"></i></li> <li class="icons-list-item"><i class="fe fe-send" data-toggle="tooltip" title="fe fe-send"></i></li> <li class="icons-list-item"><i class="fe fe-server" data-toggle="tooltip" title="fe fe-server"></i></li> <li class="icons-list-item"><i class="fe fe-settings" data-toggle="tooltip" title="fe fe-settings"></i></li> <li class="icons-list-item"><i class="fe fe-share" data-toggle="tooltip" title="fe fe-share"></i></li> <li class="icons-list-item"><i class="fe fe-share-2" data-toggle="tooltip" title="fe fe-share-2"></i></li> <li class="icons-list-item"><i class="fe fe-shield" data-toggle="tooltip" title="fe fe-shield"></i></li> <li class="icons-list-item"><i class="fe fe-shield-off" data-toggle="tooltip" title="fe fe-shield-off"></i></li> <li class="icons-list-item"><i class="fe fe-shopping-bag" data-toggle="tooltip" title="fe fe-shopping-bag"></i></li> <li class="icons-list-item"><i class="fe fe-shopping-cart" data-toggle="tooltip" title="fe fe-shopping-cart"></i></li> <li class="icons-list-item"><i class="fe fe-shuffle" data-toggle="tooltip" title="fe fe-shuffle"></i></li> <li class="icons-list-item"><i class="fe fe-sidebar" data-toggle="tooltip" title="fe fe-sidebar"></i></li> <li class="icons-list-item"><i class="fe fe-skip-back" data-toggle="tooltip" title="fe fe-skip-back"></i></li> <li class="icons-list-item"><i class="fe fe-skip-forward" data-toggle="tooltip" title="fe fe-skip-forward"></i></li> <li class="icons-list-item"><i class="fe fe-slack" data-toggle="tooltip" title="fe fe-slack"></i></li> <li class="icons-list-item"><i class="fe fe-slash" data-toggle="tooltip" title="fe fe-slash"></i></li> <li class="icons-list-item"><i class="fe fe-sliders" data-toggle="tooltip" title="fe fe-sliders"></i></li> <li class="icons-list-item"><i class="fe fe-smartphone" data-toggle="tooltip" title="fe fe-smartphone"></i></li> <li class="icons-list-item"><i class="fe fe-speaker" data-toggle="tooltip" title="fe fe-speaker"></i></li> <li class="icons-list-item"><i class="fe fe-square" data-toggle="tooltip" title="fe fe-square"></i></li> <li class="icons-list-item"><i class="fe fe-star" data-toggle="tooltip" title="fe fe-star"></i></li> <li class="icons-list-item"><i class="fe fe-stop-circle" data-toggle="tooltip" title="fe fe-stop-circle"></i></li> <li class="icons-list-item"><i class="fe fe-sun" data-toggle="tooltip" title="fe fe-sun"></i></li> <li class="icons-list-item"><i class="fe fe-sunrise" data-toggle="tooltip" title="fe fe-sunrise"></i></li> <li class="icons-list-item"><i class="fe fe-sunset" data-toggle="tooltip" title="fe fe-sunset"></i></li> <li class="icons-list-item"><i class="fe fe-tablet" data-toggle="tooltip" title="fe fe-tablet"></i></li> <li class="icons-list-item"><i class="fe fe-tag" data-toggle="tooltip" title="fe fe-tag"></i></li> <li class="icons-list-item"><i class="fe fe-target" data-toggle="tooltip" title="fe fe-target"></i></li> <li class="icons-list-item"><i class="fe fe-terminal" data-toggle="tooltip" title="fe fe-terminal"></i></li> <li class="icons-list-item"><i class="fe fe-thermometer" data-toggle="tooltip" title="fe fe-thermometer"></i></li> <li class="icons-list-item"><i class="fe fe-thumbs-down" data-toggle="tooltip" title="fe fe-thumbs-down"></i></li> <li class="icons-list-item"><i class="fe fe-thumbs-up" data-toggle="tooltip" title="fe fe-thumbs-up"></i></li> <li class="icons-list-item"><i class="fe fe-toggle-left" data-toggle="tooltip" title="fe fe-toggle-left"></i></li> <li class="icons-list-item"><i class="fe fe-toggle-right" data-toggle="tooltip" title="fe fe-toggle-right"></i></li> <li class="icons-list-item"><i class="fe fe-trash" data-toggle="tooltip" title="fe fe-trash"></i></li> <li class="icons-list-item"><i class="fe fe-trash-2" data-toggle="tooltip" title="fe fe-trash-2"></i></li> <li class="icons-list-item"><i class="fe fe-trending-down" data-toggle="tooltip" title="fe fe-trending-down"></i></li> <li class="icons-list-item"><i class="fe fe-trending-up" data-toggle="tooltip" title="fe fe-trending-up"></i></li> <li class="icons-list-item"><i class="fe fe-triangle" data-toggle="tooltip" title="fe fe-triangle"></i></li> <li class="icons-list-item"><i class="fe fe-truck" data-toggle="tooltip" title="fe fe-truck"></i></li> <li class="icons-list-item"><i class="fe fe-tv" data-toggle="tooltip" title="fe fe-tv"></i></li> <li class="icons-list-item"><i class="fe fe-twitter" data-toggle="tooltip" title="fe fe-twitter"></i></li> <li class="icons-list-item"><i class="fe fe-type" data-toggle="tooltip" title="fe fe-type"></i></li> <li class="icons-list-item"><i class="fe fe-umbrella" data-toggle="tooltip" title="fe fe-umbrella"></i></li> <li class="icons-list-item"><i class="fe fe-underline" data-toggle="tooltip" title="fe fe-underline"></i></li> <li class="icons-list-item"><i class="fe fe-unlock" data-toggle="tooltip" title="fe fe-unlock"></i></li> <li class="icons-list-item"><i class="fe fe-upload" data-toggle="tooltip" title="fe fe-upload"></i></li> <li class="icons-list-item"><i class="fe fe-upload-cloud" data-toggle="tooltip" title="fe fe-upload-cloud"></i></li> <li class="icons-list-item"><i class="fe fe-user" data-toggle="tooltip" title="fe fe-user"></i></li> <li class="icons-list-item"><i class="fe fe-user-check" data-toggle="tooltip" title="fe fe-user-check"></i></li> <li class="icons-list-item"><i class="fe fe-user-minus" data-toggle="tooltip" title="fe fe-user-minus"></i></li> <li class="icons-list-item"><i class="fe fe-user-plus" data-toggle="tooltip" title="fe fe-user-plus"></i></li> <li class="icons-list-item"><i class="fe fe-user-x" data-toggle="tooltip" title="fe fe-user-x"></i></li> <li class="icons-list-item"><i class="fe fe-users" data-toggle="tooltip" title="fe fe-users"></i></li> <li class="icons-list-item"><i class="fe fe-video" data-toggle="tooltip" title="fe fe-video"></i></li> <li class="icons-list-item"><i class="fe fe-video-off" data-toggle="tooltip" title="fe fe-video-off"></i></li> <li class="icons-list-item"><i class="fe fe-voicemail" data-toggle="tooltip" title="fe fe-voicemail"></i></li> <li class="icons-list-item"><i class="fe fe-volume" data-toggle="tooltip" title="fe fe-volume"></i></li> <li class="icons-list-item"><i class="fe fe-volume-1" data-toggle="tooltip" title="fe fe-volume-1"></i></li> <li class="icons-list-item"><i class="fe fe-volume-2" data-toggle="tooltip" title="fe fe-volume-2"></i></li> <li class="icons-list-item"><i class="fe fe-volume-x" data-toggle="tooltip" title="fe fe-volume-x"></i></li> <li class="icons-list-item"><i class="fe fe-watch" data-toggle="tooltip" title="fe fe-watch"></i></li> <li class="icons-list-item"><i class="fe fe-wifi" data-toggle="tooltip" title="fe fe-wifi"></i></li> <li class="icons-list-item"><i class="fe fe-wifi-off" data-toggle="tooltip" title="fe fe-wifi-off"></i></li> <li class="icons-list-item"><i class="fe fe-wind" data-toggle="tooltip" title="fe fe-wind"></i></li> <li class="icons-list-item"><i class="fe fe-x" data-toggle="tooltip" title="fe fe-x"></i></li> <li class="icons-list-item"><i class="fe fe-x-circle" data-toggle="tooltip" title="fe fe-x-circle"></i></li> <li class="icons-list-item"><i class="fe fe-x-square" data-toggle="tooltip" title="fe fe-x-square"></i></li> <li class="icons-list-item"><i class="fe fe-zap" data-toggle="tooltip" title="fe fe-zap"></i></li> <li class="icons-list-item"><i class="fe fe-zap-off" data-toggle="tooltip" title="fe fe-zap-off"></i></li> <li class="icons-list-item"><i class="fe fe-zoom-in" data-toggle="tooltip" title="fe fe-zoom-in"></i></li> <li class="icons-list-item"><i class="fe fe-zoom-out" data-toggle="tooltip" title="fe fe-zoom-out"></i></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header"> <div class="card-title">Font Awesome</div> </div> <div class="card-body"> <div class="row"> <div class="col-3"> <p>Powered by Font Awesome set. For more info <a href="http://fontawesome.io" target="_blank">click here</a>.</p> <p><code>&lt;i class="fa fa-ICON_NAME"&gt;&lt;/i&gt;</code></p> </div> <div class="col-9"> <div class="icons-list-wrap"> <ul class="icons-list"> <li class="icons-list-item"><i class="fa fa-500px" data-toggle="tooltip" title="fa fa-500px"></i></li> <li class="icons-list-item"><i class="fa fa-address-book" data-toggle="tooltip" title="fa fa-address-book"></i></li> <li class="icons-list-item"><i class="fa fa-address-book-o" data-toggle="tooltip" title="fa fa-address-book-o"></i></li> <li class="icons-list-item"><i class="fa fa-address-card" data-toggle="tooltip" title="fa fa-address-card"></i></li> <li class="i