Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              h1 HTML icons by Lại Văn Đức Blog
.search-box
  input.search(placeholder="Anh muốn em nào ....")
  span.emty &times;
ul
  li
    i &#9993;
    p envelope
  li
    i &#9733;
    p star
  li
    i &#9734;
    p star-o
  li
    i &#9729;
    p cloud
  li
    i &#9728;
    p sun
  li
    i &#9742;
    p telephone
  li
    i &#9743;
    p telephone-o
  li
    i &#9730;
    p umbrella with rain
  li
    i &#9748;
    p umbrella with rain
  li
    i &#9749;
    p tea cup
  li
    i &#9752;
    p shamrock
  li
    i &#9753;
    p floral 
  li
    i &#9760;
    p skull and crossbones
  li
    i &#9762;
    p radioactive 
  li
    i &#9764;
    p caduceus 
  li
    i &#9769;
    p cross 
  li
    i &#9775;
    p yin yang
  li
    i &#9774;
    p peace 
  li
    i &#9785;
    p emoticon-o sad
  li
    i &#9786;
    p emoticon-0 smile
  li
    i &#9787;
    p emoticon smile
  li
    i &#9832;
    p fire
  li
    i &#9834;
    p music note
  li
    i &#9835;
    p music notes
  li
    i &#9850;
    p recyc  ling 
  li
    i &#9851;
    p universal 
  li
    i &#9855;
    p wheelchair
  li
    i &#9872;
    p flag-o
  li
    i &#9873;
    p flag
  li
    i &#9874;
    p hammer 
  li
    i &#9875;
    p anchor
  li
    i &#9878;
    p scales
  li
    i &#9881;
    p gear
  li
    i &#9889;
    p flash
  li
    i &#9888;
    p warning 
  li
    i &#9917;
    p football

  li
    i &#9972;
    p ferry
  li
    i &#9973;
    p sailboat
  li
    i &#9981;
    p fuel 
  li
    i &#9964;
    p historic  
  li
    i &#9951;
    p truck
  li
    i &#9986;
    p scissors

  li
    i &#9990;
    p phone circle
  li
    i &#9992;
    p plaine
  li
    i &#9994;
    p fist
  li
    i &#9995;
    p hand

  li
    i &#9996;
    p victory 
  li
    i &#9997;
    p writing 

  li
    i &#9999;
    p pencil  
  li
    i &#10067;
    p question mark
  li
    i &#10068;
    p question mark-o

  li
    i &#10071;
    p exclamation 
  li
    i &#10069;
    p exclamation-o
  li
    i &#10084;
    p heart
  li
    i &#9684;
    p chart
  li
    i &#8634;
    p undo
  li
    i &#8635;
    p redo
  li
    i &#9741;
    p   link
  li
    i &#9998;
    p edit 
  li.header
    h2  directional

  li
    i &#9756;
    p hand-o left
  li
    i &#9758;
    p hand-o right
  li
    i &#9757;
    p hand-o up
  li
    i &#9759;
    p hand-o down
  li
    i &#9755;
    p hand right
  li
    i &#9754;
    p hand left
  li
    i &#9661;
    p caret-o down

  li
    i &#9651;
    p caret-o up
  li
    i &#9655;
    p caret-o right
  li
    i &#9665;
    p caret-o left 
  li
    i &#9664;
    p caret left
  li
    i &#9658;
    p caret right
  li
    i &#9650;
    p caret top
  li
    i &#9660;
    p caret bottom 
  li
    i &#10094;
    p angle left
  li
    i &#10095;
    p angle right
  li
    i &#10096;
    p chevron left
  li
    i &#10097;
    p chevron right
  li
    i &larr;
    p long arrow left
  li
    i   &rarr;
    p long arrow right
  li
    i &uarr;
    p long arrow top
  li
    i &darr;
    p long arrow bottom
  li
    i &harr;
    p long arrow left right
  li
    i &#8597;
    p long arrow u    p bottom
  li
    i &#8598;
    p long arrow left top
  li
    i &#8599;
    p long arrow right to    p 
  li
    i &#8600;
    p long arrow right bottom
  li
    i &#8601;
    p long arrow left bottom
  li
    i &#8624;
    p upwards left arrow
  li
    i &#8625;
    p upwards right arrow 
  li
    i &#8626;
    p downwards left arrow 
  li
    i &#8627;
    p downwards right arrow
  li
    i &#8628;
    p rightwards bottom arrow 
  li
    i &#8644;
    p left  right arrow 
  li
    i &#8645;
    p u    p bottom arrow
  li
    i &#8651;
    p left right
  li.header
    h2  form control 
  li
    i &#9744;
    p box
  li
    i &#9635;
    p dot box
  li
    i &#9745;
    p box with check
  li
    i &#9746;
    p times box
  li
    i &#9898;
    p circle-o
  li
    i &#9673;
    p circle dot
  li
    i &#9678;
    p circle dot-o
  li
    i &#9899;
    p circle
  li
    i &#9938;
    p times circle-o
  li
    i &#9940;
    p minus circle
  li
    i &#9866;
    p minus
  li
    i &#10010;
    p plus 
  li
    i  &times;
    p times

  li.header
    h2  gender 
  li
    i &#9791;
    p mercury
  li
    i &#9792;
    p female 
  li
    i &#9794;
    p male
  li
    i &#9793;
    p earth
  li
    i &#9890;
    p doubled female 
  li
    i &#9891;
    p doubled male 
  li
    i &#9893;
    p male and female
  li.header 
    h2  currency
  li
    i &#8377;
    p rupee
  li
    i &cent;
    p cent
  li
    i &pound;
    p pound 
  li
    i &yen;
    p yen
  li
    i &#8352;
    p euro
  li
    i &#8353;
    p colon 
  li
    i &#8354;
    p cruzeiro 
  li
    i &#8355;
    p french franc 
  li
    i &#8356;
    p   lira
  li
    i &#8357;
    p mill

  li
    i &#8373;
    p ced i  
  li
    i &#8371;
    p austral 
  li
    i $
    p usd 
            
          
!

CSS

            
              @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);
  }
}
            
          
!

JS

            
              //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();
       }
       
   })
});
            
          
!
999px

Console