@coreui/ajax
Version:
Open Source Bootstrap Admin Template
1,235 lines (1,074 loc) • 199 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
<link rel="shortcut icon" href="img/favicon.png">
<title>CoreUI - Open Source Bootstrap Admin Template</title>
<!-- Icons -->
<link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Main styles for this application -->
<link href="css/style.css" rel="stylesheet">
<!-- Styles required by this views -->
</head>
<!-- BODY options, add following classes to body to change options
// Header options
1. '.header-fixed' - Fixed Header
// Brand options
1. '.brand-minimized' - Minimized brand (Only symbol)
// Sidebar options
1. '.sidebar-fixed' - Fixed Sidebar
2. '.sidebar-hidden' - Hidden Sidebar
3. '.sidebar-off-canvas' - Off Canvas Sidebar
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
5. '.sidebar-compact' - Compact Sidebar
// Aside options
1. '.aside-menu-fixed' - Fixed Aside Menu
2. '.aside-menu-hidden' - Hidden Aside Menu
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
// Breadcrumb options
1. '.breadcrumb-fixed' - Fixed Breadcrumb
// Footer options
1. '.footer-fixed' - Fixed footer
-->
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav navbar-nav d-md-down-none">
<li class="nav-item px-3">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Users</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-list"></i></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Account</strong>
</div>
<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a>
<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
<div class="divider"></div>
<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>
<button class="navbar-toggler aside-menu-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</header>
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a>
</li>
<li class="nav-title">
Theme
</li>
<li class="nav-item">
<a href="colors.html" class="nav-link"><i class="icon-drop"></i> Colors</a>
</li>
<li class="nav-item">
<a href="typography.html" class="nav-link"><i class="icon-pencil"></i> Typograhy</a>
</li>
<li class="nav-title">
Components
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="base-breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-cards.html"><i class="icon-puzzle"></i> Cards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-carousel.html"><i class="icon-puzzle"></i> Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-collapse.html"><i class="icon-puzzle"></i> Collapse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-forms.html"><i class="icon-puzzle"></i> Forms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-jumbotron.html"><i class="icon-puzzle"></i> Jumbotron</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-list-group.html"><i class="icon-puzzle"></i> List group</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-navs.html"><i class="icon-puzzle"></i> Navs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-pagination.html"><i class="icon-puzzle"></i> Pagination</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-popovers.html"><i class="icon-puzzle"></i> Popovers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-progress.html"><i class="icon-puzzle"></i> Progress</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-switches.html"><i class="icon-puzzle"></i> Switches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tables.html"><i class="icon-puzzle"></i> Tables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tabs.html"><i class="icon-puzzle"></i> Tabs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="base-tooltips.html"><i class="icon-puzzle"></i> Tooltips</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-cursor"></i> Buttons</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="buttons-buttons.html"><i class="icon-cursor"></i> Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-button-group.html"><i class="icon-cursor"></i> Buttons Group</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-dropdowns.html"><i class="icon-cursor"></i> Dropdowns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buttons-social-buttons.html"><i class="icon-cursor"></i> Social Buttons</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> Charts</a>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="icons-flags.html"><i class="icon-star"></i> Flags <span class="badge badge-success">NEW</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-bell"></i> Notifications</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="notifications-alerts.html"><i class="icon-bell"></i> Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications-badge.html"><i class="icon-bell"></i> Badge</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications-modals.html"><i class="icon-bell"></i> Modals</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a>
</li>
<li class="divider"></li>
<li class="nav-title">
Extras
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a>
</li>
</ul>
</li>
<li class="nav-item mt-auto">
<a class="nav-link nav-link-success" href="http://coreui.io/" target="_top"><i class="icon-cloud-download"></i> Download CoreUI</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-danger" href="http://coreui.io/pro/" target="_top"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
<!-- Main content -->
<main class="main">
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item"><a href="#">Admin</a></li>
<li class="breadcrumb-item active">Dashboard</li>
<!-- Breadcrumb Menu-->
<li class="breadcrumb-menu d-md-down-none">
<div class="btn-group" role="group" aria-label="Button group">
<a class="btn" href="#"><i class="icon-speech"></i></a>
<a class="btn" href="./"><i class="icon-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="icon-settings"></i> Settings</a>
</div>
</li>
</ol>
<div class="container-fluid">
<div class="animated fadeIn">
<div class="card" id="new47">
<div class="card-header">
<i class="fa fa-font-awesome"></i> 50 New Icons in 4.7</div>
<div class="card-body">
<div class="row text-center">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-address-book fa-lg mt-4"></i>
<br>address-book
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-address-book-o fa-lg mt-4"></i>
<br>address-book-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-address-card fa-lg mt-4"></i>
<br>address-card
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-address-card-o fa-lg mt-4"></i>
<br>address-card-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bandcamp fa-lg mt-4"></i>
<br>bandcamp
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bath fa-lg mt-4"></i>
<br>bath
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bathtub fa-lg mt-4"></i>
<br>bathtub
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-drivers-license fa-lg mt-4"></i>
<br>drivers-license
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-drivers-license-o fa-lg mt-4"></i>
<br>drivers-license-o
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-eercast fa-lg mt-4"></i>
<br>eercast
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-envelope-open fa-lg mt-4"></i>
<br>envelope-open
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-envelope-open-o fa-lg mt-4"></i>
<br>envelope-open-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-etsy fa-lg mt-4"></i>
<br>etsy
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-free-code-camp fa-lg mt-4"></i>
<br>free-code-camp
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-grav fa-lg mt-4"></i>
<br>grav
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-handshake-o fa-lg mt-4"></i>
<br>handshake-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-id-badge fa-lg mt-4"></i>
<br>id-badge
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-id-card fa-lg mt-4"></i>
<br>id-card
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-id-card-o fa-lg mt-4"></i>
<br>id-card-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-imdb fa-lg mt-4"></i>
<br>imdb
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-linode fa-lg mt-4"></i>
<br>linode
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-meetup fa-lg mt-4"></i>
<br>meetup
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-microchip fa-lg mt-4"></i>
<br>microchip
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-podcast fa-lg mt-4"></i>
<br>podcast
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-quora fa-lg mt-4"></i>
<br>quora
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-ravelry fa-lg mt-4"></i>
<br>ravelry
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-s15 fa-lg mt-4"></i>
<br>s15
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-shower fa-lg mt-4"></i>
<br>shower
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-snowflake-o fa-lg mt-4"></i>
<br>snowflake-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-superpowers fa-lg mt-4"></i>
<br>superpowers
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-telegram fa-lg mt-4"></i>
<br>telegram
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer fa-lg mt-4"></i>
<br>thermometer
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-0 fa-lg mt-4"></i>
<br>thermometer-0
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-1 fa-lg mt-4"></i>
<br>thermometer-1
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-2 fa-lg mt-4"></i>
<br>thermometer-2
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-3 fa-lg mt-4"></i>
<br>thermometer-3
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-4 fa-lg mt-4"></i>
<br>thermometer-4
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-empty fa-lg mt-4"></i>
<br>thermometer-empty
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-full fa-lg mt-4"></i>
<br>thermometer-full
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-half fa-lg mt-4"></i>
<br>thermometer-half
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-quarter fa-lg mt-4"></i>
<br>thermometer-quarter
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-thermometer-three-quarters fa-lg mt-4"></i>
<br>thermometer-three-quarters
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-times-rectangle fa-lg mt-4"></i>
<br>times-rectangle
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-times-rectangle-o fa-lg mt-4"></i>
<br>times-rectangle-o
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-user-circle fa-lg mt-4"></i>
<br>user-circle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-user-circle-o fa-lg mt-4"></i>
<br>user-circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-user-o fa-lg mt-4"></i>
<br>user-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-vcard fa-lg mt-4"></i>
<br>vcard
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-vcard-o fa-lg mt-4"></i>
<br>vcard-o
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-window-close fa-lg mt-4"></i>
<br>window-close
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-window-close-o fa-lg mt-4"></i>
<br>window-close-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-window-maximize fa-lg mt-4"></i>
<br>window-maximize
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-window-minimize fa-lg mt-4"></i>
<br>window-minimize
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-window-restore fa-lg mt-4"></i>
<br>window-restore
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-wpexplorer fa-lg mt-4"></i>
<br>wpexplorer
</div>
</div>
</div>
</div>
<div class="card" id="new">
<div class="card-header">20 New Icons in 4.5</div>
<div class="card-body">
<div class="row text-center">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bluetooth fa-lg mt-4"></i>
<br>bluetooth
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bluetooth-b fa-lg mt-4"></i>
<br>bluetooth-b
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-codiepie fa-lg mt-4"></i>
<br>codiepie
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-credit-card-alt fa-lg mt-4"></i>
<br>credit-card-alt
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-edge fa-lg mt-4"></i>
<br>edge
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-fort-awesome fa-lg mt-4"></i>
<br>fort-awesome
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-hashtag fa-lg mt-4"></i>
<br>hashtag
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-mixcloud fa-lg mt-4"></i>
<br>mixcloud
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-modx fa-lg mt-4"></i>
<br>modx
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-pause-circle fa-lg mt-4"></i>
<br>pause-circle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-pause-circle-o fa-lg mt-4"></i>
<br>pause-circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-percent fa-lg mt-4"></i>
<br>percent
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-product-hunt fa-lg mt-4"></i>
<br>product-hunt
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-reddit-alien fa-lg mt-4"></i>
<br>reddit-alien
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-scribd fa-lg mt-4"></i>
<br>scribd
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-shopping-bag fa-lg mt-4"></i>
<br>shopping-bag
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-shopping-basket fa-lg mt-4"></i>
<br>shopping-basket
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-stop-circle fa-lg mt-4"></i>
<br>stop-circle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-stop-circle-o fa-lg mt-4"></i>
<br>stop-circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-usb fa-lg mt-4"></i>
<br>usb
</div>
</div>
</div>
</div>
<div class="card" id="web-application">
<div class="card-header">Web Application Icons</div>
<div class="card-body">
<div class="row text-center">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-adjust fa-lg mt-4"></i>
<br>adjust
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-anchor fa-lg mt-4"></i>
<br>anchor
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-archive fa-lg mt-4"></i>
<br>archive
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-area-chart fa-lg mt-4"></i>
<br>area-chart
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-arrows fa-lg mt-4"></i>
<br>arrows
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-arrows-h fa-lg mt-4"></i>
<br>arrows-h
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-arrows-v fa-lg mt-4"></i>
<br>arrows-v
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-asterisk fa-lg mt-4"></i>
<br>asterisk
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-at fa-lg mt-4"></i>
<br>at
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-automobile fa-lg mt-4"></i>
<br>automobile
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-balance-scale fa-lg mt-4"></i>
<br>balance-scale
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-ban fa-lg mt-4"></i>
<br>ban
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bank fa-lg mt-4"></i>
<br>bank
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bar-chart fa-lg mt-4"></i>
<br>bar-chart
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bar-chart-o fa-lg mt-4"></i>
<br>bar-chart-o
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-barcode fa-lg mt-4"></i>
<br>barcode
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bars fa-lg mt-4"></i>
<br>bars
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-0 fa-lg mt-4"></i>
<br>battery-0
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-1 fa-lg mt-4"></i>
<br>battery-1
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-2 fa-lg mt-4"></i>
<br>battery-2
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-3 fa-lg mt-4"></i>
<br>battery-3
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-4 fa-lg mt-4"></i>
<br>battery-4
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-empty fa-lg mt-4"></i>
<br>battery-empty
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-full fa-lg mt-4"></i>
<br>battery-full
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-half fa-lg mt-4"></i>
<br>battery-half
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-quarter fa-lg mt-4"></i>
<br>battery-quarter
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-battery-three-quarters fa-lg mt-4"></i>
<br>battery-three-quarters
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bed fa-lg mt-4"></i>
<br>bed
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-beer fa-lg mt-4"></i>
<br>beer
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bell fa-lg mt-4"></i>
<br>bell
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bell-o fa-lg mt-4"></i>
<br>bell-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bell-slash fa-lg mt-4"></i>
<br>bell-slash
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bell-slash-o fa-lg mt-4"></i>
<br>bell-slash-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bicycle fa-lg mt-4"></i>
<br>bicycle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-binoculars fa-lg mt-4"></i>
<br>binoculars
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-birthday-cake fa-lg mt-4"></i>
<br>birthday-cake
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bluetooth fa-lg mt-4"></i>
<br>bluetooth
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bluetooth-b fa-lg mt-4"></i>
<br>bluetooth-b
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bolt fa-lg mt-4"></i>
<br>bolt
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bomb fa-lg mt-4"></i>
<br>bomb
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-book fa-lg mt-4"></i>
<br>book
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bookmark fa-lg mt-4"></i>
<br>bookmark
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bookmark-o fa-lg mt-4"></i>
<br>bookmark-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-briefcase fa-lg mt-4"></i>
<br>briefcase
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bug fa-lg mt-4"></i>
<br>bug
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-building fa-lg mt-4"></i>
<br>building
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-building-o fa-lg mt-4"></i>
<br>building-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bullhorn fa-lg mt-4"></i>
<br>bullhorn
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bullseye fa-lg mt-4"></i>
<br>bullseye
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-bus fa-lg mt-4"></i>
<br>bus
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cab fa-lg mt-4"></i>
<br>cab
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calculator fa-lg mt-4"></i>
<br>calculator
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar fa-lg mt-4"></i>
<br>calendar
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar-check-o fa-lg mt-4"></i>
<br>calendar-check-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar-minus-o fa-lg mt-4"></i>
<br>calendar-minus-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar-o fa-lg mt-4"></i>
<br>calendar-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar-plus-o fa-lg mt-4"></i>
<br>calendar-plus-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-calendar-times-o fa-lg mt-4"></i>
<br>calendar-times-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-camera fa-lg mt-4"></i>
<br>camera
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-camera-retro fa-lg mt-4"></i>
<br>camera-retro
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-car fa-lg mt-4"></i>
<br>car
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-caret-square-o-down fa-lg mt-4"></i>
<br>caret-square-o-down
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-caret-square-o-left fa-lg mt-4"></i>
<br>caret-square-o-left
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-caret-square-o-right fa-lg mt-4"></i>
<br>caret-square-o-right
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-caret-square-o-up fa-lg mt-4"></i>
<br>caret-square-o-up
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cart-arrow-down fa-lg mt-4"></i>
<br>cart-arrow-down
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cart-plus fa-lg mt-4"></i>
<br>cart-plus
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cc fa-lg mt-4"></i>
<br>cc
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-certificate fa-lg mt-4"></i>
<br>certificate
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-check fa-lg mt-4"></i>
<br>check
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-check-circle fa-lg mt-4"></i>
<br>check-circle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-check-circle-o fa-lg mt-4"></i>
<br>check-circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-check-square fa-lg mt-4"></i>
<br>check-square
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-check-square-o fa-lg mt-4"></i>
<br>check-square-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-child fa-lg mt-4"></i>
<br>child
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-circle fa-lg mt-4"></i>
<br>circle
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-circle-o fa-lg mt-4"></i>
<br>circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-circle-o-notch fa-lg mt-4"></i>
<br>circle-o-notch
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-circle-thin fa-lg mt-4"></i>
<br>circle-thin
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-clock-o fa-lg mt-4"></i>
<br>clock-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-clone fa-lg mt-4"></i>
<br>clone
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-close fa-lg mt-4"></i>
<br>close
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cloud fa-lg mt-4"></i>
<br>cloud
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cloud-download fa-lg mt-4"></i>
<br>cloud-download
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cloud-upload fa-lg mt-4"></i>
<br>cloud-upload
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-code fa-lg mt-4"></i>
<br>code
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-code-fork fa-lg mt-4"></i>
<br>code-fork
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-coffee fa-lg mt-4"></i>
<br>coffee
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cog fa-lg mt-4"></i>
<br>cog
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cogs fa-lg mt-4"></i>
<br>cogs
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-comment fa-lg mt-4"></i>
<br>comment
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-comment-o fa-lg mt-4"></i>
<br>comment-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-commenting fa-lg mt-4"></i>
<br>commenting
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-commenting-o fa-lg mt-4"></i>
<br>commenting-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-comments fa-lg mt-4"></i>
<br>comments
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-comments-o fa-lg mt-4"></i>
<br>comments-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-compass fa-lg mt-4"></i>
<br>compass
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-copyright fa-lg mt-4"></i>
<br>copyright
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-creative-commons fa-lg mt-4"></i>
<br>creative-commons
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-credit-card fa-lg mt-4"></i>
<br>credit-card
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-credit-card-alt fa-lg mt-4"></i>
<br>credit-card-alt
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-crop fa-lg mt-4"></i>
<br>crop
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-crosshairs fa-lg mt-4"></i>
<br>crosshairs
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cube fa-lg mt-4"></i>
<br>cube
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cubes fa-lg mt-4"></i>
<br>cubes
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-cutlery fa-lg mt-4"></i>
<br>cutlery
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-dashboard fa-lg mt-4"></i>
<br>dashboard
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-database fa-lg mt-4"></i>
<br>database
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-desktop fa-lg mt-4"></i>
<br>desktop
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-diamond fa-lg mt-4"></i>
<br>diamond
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-dot-circle-o fa-lg mt-4"></i>
<br>dot-circle-o
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-download fa-lg mt-4"></i>
<br>download
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-edit fa-lg mt-4"></i>
<br>edit
<span class="text-muted">(alias)</span>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-ellipsis-h fa-lg mt-4"></i>
<br>ellipsis-h
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-ellipsis-v fa-lg mt-4"></i>
<br>ellipsis-v
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<i class="fa fa-envelope fa