ppeasy/public/others/icons-typicons.html

1215 lines
90 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Crovex - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
<meta content="" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- App favicon -->
<link rel="shortcut icon" href="../assets/images/favicon.ico">
<!-- App css -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/jquery-ui.min.css" rel="stylesheet">
<link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<a href="../projects/projects-index.html" class="logo">
<span>
<img src="../assets/images/logo-sm.png" alt="logo-small" class="logo-sm">
</span>
<span>
<img src="../assets/images/logo.png" alt="logo-large" class="logo-lg logo-light">
<img src="../assets/images/logo-dark.png" alt="logo-large" class="logo-lg">
</span>
</a>
</div>
<!--end logo-->
<!-- Navbar -->
<nav class="navbar-custom">
<ul class="list-unstyled topbar-nav float-right mb-0">
<li class="hidden-sm">
<a class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="javascript: void(0);" role="button"
aria-haspopup="false" aria-expanded="false">
English <img src="../assets/images/flags/us_flag.jpg" class="ml-2" height="16" alt=""/> <i class="mdi mdi-chevron-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript: void(0);"><span> German </span><img src="../assets/images/flags/germany_flag.jpg" alt="" class="ml-2 float-right" height="14"/></a>
<a class="dropdown-item" href="javascript: void(0);"><span> Italian </span><img src="../assets/images/flags/italy_flag.jpg" alt="" class="ml-2 float-right" height="14"/></a>
<a class="dropdown-item" href="javascript: void(0);"><span> French </span><img src="../assets/images/flags/french_flag.jpg" alt="" class="ml-2 float-right" height="14"/></a>
<a class="dropdown-item" href="javascript: void(0);"><span> Spanish </span><img src="../assets/images/flags/spain_flag.jpg" alt="" class="ml-2 float-right" height="14"/></a>
<a class="dropdown-item" href="javascript: void(0);"><span> Russian </span><img src="../assets/images/flags/russia_flag.jpg" alt="" class="ml-2 float-right" height="14"/></a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<i class="ti-bell noti-icon"></i>
<span class="badge badge-danger badge-pill noti-icon-badge">2</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-lg pt-0">
<h6 class="dropdown-item-text font-15 m-0 py-3 bg-primary text-white d-flex justify-content-between align-items-center">
Notifications <span class="badge badge-light badge-pill">2</span>
</h6>
<div class="slimscroll notification-list">
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-right text-muted pl-2">2 min ago</small>
<div class="media">
<div class="avatar-md bg-primary">
<i class="la la-cart-arrow-down text-white"></i>
</div>
<div class="media-body align-self-center ml-2 text-truncate">
<h6 class="my-0 font-weight-normal text-dark">Your order is placed</h6>
<small class="text-muted mb-0">Dummy text of the printing and industry.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-right text-muted pl-2">10 min ago</small>
<div class="media">
<div class="avatar-md bg-success">
<i class="la la-group text-white"></i>
</div>
<div class="media-body align-self-center ml-2 text-truncate">
<h6 class="my-0 font-weight-normal text-dark">Meeting with designers</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-right text-muted pl-2">40 min ago</small>
<div class="media">
<div class="avatar-md bg-pink">
<i class="la la-list-alt text-white"></i>
</div>
<div class="media-body align-self-center ml-2 text-truncate">
<h6 class="my-0 font-weight-normal text-dark">UX 3 Task complete.</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-right text-muted pl-2">1 hr ago</small>
<div class="media">
<div class="avatar-md bg-warning">
<i class="la la-truck text-white"></i>
</div>
<div class="media-body align-self-center ml-2 text-truncate">
<h6 class="my-0 font-weight-normal text-dark">Your order is placed</h6>
<small class="text-muted mb-0">It is a long established fact that a reader.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
<!-- item-->
<a href="#" class="dropdown-item py-3">
<small class="float-right text-muted pl-2">2 hrs ago</small>
<div class="media">
<div class="avatar-md bg-info">
<i class="la la-check-circle text-white"></i>
</div>
<div class="media-body align-self-center ml-2 text-truncate">
<h6 class="my-0 font-weight-normal text-dark">Payment Successfull</h6>
<small class="text-muted mb-0">Dummy text of the printing.</small>
</div><!--end media-body-->
</div><!--end media-->
</a><!--end-item-->
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary">
View all <i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<img src="../assets/images/users/user-1.png" alt="profile-user" class="rounded-circle" />
<span class="ml-1 nav-user-name hidden-sm">Amelia <i class="mdi mdi-chevron-down"></i> </span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="ti-user text-muted mr-2"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="ti-wallet text-muted mr-2"></i> My Wallet</a>
<a class="dropdown-item" href="#"><i class="ti-settings text-muted mr-2"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="ti-lock text-muted mr-2"></i> Lock screen</a>
<div class="dropdown-divider mb-0"></div>
<a class="dropdown-item" href="#"><i class="ti-power-off text-muted mr-2"></i> Logout</a>
</div>
</li>
</ul><!--end topbar-nav-->
<ul class="list-unstyled topbar-nav mb-0">
<li>
<button class="nav-link button-menu-mobile waves-effect waves-light">
<i class="ti-menu nav-icon"></i>
</button>
</li>
<li class="hide-phone app-search">
<form role="search" class="">
<input type="text" id="AllCompo" placeholder="Search..." class="form-control">
<a href=""><i class="fas fa-search"></i></a>
</form>
</li>
</ul>
</nav>
<!-- end navbar-->
</div>
<!-- Top Bar End -->
<!-- Left Sidenav -->
<div class="left-sidenav">
<ul class="metismenu left-sidenav-menu">
<li>
<a href="javascript: void(0);"><i class="ti-bar-chart"></i><span>Dashboard</span><span class="menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="../dashboard/analytics-index.html"><i class="ti-control-record"></i>Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="../dashboard/crm-index.html"><i class="ti-control-record"></i>CRM</a></li>
<li class="nav-item"><a class="nav-link" href="../dashboard/helpdesk-index.html"><i class="ti-control-record"></i>Helpdesk</a></li>
<li class="nav-item"><a class="nav-link" href="../dashboard/sales-index.html"><i class="ti-control-record"></i>Sales</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-server"></i><span>Apps</span><span class="menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Email <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../apps/email-inbox.html">Inbox</a></li>
<li><a href="../apps/email-read.html">Read Email</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="../apps/chat.html"><i class="ti-control-record"></i>Chat</a></li>
<li class="nav-item"><a class="nav-link" href="../apps/contact-list.html"><i class="ti-control-record"></i>Contact List</a></li>
<li class="nav-item"><a class="nav-link" href="../apps/calendar.html"><i class="ti-control-record"></i>Calendar</a></li>
<li class="nav-item"><a class="nav-link" href="../apps/invoice.html"><i class="ti-control-record"></i>Invoice</a></li>
<li class="nav-item"><a class="nav-link" href="../apps/tasks.html"><i class="ti-control-record"></i>Tasks</a></li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Projects <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../apps/project-overview.html">Overview</a></li>
<li><a href="../apps/project-projects.html">Projects</a></li>
<li><a href="../apps/project-board.html">Board</a></li>
<li><a href="../apps/project-teams.html">Teams</a></li>
<li><a href="../apps/project-files.html">Files</a></li>
<li><a href="../apps/new-project.html">New Project</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Ecommerce <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../apps/ecommerce-products.html">Products</a></li>
<li><a href="../apps/ecommerce-product-list.html">Product List</a></li>
<li><a href="../apps/ecommerce-product-detail.html">Product Detail</a></li>
<li><a href="../apps/ecommerce-cart.html">Cart</a></li>
<li><a href="../apps/ecommerce-checkout.html">Checkout</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-crown"></i><span>UI Kit</span><span class="menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Elements <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/ui-bootstrap.html">Bootstrap</a></li>
<li><a href="../others/ui-animation.html">Animation</a></li>
<li><a href="../others/ui-avatar.html">Avatar</a></li>
<li><a href="../others/ui-clipboard.html">Clip Board</a></li>
<li><a href="../others/ui-files.html">File Manager</a></li>
<li><a href="../others/ui-check-radio.html"><span>Check & Radio</span></a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Advanced UI <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/advanced-rangeslider.html">Range Slider</a></li>
<li><a href="../others/advanced-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="../others/advanced-nestable.html">Nestable List</a></li>
<li><a href="../others/advanced-ratings.html">Ratings</a></li>
<li><a href="../others/advanced-highlight.html">Highlight</a></li>
<li><a href="../others/advanced-session.html">Session Timeout</a></li>
<li><a href="../others/advanced-idle-timer.html">Idle Timer</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Forms <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/forms-elements.html">Basic Elements</a></li>
<li><a href="../others/forms-advanced.html">Advance Elements</a></li>
<li><a href="../others/forms-validation.html">Validation</a></li>
<li><a href="../others/forms-wizard.html">Wizard</a></li>
<li><a href="../others/forms-editors.html">Editors</a></li>
<li><a href="../others/forms-repeater.html">Repeater</a></li>
<li><a href="../others/forms-x-editable.html">X Editable</a></li>
<li><a href="../others/forms-uploads.html">File Upload</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Charts <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/charts-apex.html">Apex</a></li>
<li><a href="../others/charts-morris.html">Morris</a></li>
<li><a href="../others/charts-flot.html">Flot</a></li>
<li><a href="../others/charts-chartjs.html">Chartjs</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Tables <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/tables-basic.html">Basic</a></li>
<li><a href="../others/tables-datatable.html">Datatables</a></li>
<li><a href="../others/tables-responsive.html">Responsive</a></li>
<li><a href="../others/tables-editable.html">Editable</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Icons <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/icons-materialdesign.html">Material Design</a></li>
<li><a href="../others/icons-dripicons.html">Dripicons</a></li>
<li><a href="../others/icons-fontawesome.html">Font awesome</a></li>
<li><a href="../others/icons-themify.html">Themify</a></li>
<li><a href="../others/icons-typicons.html">Typicons</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Maps <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/maps-google.html">Google Maps</a></li>
<li><a href="../others/maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-control-record"></i>Email Template <span class="menu-arrow left-has-menu"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li><a href="../others/email-templates-basic.html">Basic Action Email</a></li>
<li><a href="../others/email-templates-alert.html">Alert Email</a></li>
<li><a href="../others/email-templates-billing.html">Billing Email</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-layers-alt"></i><span>Pages</span><span class="menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="../pages/pages-profile.html"><i class="ti-control-record"></i>Profile</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/pages-timeline.html"><i class="ti-control-record"></i>Timeline</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/pages-treeview.html"><i class="ti-control-record"></i>Treeview</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/pages-starter.html"><i class="ti-control-record"></i>Starter Page</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/pages-pricing.html"><i class="ti-control-record"></i>Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/pages-gallery.html"><i class="ti-control-record"></i>Gallery</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);"><i class="ti-lock"></i><span>Authentication</span><span class="menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="nav-second-level" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="../authentication/auth-login.html"><i class="ti-control-record"></i>Log in</a></li>
<li class="nav-item"><a class="nav-link" href="../authentication/auth-register.html"><i class="ti-control-record"></i>Register</a></li>
<li class="nav-item"><a class="nav-link" href="../authentication/auth-recover-pw.html"><i class="ti-control-record"></i>Recover Password</a></li>
<li class="nav-item"><a class="nav-link" href="../authentication/auth-lock-screen.html"><i class="ti-control-record"></i>Lock Screen</a></li>
<li class="nav-item"><a class="nav-link" href="../authentication/auth-404.html"><i class="ti-control-record"></i>Error 404</a></li>
<li class="nav-item"><a class="nav-link" href="../authentication/auth-500.html"><i class="ti-control-record"></i>Error 500</a></li>
</ul>
</li>
</ul>
</div>
<!-- end left-sidenav-->
<div class="page-wrapper">
<!-- Page Content-->
<div class="page-content">
<div class="container-fluid">
<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="float-right">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Crovex</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0);">UI Kit</a></li>
<li class="breadcrumb-item active">Typicons</li>
</ol>
</div>
<h4 class="page-title">Typicons</h4>
</div><!--end page-title-box-->
</div><!--end col-->
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="mt-0 header-title">Examples</h4>
<p class="text-muted mb-4"> Use <code>&lt;i class="typcn typcn-chart-pie-outline
"&gt;&lt;/i&gt;</code>.
</p>
<div class="row icon-demo-content">
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chart-pie-outline"></i> typcn typcn-chart-pie-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chart-pie"></i> typcn typcn-chart-pie
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chevron-left-outline"></i> typcn typcn-chevron-left-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chevron-left"></i> typcn typcn-chevron-left
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chevron-right-outline"></i> typcn typcn-chevron-right-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-chevron-right"></i> typcn typcn-chevron-right
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-clipboard"></i> typcn typcn-clipboard
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-cloud-storage"></i> typcn typcn-cloud-storage
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-cloud-storage-outline"></i> typcn typcn-cloud-storage-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-code-outline"></i> typcn typcn-code-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-code"></i> typcn typcn-code
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-coffee"></i> typcn typcn-coffee
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-cog-outline"></i> typcn typcn-cog-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-cog"></i> typcn typcn-cog
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-compass"></i> typcn typcn-compass
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-contacts"></i> typcn typcn-contacts
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-credit-card"></i> typcn typcn-credit-card
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-css3"></i> typcn typcn-css3
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-database"></i> typcn typcn-database
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-delete-outline"></i> typcn typcn-delete-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-delete"></i> typcn typcn-delete
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-device-desktop"></i> typcn typcn-device-desktop
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-device-laptop"></i> typcn typcn-device-laptop
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-device-phone"></i> typcn typcn-device-phone
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-device-tablet"></i> typcn typcn-device-tablet
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-directions"></i> typcn typcn-directions
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-divide-outline"></i> typcn typcn-divide-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-divide"></i> typcn typcn-divide
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-document-add"></i> typcn typcn-document-add
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-document-delete"></i> typcn typcn-document-delete
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-document-text"></i> typcn typcn-document-text
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-document"></i> typcn typcn-document
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-download-outline"></i> typcn typcn-download-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-download"></i> typcn typcn-download
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-dropbox"></i> typcn typcn-dropbox
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-edit"></i> typcn typcn-edit
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-eject-outline"></i> typcn typcn-eject-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-eject"></i> typcn typcn-eject
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-equals-outline"></i> typcn typcn-equals-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-equals"></i> typcn typcn-equals
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-export-outline"></i> typcn typcn-export-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-export"></i> typcn typcn-export
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-eye-outline"></i> typcn typcn-eye-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-eye"></i> typcn typcn-eye
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-feather"></i> typcn typcn-feather
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-film"></i> typcn typcn-film
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-filter"></i> typcn typcn-filter
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flag-outline"></i> typcn typcn-flag-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flag"></i> typcn typcn-flag
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flash-outline"></i> typcn typcn-flash-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flash"></i> typcn typcn-flash
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flow-children"></i> typcn typcn-flow-children
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flow-merge"></i> typcn typcn-flow-merge
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flow-parallel"></i> typcn typcn-flow-parallel
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-flow-switch"></i> typcn typcn-flow-switch
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-folder-add"></i> typcn typcn-folder-add
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-folder-delete"></i> typcn typcn-folder-delete
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-folder-open"></i> typcn typcn-folder-open
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-folder"></i> typcn typcn-folder
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-gift"></i> typcn typcn-gift
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-globe-outline"></i> typcn typcn-globe-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-globe"></i> typcn typcn-globe
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-group-outline"></i> typcn typcn-group-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-group"></i> typcn typcn-group
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-headphones"></i> typcn typcn-headphones
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-heart-full-outline"></i> typcn typcn-heart-full-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-heart-half-outline"></i> typcn typcn-heart-half-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-heart-outline"></i> typcn typcn-heart-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-heart"></i> typcn typcn-heart
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-home-outline"></i> typcn typcn-home-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-home"></i> typcn typcn-home
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-html5"></i> typcn typcn-html5
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-image-outline"></i> typcn typcn-image-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-image"></i> typcn typcn-image
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-infinity-outline"></i> typcn typcn-infinity-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-infinity"></i> typcn typcn-infinity
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-info-large-outline"></i> typcn typcn-info-large-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-info-large"></i> typcn typcn-info-large
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-info-outline"></i> typcn typcn-info-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-info"></i> typcn typcn-info
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-input-checked-outline"></i> typcn typcn-input-checked-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-input-checked"></i> typcn typcn-input-checked
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-key-outline"></i> typcn typcn-key-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-key"></i> typcn typcn-key
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-keyboard"></i> typcn typcn-keyboard
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-leaf"></i> typcn typcn-leaf
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-lightbulb"></i> typcn typcn-lightbulb
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-link-outline"></i> typcn typcn-link-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-link"></i> typcn typcn-link
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-location-arrow-outline"></i> typcn typcn-location-arrow-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-location-arrow"></i> typcn typcn-location-arrow
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-location-outline"></i> typcn typcn-location-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-location"></i> typcn typcn-location
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-lock-closed-outline"></i> typcn typcn-lock-closed-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-lock-closed"></i> typcn typcn-lock-closed
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-lock-open-outline"></i> typcn typcn-lock-open-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-lock-open"></i> typcn typcn-lock-open
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-mail"></i> typcn typcn-mail
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-map"></i> typcn typcn-map
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-eject-outline"></i> typcn typcn-media-eject-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-eject"></i> typcn typcn-media-eject
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-fast-forward-outline"></i> typcn typcn-media-fast-forward-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-fast-forward"></i> typcn typcn-media-fast-forward
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-pause-outline"></i> typcn typcn-media-pause-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-pause"></i> typcn typcn-media-pause
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-play-outline"></i> typcn typcn-media-play-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-play-reverse-outline"></i> typcn typcn-media-play-reverse-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-play-reverse"></i> typcn typcn-media-play-reverse
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-play"></i> typcn typcn-media-play
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-record-outline"></i> typcn typcn-media-record-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-record"></i> typcn typcn-media-record
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-rewind-outline"></i> typcn typcn-media-rewind-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-rewind"></i> typcn typcn-media-rewind
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-stop-outline"></i> typcn typcn-media-stop-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-media-stop"></i> typcn typcn-media-stop
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-message-typing"></i> typcn typcn-message-typing
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-message"></i> typcn typcn-message
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-messages"></i> typcn typcn-messages
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-microphone-outline"></i> typcn typcn-microphone-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-microphone"></i> typcn typcn-microphone
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-minus-outline"></i> typcn typcn-minus-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-minus"></i> typcn typcn-minus
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-mortar-board"></i> typcn typcn-mortar-board
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-news"></i> typcn typcn-news
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-notes-outline"></i> typcn typcn-notes-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-notes"></i> typcn typcn-notes
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pen"></i> typcn typcn-pen
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pencil"></i> typcn typcn-pencil
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-phone-outline"></i> typcn typcn-phone-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-phone"></i> typcn typcn-phone
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pi-outline"></i> typcn typcn-pi-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pi"></i> typcn typcn-pi
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pin-outline"></i> typcn typcn-pin-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pin"></i> typcn typcn-pin
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-pipette"></i> typcn typcn-pipette
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-plane-outline"></i> typcn typcn-plane-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-plane"></i> typcn typcn-plane
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-plug"></i> typcn typcn-plug
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-plus-outline"></i> typcn typcn-plus-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-plus"></i> typcn typcn-plus
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-point-of-interest-outline"></i> typcn typcn-point-of-interest-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-point-of-interest"></i> typcn typcn-point-of-interest
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-power-outline"></i> typcn typcn-power-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-power"></i> typcn typcn-power
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-printer"></i> typcn typcn-printer
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-puzzle-outline"></i> typcn typcn-puzzle-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-puzzle"></i> typcn typcn-puzzle
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-radar-outline"></i> typcn typcn-radar-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-radar"></i> typcn typcn-radar
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-refresh-outline"></i> typcn typcn-refresh-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-refresh"></i> typcn typcn-refresh
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-rss-outline"></i> typcn typcn-rss-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-rss"></i> typcn typcn-rss
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-scissors-outline"></i> typcn typcn-scissors-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-scissors"></i> typcn typcn-scissors
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-shopping-bag"></i> typcn typcn-shopping-bag
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-shopping-cart"></i> typcn typcn-shopping-cart
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-at-circular"></i> typcn typcn-social-at-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-dribbble-circular"></i> typcn typcn-social-dribbble-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-dribbble"></i> typcn typcn-social-dribbble
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-facebook-circular"></i> typcn typcn-social-facebook-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-facebook"></i> typcn typcn-social-facebook
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-flickr-circular"></i> typcn typcn-social-flickr-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-flickr"></i> typcn typcn-social-flickr
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-github-circular"></i> typcn typcn-social-github-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-github"></i> typcn typcn-social-github
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-google-plus-circular"></i> typcn typcn-social-google-plus-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-google-plus"></i> typcn typcn-social-google-plus
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-instagram-circular"></i> typcn typcn-social-instagram-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-instagram"></i> typcn typcn-social-instagram
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-last-fm-circular"></i> typcn typcn-social-last-fm-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-last-fm"></i> typcn typcn-social-last-fm
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-linkedin-circular"></i> typcn typcn-social-linkedin-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-linkedin"></i> typcn typcn-social-linkedin
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-pinterest-circular"></i> typcn typcn-social-pinterest-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-pinterest"></i> typcn typcn-social-pinterest
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-skype-outline"></i> typcn typcn-social-skype-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-skype"></i> typcn typcn-social-skype
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-tumbler-circular"></i> typcn typcn-social-tumbler-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-tumbler"></i> typcn typcn-social-tumbler
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-twitter-circular"></i> typcn typcn-social-twitter-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-twitter"></i> typcn typcn-social-twitter
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-vimeo-circular"></i> typcn typcn-social-vimeo-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-vimeo"></i> typcn typcn-social-vimeo
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-youtube-circular"></i> typcn typcn-social-youtube-circular
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-social-youtube"></i> typcn typcn-social-youtube
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-sort-alphabetically-outline"></i> typcn typcn-sort-alphabetically-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-sort-alphabetically"></i> typcn typcn-sort-alphabetically
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-sort-numerically-outline"></i> typcn typcn-sort-numerically-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-sort-numerically"></i> typcn typcn-sort-numerically
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-spanner-outline"></i> typcn typcn-spanner-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-spanner"></i> typcn typcn-spanner
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-spiral"></i> typcn typcn-spiral
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-star-full-outline"></i> typcn typcn-star-full-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-star-half-outline"></i> typcn typcn-star-half-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-star-half"></i> typcn typcn-star-half
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-star-outline"></i> typcn typcn-star-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-star"></i> typcn typcn-star
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-starburst-outline"></i> typcn typcn-starburst-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-starburst"></i> typcn typcn-starburst
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-stopwatch"></i> typcn typcn-stopwatch
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-support"></i> typcn typcn-support
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tabs-outline"></i> typcn typcn-tabs-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tag"></i> typcn typcn-tag
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tags"></i> typcn typcn-tags
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-large-outline"></i> typcn typcn-th-large-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-large"></i> typcn typcn-th-large
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-list-outline"></i> typcn typcn-th-list-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-list"></i> typcn typcn-th-list
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-menu-outline"></i> typcn typcn-th-menu-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-menu"></i> typcn typcn-th-menu
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-small-outline"></i> typcn typcn-th-small-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-th-small"></i> typcn typcn-th-small
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-thermometer"></i> typcn typcn-thermometer
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-thumbs-down"></i> typcn typcn-thumbs-down
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-thumbs-ok"></i> typcn typcn-thumbs-ok
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-thumbs-up"></i> typcn typcn-thumbs-up
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tick-outline"></i> typcn typcn-tick-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tick"></i> typcn typcn-tick
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-ticket"></i> typcn typcn-ticket
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-time"></i> typcn typcn-time
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-times-outline"></i> typcn typcn-times-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-times"></i> typcn typcn-times
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-trash"></i> typcn typcn-trash
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-tree"></i> typcn typcn-tree
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-upload-outline"></i> typcn typcn-upload-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-upload"></i> typcn typcn-upload
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user-add-outline"></i> typcn typcn-user-add-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user-add"></i> typcn typcn-user-add
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user-delete-outline"></i> typcn typcn-user-delete-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user-delete"></i> typcn typcn-user-delete
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user-outline"></i> typcn typcn-user-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-user"></i> typcn typcn-user
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-vendor-android"></i> typcn typcn-vendor-android
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-vendor-apple"></i> typcn typcn-vendor-apple
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-vendor-microsoft"></i> typcn typcn-vendor-microsoft
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-video-outline"></i> typcn typcn-video-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-video"></i> typcn typcn-video
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-volume-down"></i> typcn typcn-volume-down
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-volume-mute"></i> typcn typcn-volume-mute
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-volume-up"></i> typcn typcn-volume-up
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-volume"></i> typcn typcn-volume
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-warning-outline"></i> typcn typcn-warning-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-warning"></i> typcn typcn-warning
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-watch"></i> typcn typcn-watch
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-waves-outline"></i> typcn typcn-waves-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-waves"></i> typcn typcn-waves
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-cloudy"></i> typcn typcn-weather-cloudy
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-downpour"></i> typcn typcn-weather-downpour
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-night"></i> typcn typcn-weather-night
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-partly-sunny"></i> typcn typcn-weather-partly-sunny
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-shower"></i> typcn typcn-weather-shower
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-snow"></i> typcn typcn-weather-snow
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-stormy"></i> typcn typcn-weather-stormy
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-sunny"></i> typcn typcn-weather-sunny
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-windy-cloudy"></i> typcn typcn-weather-windy-cloudy
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-weather-windy"></i> typcn typcn-weather-windy
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-wi-fi-outline"></i> typcn typcn-wi-fi-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-wi-fi"></i> typcn typcn-wi-fi
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-wine"></i> typcn typcn-wine
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-world-outline"></i> typcn typcn-world-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-world"></i> typcn typcn-world
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom-in-outline"></i> typcn typcn-zoom-in-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom-in"></i> typcn typcn-zoom-in
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom-out-outline"></i> typcn typcn-zoom-out-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom-out"></i> typcn typcn-zoom-out
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom-outline"></i> typcn typcn-zoom-outline
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<i class="typcn typcn-zoom"></i> typcn typcn-zoom
</div>
</div> <!-- end row -->
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div><!-- container -->
<footer class="footer text-center text-sm-left">
&copy; 2020 Crovex <span class="text-muted d-none d-sm-inline-block float-right">Crafted with <i class="mdi mdi-heart text-danger"></i> by Mannatthemes</span>
</footer><!--end footer-->
</div>
<!-- end page content -->
</div>
<!-- end page-wrapper -->
<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/jquery-ui.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/metismenu.min.js"></script>
<script src="../assets/js/waves.js"></script>
<script src="../assets/js/feather.min.js"></script>
<script src="../assets/js/jquery.slimscroll.min.js"></script>
<!-- App js -->
<script src="../assets/js/app.js"></script>
</body>
</html>