PATH:
home
/
letacommog
/
newrdv1
/
wp-content
/
themes
/
besa
/
fonts
/
tb-icon
<html class="gr__simplelineicons_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Simple line icons"> <meta name="keywords" content="simple, line, icons, icon pack, web icon"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ThemBay Icon Font</title> <link rel="stylesheet" href="./../../css/font-tbay-custom.css"> <link rel="stylesheet" href="http://simplelineicons.com/css/bootstrap.css"> <link rel="stylesheet" href="http://simplelineicons.com/css/style.css"> </head> <body data-gr-c-s-loaded="true"> <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://thembay.com/">ThemBay Custom Icon</a> </div> </div> </nav> <div class="container mt"> <h1 class="text-center">ThemBay Custom Icon Preview</h1> <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="tb-icon tb-icon-00-star" style="font-size: 20px;"></i> <span class="name" style="display: inline;">00-star</span> <code class="code-preview" style="display: none;">.tb-icon-00-star</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-00-star"></input> </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="tb-icon tb-icon-arrow-bottom" style="font-size: 20px;"></i> <span class="name" style="display: inline;">arrow-bottom</span> <code class="code-preview" style="display: none;">.tb-icon-arrow-bottom</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-arrow-bottom"></input> </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="tb-icon tb-icon-arrow-left" style="font-size: 20px;"></i> <span class="name" style="display: inline;">arrow-left</span> <code class="code-preview" style="display: none;">.tb-icon-arrow-left</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-arrow-left"></input> </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="tb-icon tb-icon-arrow-right" style="font-size: 20px;"></i> <span class="name" style="display: inline;">arrow-right</span> <code class="code-preview" style="display: none;">.tb-icon-arrow-right</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-arrow-right"></input> </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="tb-icon tb-icon-arrow-top" style="font-size: 20px;"></i> <span class="name" style="display: inline;">arrow-top</span> <code class="code-preview" style="display: none;">.tb-icon-arrow-top</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-arrow-top"></input> </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="tb-icon tb-icon-bubbles" style="font-size: 20px;"></i> <span class="name" style="display: inline;">bubbles</span> <code class="code-preview" style="display: none;">.tb-icon-bubbles</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-bubbles"></input> </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="tb-icon tb-icon-calendar-31" style="font-size: 20px;"></i> <span class="name" style="display: inline;">calendar-31</span> <code class="code-preview" style="display: none;">.tb-icon-calendar-31</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-calendar-31"></input> </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="tb-icon tb-icon-cart-empty" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cart-empty</span> <code class="code-preview" style="display: none;">.tb-icon-cart-empty</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cart-empty"></input> </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="tb-icon tb-icon-cart-full" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cart-full</span> <code class="code-preview" style="display: none;">.tb-icon-cart-full</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cart-full"></input> </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="tb-icon tb-icon-cart-plus" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cart-plus</span> <code class="code-preview" style="display: none;">.tb-icon-cart-plus</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cart-plus"></input> </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="tb-icon tb-icon-cart" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cart</span> <code class="code-preview" style="display: none;">.tb-icon-cart</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cart"></input> </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="tb-icon tb-icon-check" style="font-size: 20px;"></i> <span class="name" style="display: inline;">check</span> <code class="code-preview" style="display: none;">.tb-icon-check</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-check"></input> </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="tb-icon tb-icon-chevron-down" style="font-size: 20px;"></i> <span class="name" style="display: inline;">chevron-down</span> <code class="code-preview" style="display: none;">.tb-icon-chevron-down</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-chevron-down"></input> </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="tb-icon tb-icon-chevron-left" style="font-size: 20px;"></i> <span class="name" style="display: inline;">chevron-left</span> <code class="code-preview" style="display: none;">.tb-icon-chevron-left</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-chevron-left"></input> </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="tb-icon tb-icon-chevron-right" style="font-size: 20px;"></i> <span class="name" style="display: inline;">chevron-right</span> <code class="code-preview" style="display: none;">.tb-icon-chevron-right</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-chevron-right"></input> </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="tb-icon tb-icon-chevron-up" style="font-size: 20px;"></i> <span class="name" style="display: inline;">chevron-up</span> <code class="code-preview" style="display: none;">.tb-icon-chevron-up</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-chevron-up"></input> </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="tb-icon tb-icon-clapboard-play" style="font-size: 20px;"></i> <span class="name" style="display: inline;">clapboard-play</span> <code class="code-preview" style="display: none;">.tb-icon-clapboard-play</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-clapboard-play"></input> </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="tb-icon tb-icon-cog" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cog</span> <code class="code-preview" style="display: none;">.tb-icon-cog</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cog"></input> </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="tb-icon tb-icon-cross" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cross</span> <code class="code-preview" style="display: none;">.tb-icon-cross</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cross"></input> </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="tb-icon tb-icon-cross2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cross2</span> <code class="code-preview" style="display: none;">.tb-icon-cross2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cross2"></input> </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="tb-icon tb-icon-cube" style="font-size: 20px;"></i> <span class="name" style="display: inline;">cube</span> <code class="code-preview" style="display: none;">.tb-icon-cube</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-cube"></input> </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="tb-icon tb-icon-document" style="font-size: 20px;"></i> <span class="name" style="display: inline;">document</span> <code class="code-preview" style="display: none;">.tb-icon-document</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-document"></input> </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="tb-icon tb-icon-envelope-open" style="font-size: 20px;"></i> <span class="name" style="display: inline;">envelope-open</span> <code class="code-preview" style="display: none;">.tb-icon-envelope-open</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-envelope-open"></input> </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="tb-icon tb-icon-envelope" style="font-size: 20px;"></i> <span class="name" style="display: inline;">envelope</span> <code class="code-preview" style="display: none;">.tb-icon-envelope</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-envelope"></input> </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="tb-icon tb-icon-equalizer" style="font-size: 20px;"></i> <span class="name" style="display: inline;">equalizer</span> <code class="code-preview" style="display: none;">.tb-icon-equalizer</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-equalizer"></input> </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="tb-icon tb-icon-eye" style="font-size: 20px;"></i> <span class="name" style="display: inline;">eye</span> <code class="code-preview" style="display: none;">.tb-icon-eye</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-eye"></input> </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="tb-icon tb-icon-heart" style="font-size: 20px;"></i> <span class="name" style="display: inline;">heart</span> <code class="code-preview" style="display: none;">.tb-icon-heart</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-heart"></input> </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="tb-icon tb-icon-history" style="font-size: 20px;"></i> <span class="name" style="display: inline;">history</span> <code class="code-preview" style="display: none;">.tb-icon-history</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-history"></input> </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="tb-icon tb-icon-home3" style="font-size: 20px;"></i> <span class="name" style="display: inline;">home3</span> <code class="code-preview" style="display: none;">.tb-icon-home3</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-home3"></input> </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="tb-icon tb-icon-loading" style="font-size: 20px;"></i> <span class="name" style="display: inline;">loading</span> <code class="code-preview" style="display: none;">.tb-icon-loading</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-loading"></input> </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="tb-icon tb-icon-loupe" style="font-size: 20px;"></i> <span class="name" style="display: inline;">loupe</span> <code class="code-preview" style="display: none;">.tb-icon-loupe</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-loupe"></input> </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="tb-icon tb-icon-magnifier" style="font-size: 20px;"></i> <span class="name" style="display: inline;">magnifier</span> <code class="code-preview" style="display: none;">.tb-icon-magnifier</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-magnifier"></input> </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="tb-icon tb-icon-menu" style="font-size: 20px;"></i> <span class="name" style="display: inline;">menu</span> <code class="code-preview" style="display: none;">.tb-icon-menu</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-menu"></input> </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="tb-icon tb-icon-minus-square" style="font-size: 20px;"></i> <span class="name" style="display: inline;">minus-square</span> <code class="code-preview" style="display: none;">.tb-icon-minus-square</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-minus-square"></input> </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="tb-icon tb-icon-minus" style="font-size: 20px;"></i> <span class="name" style="display: inline;">minus</span> <code class="code-preview" style="display: none;">.tb-icon-minus</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-minus"></input> </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="tb-icon tb-icon-music-note2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">music-note2</span> <code class="code-preview" style="display: none;">.tb-icon-music-note2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-music-note2"></input> </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="tb-icon tb-icon-pencil3" style="font-size: 20px;"></i> <span class="name" style="display: inline;">pencil3</span> <code class="code-preview" style="display: none;">.tb-icon-pencil3</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-pencil3"></input> </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="tb-icon tb-icon-pencil4" style="font-size: 20px;"></i> <span class="name" style="display: inline;">pencil4</span> <code class="code-preview" style="display: none;">.tb-icon-pencil4</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-pencil4"></input> </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="tb-icon tb-icon-picture2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">picture2</span> <code class="code-preview" style="display: none;">.tb-icon-picture2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-picture2"></input> </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="tb-icon tb-icon-pictures" style="font-size: 20px;"></i> <span class="name" style="display: inline;">pictures</span> <code class="code-preview" style="display: none;">.tb-icon-pictures</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-pictures"></input> </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="tb-icon tb-icon-play-circle" style="font-size: 20px;"></i> <span class="name" style="display: inline;">play-circle</span> <code class="code-preview" style="display: none;">.tb-icon-play-circle</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-play-circle"></input> </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="tb-icon tb-icon-plus-square" style="font-size: 20px;"></i> <span class="name" style="display: inline;">plus-square</span> <code class="code-preview" style="display: none;">.tb-icon-plus-square</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-plus-square"></input> </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="tb-icon tb-icon-plus" style="font-size: 20px;"></i> <span class="name" style="display: inline;">plus</span> <code class="code-preview" style="display: none;">.tb-icon-plus</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-plus"></input> </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="tb-icon tb-icon-pushpin" style="font-size: 20px;"></i> <span class="name" style="display: inline;">pushpin</span> <code class="code-preview" style="display: none;">.tb-icon-pushpin</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-pushpin"></input> </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="tb-icon tb-icon-question-circle" style="font-size: 20px;"></i> <span class="name" style="display: inline;">question-circle</span> <code class="code-preview" style="display: none;">.tb-icon-question-circle</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-question-circle"></input> </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="tb-icon tb-icon-redo2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">redo2</span> <code class="code-preview" style="display: none;">.tb-icon-redo2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-redo2"></input> </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="tb-icon tb-icon-reply" style="font-size: 20px;"></i> <span class="name" style="display: inline;">reply</span> <code class="code-preview" style="display: none;">.tb-icon-reply</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-reply"></input> </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="tb-icon tb-icon-square" style="font-size: 20px;"></i> <span class="name" style="display: inline;">square</span> <code class="code-preview" style="display: none;">.tb-icon-square</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-square"></input> </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="tb-icon tb-icon-sync" style="font-size: 20px;"></i> <span class="name" style="display: inline;">sync</span> <code class="code-preview" style="display: none;">.tb-icon-sync</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-sync"></input> </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="tb-icon tb-icon-tab" style="font-size: 20px;"></i> <span class="name" style="display: inline;">tab</span> <code class="code-preview" style="display: none;">.tb-icon-tab</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-tab"></input> </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="tb-icon tb-icon-tag" style="font-size: 20px;"></i> <span class="name" style="display: inline;">tag</span> <code class="code-preview" style="display: none;">.tb-icon-tag</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-tag"></input> </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="tb-icon tb-icon-telephone" style="font-size: 20px;"></i> <span class="name" style="display: inline;">telephone</span> <code class="code-preview" style="display: none;">.tb-icon-telephone</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-telephone"></input> </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="tb-icon tb-icon-text-align-right" style="font-size: 20px;"></i> <span class="name" style="display: inline;">text-align-right</span> <code class="code-preview" style="display: none;">.tb-icon-text-align-right</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-text-align-right"></input> </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="tb-icon tb-icon-trash" style="font-size: 20px;"></i> <span class="name" style="display: inline;">trash</span> <code class="code-preview" style="display: none;">.tb-icon-trash</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-trash"></input> </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="tb-icon tb-icon-trash2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">trash2</span> <code class="code-preview" style="display: none;">.tb-icon-trash2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-trash2"></input> </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="tb-icon tb-icon-upload2" style="font-size: 20px;"></i> <span class="name" style="display: inline;">upload2</span> <code class="code-preview" style="display: none;">.tb-icon-upload2</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-upload2"></input> </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="tb-icon tb-icon-user" style="font-size: 20px;"></i> <span class="name" style="display: inline;">user</span> <code class="code-preview" style="display: none;">.tb-icon-user</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-user"></input> </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="tb-icon tb-icon-wallet" style="font-size: 20px;"></i> <span class="name" style="display: inline;">wallet</span> <code class="code-preview" style="display: none;">.tb-icon-wallet</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-wallet"></input> </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="tb-icon tb-icon-zoom-in" style="font-size: 20px;"></i> <span class="name" style="display: inline;">zoom-in</span> <code class="code-preview" style="display: none;">.tb-icon-zoom-in</code> <input class="hide-input" style="opacity:0;width: 1px;" value=".tb-icon .tb-icon-zoom-in"></input> </a> </div> </div> </div> <script src="http://simplelineicons.com/js/jquery.min.js"></script> <script src="http://simplelineicons.com/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.show-code').click(function (e) { $('.name').show(); $('.code-preview').hide(); $(this).children('.name').toggle(); $(this).children('.code-preview').toggle(); copy($(this).children('.hide-input')); e.stopPropagation(); return false; }); function copy(element){ element.select(); document.execCommand("Copy"); } $("#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(); }); }); </script> </body></html>
[+]
..
[-] tb-icon.ttf
[edit]
[-] tb-icon.woff2
[edit]
[-] preview.html
[edit]
[-] tb-icon.eot
[edit]
[-] tb-icon.woff
[edit]
[-] tb-icon.svg
[edit]