h1 HTML icons by Lại Văn Đức Blog
.search-box
  input.search(placeholder="Anh muốn em nào ....")
  span.emty ×
ul
  li
    i ✉
    p envelope
  li
    i ★
    p star
  li
    i ☆
    p star-o
  li
    i ☁
    p cloud
  li
    i ☀
    p sun
  li
    i ☎
    p telephone
  li
    i ☏
    p telephone-o
  li
    i ☂
    p umbrella with rain
  li
    i ☔
    p umbrella with rain
  li
    i ☕
    p tea cup
  li
    i ☘
    p shamrock
  li
    i ☙
    p floral 
  li
    i ☠
    p skull and crossbones
  li
    i ☢
    p radioactive 
  li
    i ☤
    p caduceus 
  li
    i ☩
    p cross 
  li
    i ☯
    p yin yang
  li
    i ☮
    p peace 
  li
    i ☹
    p emoticon-o sad
  li
    i ☺
    p emoticon-0 smile
  li
    i ☻
    p emoticon smile
  li
    i ♨
    p fire
  li
    i ♪
    p music note
  li
    i ♫
    p music notes
  li
    i ♺
    p recyc  ling 
  li
    i ♻
    p universal 
  li
    i ♿
    p wheelchair
  li
    i ⚐
    p flag-o
  li
    i ⚑
    p flag
  li
    i ⚒
    p hammer 
  li
    i ⚓
    p anchor
  li
    i ⚖
    p scales
  li
    i ⚙
    p gear
  li
    i ⚡
    p flash
  li
    i ⚠
    p warning 
  li
    i ⚽
    p football

  li
    i ⛴
    p ferry
  li
    i ⛵
    p sailboat
  li
    i ⛽
    p fuel 
  li
    i ⛬
    p historic  
  li
    i ⛟
    p truck
  li
    i ✂
    p scissors

  li
    i ✆
    p phone circle
  li
    i ✈
    p plaine
  li
    i ✊
    p fist
  li
    i ✋
    p hand

  li
    i ✌
    p victory 
  li
    i ✍
    p writing 

  li
    i ✏
    p pencil  
  li
    i ❓
    p question mark
  li
    i ❔
    p question mark-o

  li
    i ❗
    p exclamation 
  li
    i ❕
    p exclamation-o
  li
    i ❤
    p heart
  li
    i ◔
    p chart
  li
    i ↺
    p undo
  li
    i ↻
    p redo
  li
    i ☍
    p   link
  li
    i ✎
    p edit 
  li.header
    h2  directional

  li
    i ☜
    p hand-o left
  li
    i ☞
    p hand-o right
  li
    i ☝
    p hand-o up
  li
    i ☟
    p hand-o down
  li
    i ☛
    p hand right
  li
    i ☚
    p hand left
  li
    i ▽
    p caret-o down

  li
    i △
    p caret-o up
  li
    i ▷
    p caret-o right
  li
    i ◁
    p caret-o left 
  li
    i ◀
    p caret left
  li
    i ►
    p caret right
  li
    i ▲
    p caret top
  li
    i ▼
    p caret bottom 
  li
    i ❮
    p angle left
  li
    i ❯
    p angle right
  li
    i ❰
    p chevron left
  li
    i ❱
    p chevron right
  li
    i ←
    p long arrow left
  li
    i   →
    p long arrow right
  li
    i ↑
    p long arrow top
  li
    i ↓
    p long arrow bottom
  li
    i ↔
    p long arrow left right
  li
    i ↕
    p long arrow u    p bottom
  li
    i ↖
    p long arrow left top
  li
    i ↗
    p long arrow right to    p 
  li
    i ↘
    p long arrow right bottom
  li
    i ↙
    p long arrow left bottom
  li
    i ↰
    p upwards left arrow
  li
    i ↱
    p upwards right arrow 
  li
    i ↲
    p downwards left arrow 
  li
    i ↳
    p downwards right arrow
  li
    i ↴
    p rightwards bottom arrow 
  li
    i ⇄
    p left  right arrow 
  li
    i ⇅
    p u    p bottom arrow
  li
    i ⇋
    p left right
  li.header
    h2  form control 
  li
    i ☐
    p box
  li
    i ▣
    p dot box
  li
    i ☑
    p box with check
  li
    i ☒
    p times box
  li
    i ⚪
    p circle-o
  li
    i ◉
    p circle dot
  li
    i ◎
    p circle dot-o
  li
    i ⚫
    p circle
  li
    i ⛒
    p times circle-o
  li
    i ⛔
    p minus circle
  li
    i ⚊
    p minus
  li
    i ✚
    p plus 
  li
    i  ×
    p times

  li.header
    h2  gender 
  li
    i ☿
    p mercury
  li
    i ♀
    p female 
  li
    i ♂
    p male
  li
    i ♁
    p earth
  li
    i ⚢
    p doubled female 
  li
    i ⚣
    p doubled male 
  li
    i ⚥
    p male and female
  li.header 
    h2  currency
  li
    i ₹
    p rupee
  li
    i ¢
    p cent
  li
    i £
    p pound 
  li
    i ¥
    p yen
  li
    i ₠
    p euro
  li
    i ₡
    p colon 
  li
    i ₢
    p cruzeiro 
  li
    i ₣
    p french franc 
  li
    i ₤
    p   lira
  li
    i ₥
    p mill

  li
    i ₵
    p ced i  
  li
    i ₳
    p austral 
  li
    i $
    p usd 
View Compiled
@import "compass";
*, *:after, *:before{
  @include box-sizing(border-box);
}

body{
  background: #1F2428;
  text-align: center;
  color: #fff;
  padding: 15px;
  font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol,
 Quivira, SunExt-A, FreeSerif, Universalia, unifont;
}
ul{
  padding: 0;
  list-style: none;
  li{
    width: 12.5%;
    float: left;
    font-size: 12px;
    height: 150px;
    padding: 10px;
    min-width: 150px;
    position: relative;
    &.header{
      width: 100%;
      &.hide{
        display: none !important;
      }
      h2{
        display: inline-block;
        width: 100%;
        text-align: left;
        color:#ccc;
        padding-left: 5px;
        padding-bottom: 5px;
        font-weight: 200;
        border-bottom: 1px solid #333;
      }
    }
    &.active{
      color: #00984A;
    }
    i{
      font-size: 50px;
      font-style:normal;
    }
    > p {
      text-transform: capitalize;
    }
  }
}
.popover{
  position: absolute;
  width: 250px;
  background: #fff;
  padding: 15px;
  color: #555;
  left: 50%;
  @include translateX(-50%);
  @include box-shadow(2px 2px 10px #222);
  @include border-radius(4px);
  text-align: left;
  z-index: 5;
  &:after{
    content: '';
    position: absolute;
    border:10px solid transparent;
    border-bottom-color: #fff;
    bottom: 100%;
    left: 120px;
  }
  div{
    margin-top: 5px;
  }
  .close{
    right: 5px;
    top:0 ;
    position: absolute;
    font-size: 22px;
    opacity: 0.7;
    z-index: 2;
    cursor: pointer;
    &:hover{opacity: .9;}
  }
  p{
    text-align: center;
    color:#FFA500;
    font-size: 22px;
    padding: 0;
    span{
      color:#59BC89;
    }
    &.exm{
      font-size: 16px;
      color: #C32361;
      span{color:inherit}
    }
  }
}
.search-box{
  max-width:640px;
  position: relative;
  margin: auto;  
  .emty{
    font-size: 32px;
    position: absolute;
    right: 20px;
    top: 7px;
    z-index: 3;
    display: none;
    cursor: pointer;
  }
}

.search{
  height: 50px;
  width: 100%;
  padding: 5px 15px;
  @include border-radius(50px);
  @include transition(.3s);
  border:2px solid #ddd;
  background: none;
  color:#fff;
  font-size: 18px;
  &:focus{
    outline: none;
    @include box-shadow(0 0 0 3px #ddd);
  }
}
//Decimal To Hex
function decimalToHex(number){
  if (number < 0){
    number = 0xFFFFFFFF + number + 1;
  }
  return number.toString(16).toUpperCase();
}
// Pop Over
$('i').click(function(){  
  var dem =  $(this).text().charCodeAt(0);
  var code = decimalToHex(dem);
  var popover = '<div class="popover"><span class="close">&times;</span><div> Hex Code <p>&#x<span>'+ code +'</span>;</p></div><div>usage examples <p class="exm">  &lt;p&gt; &#x<span>'+code+'</span>;  &lt;/p&gt;</p></div></div>'
  
  $('.popover').remove();
   $('li').removeClass('active');
  $(this).parent().addClass('active').append(popover);;
});

// Close
$(document).on('click', '.close' ,function(){
  $('.popover').fadeOut();
   $('li').removeClass('active');
});

//Out Click
$(document).on('click', function(event) {
  if (!$(event.target).closest('.popover, i').length) {
  $('.popover').fadeOut();
   $('li').removeClass('active');
  }
});
// Emtt search box

$('.emty').click(function(){
  $('.search').val('');
  $(this).fadeOut().removeClass('hide');
  $('li').show();
});

//search
$('.search').keyup(function(){
 var val = $(this).val().toLowerCase();
  if(0< val.length){
    $('.header').addClass('hide');
    $('.emty').fadeIn();
  }
  else{
     $('.header').removeClass('hide');
    $('.emty').fadeOut();
  }
  
   $('li').each(function()
   {
     var text = $(this).text();
     if(text.indexOf(val)==-1)
       {
         $(this).hide();
       }
     else
       {
           $(this).show();
       }
       
   })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js