Html Icons
How do I make an html icons?
HTML UTF-8 Symbols with Decimal code. What is a html icons? How do you make a html icons? This script and codes were developed by Vineeth.TR on 04 July 2022, Monday.
Html Icons Previews
Html Icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Html Icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>HTML icons</h1>
<div class="search-box"> <input class="search" placeholder="Search icon...."/><span class="emty">×</span>
</div>
<ul> <li><i>✉</i> <p>envelope</p> </li> <li><i>★</i> <p>star</p> </li> <li><i>☆</i> <p>star-o</p> </li> <li><i>☁</i> <p>cloud</p> </li> <li><i>☀</i> <p>sun</p> </li> <li><i>☎</i> <p>telephone</p> </li> <li><i>☏</i> <p>telephone-o</p> </li> <li><i>☂</i> <p>umbrella with rain</p> </li> <li><i>☔</i> <p>umbrella with rain</p> </li> <li><i>☕</i> <p>tea cup</p> </li> <li><i>☘</i> <p>shamrock</p> </li> <li><i>☙</i> <p>floral </p> </li> <li><i>☠</i> <p>skull and crossbones</p> </li> <li><i>☢</i> <p>radioactive </p> </li> <li><i>☤</i> <p>caduceus </p> </li> <li><i>☩</i> <p>cross </p> </li> <li><i>☯</i> <p>yin yang</p> </li> <li><i>☮</i> <p>peace </p> </li> <li><i>☹</i> <p>emoticon-o sad</p> </li> <li><i>☺</i> <p>emoticon-0 smile</p> </li> <li><i>☻</i> <p>emoticon smile</p> </li> <li><i>♨</i> <p>fire</p> </li> <li><i>♪</i> <p>music note</p> </li> <li><i>♫</i> <p>music notes</p> </li> <li><i>♺</i> <p>recyc ling </p> </li> <li><i>♻</i> <p>universal </p> </li> <li><i>♿</i> <p>wheelchair</p> </li> <li><i>⚐</i> <p>flag-o</p> </li> <li><i>⚑</i> <p>flag</p> </li> <li><i>⚒</i> <p>hammer </p> </li> <li><i>⚓</i> <p>anchor</p> </li> <li><i>⚖</i> <p>scales</p> </li> <li><i>⚙</i> <p>gear</p> </li> <li><i>⚡</i> <p>flash</p> </li> <li><i>⚠</i> <p>warning </p> </li> <li><i>⚽</i> <p>football</p> </li> <li><i>⛴</i> <p>ferry</p> </li> <li><i>⛵</i> <p>sailboat</p> </li> <li><i>⛽</i> <p>fuel </p> </li> <li><i>⛬</i> <p>historic </p> </li> <li><i>⛟</i> <p>truck</p> </li> <li><i>✂</i> <p>scissors</p> </li> <li><i>✆</i> <p>phone circle</p> </li> <li><i>✈</i> <p>plaine</p> </li> <li><i>✊</i> <p>fist</p> </li> <li><i>✋</i> <p>hand</p> </li> <li><i>✌</i> <p>victory </p> </li> <li><i>✍</i> <p>writing </p> </li> <li><i>✏</i> <p>pencil </p> </li> <li><i>❓</i> <p>question mark</p> </li> <li><i>❔</i> <p>question mark-o</p> </li> <li><i>❗</i> <p>exclamation </p> </li> <li><i>❕</i> <p>exclamation-o</p> </li> <li><i>❤</i> <p>heart</p> </li> <li><i>◔</i> <p>chart</p> </li> <li><i>↺</i> <p>undo</p> </li> <li><i>↻</i> <p>redo</p> </li> <li><i>☍</i> <p> link</p> </li> <li><i>✎</i> <p>edit </p> </li> <li class="header"> <h2> directional</h2> </li> <li><i>☜</i> <p>hand-o left</p> </li> <li><i>☞</i> <p>hand-o right</p> </li> <li><i>☝</i> <p>hand-o up</p> </li> <li><i>☟</i> <p>hand-o down</p> </li> <li><i>☛</i> <p>hand right</p> </li> <li><i>☚</i> <p>hand left</p> </li> <li><i>▽</i> <p>caret-o down</p> </li> <li><i>△</i> <p>caret-o up</p> </li> <li><i>▷</i> <p>caret-o right</p> </li> <li><i>◁</i> <p>caret-o left </p> </li> <li><i>◀</i> <p>caret left</p> </li> <li><i>►</i> <p>caret right</p> </li> <li><i>▲</i> <p>caret top</p> </li> <li><i>▼</i> <p>caret bottom </p> </li> <li><i>❮</i> <p>angle left</p> </li> <li><i>❯</i> <p>angle right</p> </li> <li><i>❰</i> <p>chevron left</p> </li> <li><i>❱</i> <p>chevron right</p> </li> <li><i>←</i> <p>long arrow left</p> </li> <li><i> →</i> <p>long arrow right</p> </li> <li><i>↑</i> <p>long arrow top</p> </li> <li><i>↓</i> <p>long arrow bottom</p> </li> <li><i>↔</i> <p>long arrow left right</p> </li> <li><i>↕</i> <p>long arrow u p bottom</p> </li> <li><i>↖</i> <p>long arrow left top</p> </li> <li><i>↗</i> <p>long arrow right to p </p> </li> <li><i>↘</i> <p>long arrow right bottom</p> </li> <li><i>↙</i> <p>long arrow left bottom</p> </li> <li><i>↰</i> <p>upwards left arrow</p> </li> <li><i>↱</i> <p>upwards right arrow </p> </li> <li><i>↲</i> <p>downwards left arrow </p> </li> <li><i>↳</i> <p>downwards right arrow</p> </li> <li><i>↴</i> <p>rightwards bottom arrow </p> </li> <li><i>⇄</i> <p>left right arrow </p> </li> <li><i>⇅</i> <p>u p bottom arrow</p> </li> <li><i>⇋</i> <p>left right</p> </li> <li class="header"> <h2> form control </h2> </li> <li><i>☐</i> <p>box</p> </li> <li><i>▣</i> <p>dot box</p> </li> <li><i>☑</i> <p>box with check</p> </li> <li><i>☒</i> <p>times box</p> </li> <li><i>⚪</i> <p>circle-o</p> </li> <li><i>◉</i> <p>circle dot</p> </li> <li><i>◎</i> <p>circle dot-o</p> </li> <li><i>⚫</i> <p>circle</p> </li> <li><i>⛒</i> <p>times circle-o</p> </li> <li><i>⛔</i> <p>minus circle</p> </li> <li><i>⚊</i> <p>minus</p> </li> <li><i>✚</i> <p>plus </p> </li> <li><i> ×</i> <p>times</p> </li> <li class="header"> <h2> gender </h2> </li> <li><i>☿</i> <p>mercury</p> </li> <li><i>♀</i> <p>female </p> </li> <li><i>♂</i> <p>male</p> </li> <li><i>♁</i> <p>earth</p> </li> <li><i>⚢</i> <p>doubled female </p> </li> <li><i>⚣</i> <p>doubled male </p> </li> <li><i>⚥</i> <p>male and female</p> </li> <li class="header"> <h2> currency</h2> </li> <li><i>₹</i> <p>rupee</p> </li> <li><i>¢</i> <p>cent</p> </li> <li><i>£</i> <p>pound </p> </li> <li><i>¥</i> <p>yen</p> </li> <li><i>₠</i> <p>euro</p> </li> <li><i>₡</i> <p>colon </p> </li> <li><i>₢</i> <p>cruzeiro </p> </li> <li><i>₣</i> <p>french franc </p> </li> <li><i>₤</i> <p> lira</p> </li> <li><i>₥</i> <p>mill</p> </li> <li><i>₵</i> <p>ced i </p> </li> <li><i>₳</i> <p>austral </p> </li> <li><i>$</i> <p>usd </p> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Html Icons - Script Codes CSS Codes
*, *:after, *:before { 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;
}
ul li { width: 12.5%; float: left; font-size: 12px; height: 150px; padding: 10px; min-width: 150px; position: relative;
}
ul li.header { width: 100%;
}
ul li.header.hide { display: none !important;
}
ul li.header 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;
}
ul li.active { color: #00984A;
}
ul li i { font-size: 50px; font-style: normal;
}
ul li > p { text-transform: capitalize;
}
.popover { position: absolute; width: 250px; background: #fff; padding: 15px; color: #555; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 2px 2px 10px #222; border-radius: 4px; text-align: left; z-index: 5;
}
.popover:after { content: ''; position: absolute; border: 10px solid transparent; border-bottom-color: #fff; bottom: 100%; left: 120px;
}
.popover div { margin-top: 5px;
}
.popover .close { right: 5px; top: 0; position: absolute; font-size: 22px; opacity: 0.7; z-index: 2; cursor: pointer;
}
.popover .close:hover { opacity: .9;
}
.popover p { text-align: center; color: #FFA500; font-size: 22px; padding: 0;
}
.popover p span { color: #59BC89;
}
.popover p.exm { font-size: 16px; color: #C32361;
}
.popover p.exm span { color: inherit;
}
.search-box { max-width: 640px; position: relative; margin: auto;
}
.search-box .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; border-radius: 50px; -webkit-transition: 0.3s; transition: 0.3s; border: 2px solid #ddd; background: none; color: #fff; font-size: 18px;
}
.search:focus { outline: none; box-shadow: 0 0 0 3px #ddd;
}Html Icons - Script Codes JS Codes
//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(); } })
});
| Developer | Vineeth.TR |
| Username | vineethtr |
| Uploaded | July 04, 2022 |
| Rating | 4.5 |
| Size | 6,575 Kb |
| Views | 76,912 |
Do you need developer help for Html Icons?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Vineeth.TR (vineethtr) Script Codes
| Name | Size |
| CatWalk Loading | 17,923 Kb |
| Material Action buttons | 5,525 Kb |
| Material Login | 5,848 Kb |
| Menu Model | 5,314 Kb |
| 404 Crying Baby | 4,619 Kb |
| One line Signup | 5,277 Kb |
| 404 | 2,881 Kb |
| Download Button | 2,810 Kb |
| Simple Spinner | 4,706 Kb |
| Inbox Compose | 2,898 Kb |
Create amazing captions with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| Basic template | Tomcat | 1,675 Kb |
| Free css icon set v2 - one div | Ben_jammin | 0 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| CSS Variables | Jdsteinbach | 4,759 Kb |
| CSS Grid Test | Ajaykarwal | 2,377 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Slide In Panel | Vikvarg | 2,811 Kb |
| Monochrome Form | AlienPiglet | 3,096 Kb |
| Twinner Spinner II | Katydecorah | 2,974 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!