565 lines
34 KiB
HTML
565 lines
34 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Simple Line Icons CheatSheet</title>
|
|
<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 name="description" content="Simple line icons">
|
|
<meta name="keywords" content="simple, line, icons, icon pack, web icon">
|
|
<link rel="stylesheet" href="styles/simple-line-icons.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="https://github.com/thesabbir/simple-line-icons">Simple Line Icons </a>
|
|
<span class="version">2.5.4</span>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><iframe src="https://ghbtns.com/github-btn.html?user=thesabbir&repo=simple-line-icons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></li>
|
|
<li><iframe src="https://ghbtns.com/github-btn.html?user=thesabbir&repo=simple-line-icons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></li>
|
|
<li class="download"><a href="https://github.com/thesabbir/simple-line-icons/archive/master.zip" class="btn btn-success btn-sm">Download</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt">
|
|
<h3 class="text-center">Cheat sheet</h3>
|
|
<div class="text-center font-size-changer">
|
|
<a href="#" class="small-icons"><i class="icon-info"></i>Small</a> •
|
|
<a href="#" class="medium-icons active"><i class="icon-info"></i> Medium</a> •
|
|
<a href="#" class="large-icons"><i class="icon-info"></i> Large</a>
|
|
</div>
|
|
<p class="text-center">Click on the icons to get the icon class name</p>
|
|
<div class="quick-search">
|
|
<input type="text" id="quick-search" placeholder="Search..." />
|
|
<i class="icon-magnifier"></i>
|
|
</div>
|
|
|
|
|
|
<div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-user icons"></i><span class="name">user</span> <code class="code-preview">.icon-user</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-user-female icons"></i><span class="name">user-female</span> <code class="code-preview">.icon-user-female</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-user-following icons"></i><span class="name">user-following</span> <code class="code-preview">.icon-user-following</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-login icons"></i><span class="name">login</span> <code class="code-preview">.icon-login</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-emotsmile icons"></i><span class="name">emotsmile</span> <code class="code-preview">.icon-emotsmile</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-call-end icons"></i><span class="name">call-end</span> <code class="code-preview">.icon-call-end</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-call-out icons"></i><span class="name">call-out</span> <code class="code-preview">.icon-call-out</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-location-pin icons"></i><span class="name">location-pin</span> <code class="code-preview">.icon-location-pin</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-directions icons"></i><span class="name">directions</span> <code class="code-preview">.icon-directions</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-layers icons"></i><span class="name">layers</span> <code class="code-preview">.icon-layers</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-list icons"></i><span class="name">list</span> <code class="code-preview">.icon-list</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-options icons"></i><span class="name">options</span> <code class="code-preview">.icon-options</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-left icons"></i><span class="name">arrow-left</span> <code class="code-preview">.icon-arrow-left</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-up icons"></i><span class="name">arrow-up</span> <code class="code-preview">.icon-arrow-up</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-left-circle icons"></i><span class="name">arrow-left-circle</span> <code class="code-preview">.icon-arrow-left-circle</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-down-circle icons"></i><span class="name">arrow-down-circle</span> <code class="code-preview">.icon-arrow-down-circle</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-clock icons"></i><span class="name">clock</span> <code class="code-preview">.icon-clock</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-minus icons"></i><span class="name">minus</span> <code class="code-preview">.icon-minus</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-event icons"></i><span class="name">event</span> <code class="code-preview">.icon-event</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-organization icons"></i><span class="name">organization</span> <code class="code-preview">.icon-organization</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-screen-smartphone icons"></i><span class="name">screen-smartphone</span> <code class="code-preview">.icon-screen-smartphone</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-plane icons"></i><span class="name">plane</span> <code class="code-preview">.icon-plane</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-mustache icons"></i><span class="name">mustache</span> <code class="code-preview">.icon-mustache</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-magnet icons"></i><span class="name">magnet</span> <code class="code-preview">.icon-magnet</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-disc icons"></i><span class="name">disc</span> <code class="code-preview">.icon-disc</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-cursor-move icons"></i><span class="name">cursor-move</span> <code class="code-preview">.icon-cursor-move</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-chemistry icons"></i><span class="name">chemistry</span> <code class="code-preview">.icon-chemistry</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-shield icons"></i><span class="name">shield</span> <code class="code-preview">.icon-shield</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-magic-wand icons"></i><span class="name">magic-wand</span> <code class="code-preview">.icon-magic-wand</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-graduation icons"></i><span class="name">graduation</span> <code class="code-preview">.icon-graduation</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-game-controller icons"></i><span class="name">game-controller</span> <code class="code-preview">.icon-game-controller</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-eyeglass icons"></i><span class="name">eyeglass</span> <code class="code-preview">.icon-eyeglass</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-envelope-letter icons"></i><span class="name">envelope-letter</span> <code class="code-preview">.icon-envelope-letter</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-badge icons"></i><span class="name">badge</span> <code class="code-preview">.icon-badge</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-wallet icons"></i><span class="name">wallet</span> <code class="code-preview">.icon-wallet</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-speech icons"></i><span class="name">speech</span> <code class="code-preview">.icon-speech</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-printer icons"></i><span class="name">printer</span> <code class="code-preview">.icon-printer</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-playlist icons"></i><span class="name">playlist</span> <code class="code-preview">.icon-playlist</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-picture icons"></i><span class="name">picture</span> <code class="code-preview">.icon-picture</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-globe-alt icons"></i><span class="name">globe-alt</span> <code class="code-preview">.icon-globe-alt</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-folder-alt icons"></i><span class="name">folder-alt</span> <code class="code-preview">.icon-folder-alt</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-film icons"></i><span class="name">film</span> <code class="code-preview">.icon-film</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-drop icons"></i><span class="name">drop</span> <code class="code-preview">.icon-drop</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-docs icons"></i><span class="name">docs</span> <code class="code-preview">.icon-docs</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-diamond icons"></i><span class="name">diamond</span> <code class="code-preview">.icon-diamond</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-calculator icons"></i><span class="name">calculator</span> <code class="code-preview">.icon-calculator</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-briefcase icons"></i><span class="name">briefcase</span> <code class="code-preview">.icon-briefcase</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-basket-loaded icons"></i><span class="name">basket-loaded</span> <code class="code-preview">.icon-basket-loaded</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-bag icons"></i><span class="name">bag</span> <code class="code-preview">.icon-bag</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-action-redo icons"></i><span class="name">action-redo</span> <code class="code-preview">.icon-action-redo</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-umbrella icons"></i><span class="name">umbrella</span> <code class="code-preview">.icon-umbrella</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-tag icons"></i><span class="name">tag</span> <code class="code-preview">.icon-tag</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-frame icons"></i><span class="name">frame</span> <code class="code-preview">.icon-frame</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-size-actual icons"></i><span class="name">size-actual</span> <code class="code-preview">.icon-size-actual</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-share-alt icons"></i><span class="name">share-alt</span> <code class="code-preview">.icon-share-alt</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-rocket icons"></i><span class="name">rocket</span> <code class="code-preview">.icon-rocket</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-pie-chart icons"></i><span class="name">pie-chart</span> <code class="code-preview">.icon-pie-chart</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-note icons"></i><span class="name">note</span> <code class="code-preview">.icon-note</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-home icons"></i><span class="name">home</span> <code class="code-preview">.icon-home</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-graph icons"></i><span class="name">graph</span> <code class="code-preview">.icon-graph</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-music-tone-alt icons"></i><span class="name">music-tone-alt</span> <code class="code-preview">.icon-music-tone-alt</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-earphones-alt icons"></i><span class="name">earphones-alt</span> <code class="code-preview">.icon-earphones-alt</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-equalizer icons"></i><span class="name">equalizer</span> <code class="code-preview">.icon-equalizer</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-dislike icons"></i><span class="name">dislike</span> <code class="code-preview">.icon-dislike</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-control-rewind icons"></i><span class="name">control-rewind</span> <code class="code-preview">.icon-control-rewind</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-control-pause icons"></i><span class="name">control-pause</span> <code class="code-preview">.icon-control-pause</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-control-end icons"></i><span class="name">control-end</span> <code class="code-preview">.icon-control-end</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-volume-2 icons"></i><span class="name">volume-2</span> <code class="code-preview">.icon-volume-2</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-calendar icons"></i><span class="name">calendar</span> <code class="code-preview">.icon-calendar</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-chart icons"></i><span class="name">chart</span> <code class="code-preview">.icon-chart</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-bubble icons"></i><span class="name">bubble</span> <code class="code-preview">.icon-bubble</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-camera icons"></i><span class="name">camera</span> <code class="code-preview">.icon-camera</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-cloud-upload icons"></i><span class="name">cloud-upload</span> <code class="code-preview">.icon-cloud-upload</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-eye icons"></i><span class="name">eye</span> <code class="code-preview">.icon-eye</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-heart icons"></i><span class="name">heart</span> <code class="code-preview">.icon-heart</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-key icons"></i><span class="name">key</span> <code class="code-preview">.icon-key</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-lock icons"></i><span class="name">lock</span> <code class="code-preview">.icon-lock</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-magnifier icons"></i><span class="name">magnifier</span> <code class="code-preview">.icon-magnifier</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-magnifier-remove icons"></i><span class="name">magnifier-remove</span> <code class="code-preview">.icon-magnifier-remove</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-paper-plane icons"></i><span class="name">paper-plane</span> <code class="code-preview">.icon-paper-plane</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-refresh icons"></i><span class="name">refresh</span> <code class="code-preview">.icon-refresh</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-settings icons"></i><span class="name">settings</span> <code class="code-preview">.icon-settings</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-symbol-female icons"></i><span class="name">symbol-female</span> <code class="code-preview">.icon-symbol-female</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-target icons"></i><span class="name">target</span> <code class="code-preview">.icon-target</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-paypal icons"></i><span class="name">paypal</span> <code class="code-preview">.icon-paypal</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-twitter icons"></i><span class="name">social-twitter</span> <code class="code-preview">.icon-social-twitter</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-instagram icons"></i><span class="name">social-instagram</span> <code class="code-preview">.icon-social-instagram</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-pinterest icons"></i><span class="name">social-pinterest</span> <code class="code-preview">.icon-social-pinterest</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-google icons"></i><span class="name">social-google</span> <code class="code-preview">.icon-social-google</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-skype icons"></i><span class="name">social-skype</span> <code class="code-preview">.icon-social-skype</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-behance icons"></i><span class="name">social-behance</span> <code class="code-preview">.icon-social-behance</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-soundcloud icons"></i><span class="name">social-soundcloud</span> <code class="code-preview">.icon-social-soundcloud</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-stumbleupon icons"></i><span class="name">social-stumbleupon</span> <code class="code-preview">.icon-social-stumbleupon</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-dropbox icons"></i><span class="name">social-dropbox</span> <code class="code-preview">.icon-social-dropbox</code></a>
|
|
</div>
|
|
</div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
|
|
<div class="preview">
|
|
<a href="#" class="show-code" title="click to show css class name"><i class="icon-social-steam icons"></i><span class="name">social-steam</span> <code class="code-preview">.icon-social-steam</code></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p class="pull-left">Brought to you by <a href="https://twitter.com/alreadysabbir">Sabbir</a> & <a href="https://github.com/thesabbir/simple-line-icons#contributors">Contributors</a></p>
|
|
<p class="pull-right">
|
|
<a href="https://cdnjs.com/libraries/simple-line-icons" class="use-cdn" title="Go to project page on cdnjs.com" target="_blank">Use CDN</a>
|
|
<a href="https://github.com/thesabbir/simple-line-icons">Contribute!</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.code-preview').hide();
|
|
$('.show-code').click(function (e) {
|
|
$(this).children('.name').toggle();
|
|
$(this).children('.code-preview').toggle();
|
|
e.stopPropagation();
|
|
return false;
|
|
});
|
|
$("#quick-search").keyup(function () {
|
|
var srch = $(this).val().trim().toLowerCase();
|
|
$(".icon-preview-box").hide()
|
|
.filter(function () {
|
|
return $(this).html().trim().toLowerCase().indexOf(srch) != -1;
|
|
}).show();
|
|
});
|
|
$(".font-size-changer a").click(function (e) {
|
|
e.preventDefault();
|
|
$(".font-size-changer .active").removeClass("active");
|
|
$(".icon-preview-box").removeClass("small-icons medium-icons large-icons").addClass($(this).attr("class"));
|
|
$(this).addClass("active");
|
|
});
|
|
});
|
|
</script>
|
|
<style>
|
|
.preview {
|
|
padding: 15px 0;
|
|
position: relative;
|
|
height: 100px;
|
|
}
|
|
|
|
.icons {
|
|
font-size: 18px;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
.code-preview {
|
|
display: none;
|
|
}
|
|
|
|
.name {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.show-code {
|
|
color: #101010;
|
|
}
|
|
.mt {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.show-code:hover, .show-code:active, .show-code:focus {
|
|
color: #252525;
|
|
text-decoration: none;
|
|
}
|
|
.footer {
|
|
background: #efefef;
|
|
min-height: 60px;
|
|
padding: 20px;
|
|
}
|
|
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
|
|
color: #ffffff;
|
|
}
|
|
.navbar-nav > li > iframe {
|
|
margin-top: 13px;
|
|
}
|
|
body {
|
|
font-family: "Helvetica Neue", "Roboto", sans-serif;
|
|
}
|
|
.quick-search {
|
|
width: 200px;
|
|
margin: 25px auto;
|
|
position: relative;
|
|
}
|
|
.quick-search i {
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 7px;
|
|
color: #ccc;
|
|
}
|
|
.quick-search input {
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
text-indent: 22px;
|
|
width: 100%;
|
|
}
|
|
.quick-search input:focus {
|
|
border-color: #999;
|
|
}
|
|
.quick-search input:focus + i {
|
|
color: #999;
|
|
}
|
|
.small-icons, .small-icons .icons {font-size: 8pt; vertical-align: middle;}
|
|
.medium-icons {vertical-align: middle;}
|
|
.large-icons, .large-icons .icons {font-size: 22pt; vertical-align: middle;}
|
|
.font-size-changer a {text-decoration: none; border: 1px solid #fff; border-radius: 3px; display: inline-block; padding: 5px; vertical-align: middle;}
|
|
.font-size-changer a.active {border-color: #999; color: #333;}
|
|
.version {
|
|
font-size: 8px;
|
|
color: #eeeeee;
|
|
}
|
|
.download {
|
|
padding: 8px 0 0 8px;
|
|
}
|
|
|
|
.download .btn {
|
|
padding-right: 25px;
|
|
padding-left: 25px;
|
|
height: 32px;
|
|
line-height: 0;
|
|
}
|
|
.use-cdn {
|
|
margin-right: 2rem;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|