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 usdTiế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é.