Tự Code bảng chọn HTML Icons
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.
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">×</span><div> Hex Code <p>&#x<span>'+ code +'</span>;</p></div><div>usage examples <p class="exm"> <p> &#x<span>'+code+'</span>; </p></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é.