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 @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">×</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();
}
})
});
External CSS
This Pen doesn't use any external CSS resources.