Tự Code bảng chọn HTML Icons

0

Icons là một trong những thành phần không thể thiếu cho một website. Bất cứ bạn thiết kế website cho lĩnh vực nào thì Icons luôn luôn là điều bạn cần quan tâm. Bản thân tôi thường sử dụng Icon với định dạng PNG hoặc Font Awesome để làm biểu tượng cho các dự án thiết kế web của mình.

Tự Code bảng chọn HTML Icons Tự Code bảng chọn HTML Icons - Tự Code bảng chọn HTML Icons

Nhưng hôm nay, chúng ta sẽ gạt qua những cách thức sử dụng icons cũ. Chúng ta sẽ sử dụng HTML icons xem nó thể hiện như thế nào trên website của bạn nhé. Và nhân đây chúng ta cũng sẽ Code một bảng chọn Icons, một thanh tìm kiếm được tích hợp vào và khi bạn bấm vào icon cần sử dụng thì các đoạn code sẽ hiển thị ra cho bạn copy và paste vào đâu đó tùy bạn.

Chúng ta hãy bắt đầu ngay bây giờ bằng cách sử dụng đoạn Code HTML dưới đây > Nhưng trước hết bạn đừng quên gọi thư viện jquery ra nhé:

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
h1 HTML icons
.search-box
  input.search(placeholder="Search icon....")
  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

Tiếp đến chúng ta sẽ sử dụng CSS như sau:

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

Chưa xong đâu nhé, chúng ta cần một đoạn JavaScript nữa:

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

Có vẻ như xong rồi đấy. Mời bạn cùng tôi Demo và hãy áp dụng vào các dự án thiết kế của bạn nếu bạn thấy thích nhé.

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.