一组 HTML/HTML5 图标附带图标搜索功能

Html/HTML5 Icons 包含笑脸、哭脸、风扇、骷髅、十字、阴阳图、咖啡、雨伞、音乐符号、太阳、电话ua、三叶草、邮件、五角星、云朵等字符图标。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3767
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//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">×<div> Hex Code &#x' + code + ';</div><div>usage examples &#x' + code + '; </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();
        }

})
});

编译

CSS

*,
*: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%;
    -ms-transform: translateX(-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: 0.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

<h1>HTML icons</h1>
<div class="search-box">
 <input placeholder="Search icon...." class="search" />&times;
</div>
<ul>
 <li>&#9993;
 envelope
 </li>
 <li>&#9733;
 star
 </li>
 <li>&#9734;
 star-o
 </li>
 <li>&#9729;
 cloud
 </li>
 <li>&#9728;
 sun
 </li>
 <li>&#9742;
 telephone
 </li>
 <li>&#9743;
 telephone-o
 </li>
 <li>&#9730;
 umbrella with rain
 </li>
 <li>&#9748;
 umbrella with rain
 </li>
 <li>&#9749;
 tea cup
 </li>
 <li>&#9752;
 shamrock
 </li>
 <li>&#9753;
 floral 
 </li>
 <li>&#9760;
 skull and crossbones
 </li>
 <li>&#9762;
 radioactive 
 </li>
 <li>&#9764;
 caduceus 
 </li>
 <li>&#9769;
 cross 
 </li>
 <li>&#9775;
 yin yang
 </li>
 <li>&#9774;
 peace 
 </li>
 <li>&#9785;
 emoticon-o sad
 </li>
 <li>&#9786;
 emoticon-0 smile
 </li>
 <li>&#9787;
 emoticon smile
 </li>
 <li>&#9832;
 fire
 </li>
 <li>&#9834;
 music note
 </li>
 <li>&#9835;
 music notes
 </li>
 <li>&#9850;
 recyc ling 
 </li>
 <li>&#9851;
 universal 
 </li>
 <li>&#9855;
 wheelchair
 </li>
 <li>&#9872;
 flag-o
 </li>
 <li>&#9873;
 flag
 </li>
 <li>&#9874;
 hammer 
 </li>
 <li>&#9875;
 anchor
 </li>
 <li>&#9878;
 scales
 </li>
 <li>&#9881;
 gear
 </li>
 <li>&#9889;
 flash
 </li>
 <li>&#9888;
 warning 
 </li>
 <li>&#9917;
 football
 </li>
 <li>&#9972;
 ferry
 </li>
 <li>&#9973;
 sailboat
 </li>
 <li>&#9981;
 fuel 
 </li>
 <li>&#9964;
 historic 
 </li>
 <li>&#9951;
 truck
 </li>
 <li>&#9986;
 scissors
 </li>
 <li>&#9990;
 phone circle
 </li>
 <li>&#9992;
 plaine
 </li>
 <li>&#9994;
 fist
 </li>
 <li>&#9995;
 hand
 </li>
 <li>&#9996;
 victory 
 </li>
 <li>&#9997;
 writing 
 </li>
 <li>&#9999;
 pencil 
 </li>
 <li>&#10067;
 question mark
 </li>
 <li>&#10068;
 question mark-o
 </li>
 <li>&#10071;
 exclamation 
 </li>
 <li>&#10069;
 exclamation-o
 </li>
 <li>&#10084;
 heart
 </li>
 <li>&#9684;
 chart
 </li>
 <li>&#8634;
 undo
 </li>
 <li>&#8635;
 redo
 </li>
 <li>&#9741;
 link
 </li>
 <li>&#9998;
 edit 
 </li>
 <li class="header">
 <h2> directional</h2>
 </li>
 <li>&#9756;
 hand-o left
 </li>
 <li>&#9758;
 hand-o right
 </li>
 <li>&#9757;
 hand-o up
 </li>
 <li>&#9759;
 hand-o down
 </li>
 <li>&#9755;
 hand right
 </li>
 <li>&#9754;
 hand left
 </li>
 <li>&#9661;
 caret-o down
 </li>
 <li>&#9651;
 caret-o up
 </li>
 <li>&#9655;
 caret-o right
 </li>
 <li>&#9665;
 caret-o left 
 </li>
 <li>&#9664;
 caret left
 </li>
 <li>&#9658;
 caret right
 </li>
 <li>&#9650;
 caret top
 </li>
 <li>&#9660;
 caret bottom 
 </li>
 <li>&#10094;
 angle left
 </li>
 <li>&#10095;
 angle right
 </li>
 <li>&#10096;
 chevron left
 </li>
 <li>&#10097;
 chevron right
 </li>
 <li>&larr;
 long arrow left
 </li>
 <li> &rarr;
 long arrow right
 </li>
 <li>&uarr;
 long arrow top
 </li>
 <li>&darr;
 long arrow bottom
 </li>
 <li>&harr;
 long arrow left right
 </li>
 <li>&#8597;
 long arrow u p bottom
 </li>
 <li>&#8598;
 long arrow left top
 </li>
 <li>&#8599;
 long arrow right to p 
 </li>
 <li>&#8600;
 long arrow right bottom
 </li>
 <li>&#8601;
 long arrow left bottom
 </li>
 <li>&#8624;
 upwards left arrow
 </li>
 <li>&#8625;
 upwards right arrow 
 </li>
 <li>&#8626;
 downwards left arrow 
 </li>
 <li>&#8627;
 downwards right arrow
 </li>
 <li>&#8628;
 rightwards bottom arrow 
 </li>
 <li>&#8644;
 left right arrow 
 </li>
 <li>&#8645;
 u p bottom arrow
 </li>
 <li>&#8651;
 left right
 </li>
 <li class="header">
 <h2> form control </h2>
 </li>
 <li>&#9744;
 box
 </li>
 <li>&#9635;
 dot box
 </li>
 <li>&#9745;
 box with check
 </li>
 <li>&#9746;
 times box
 </li>
 <li>&#9898;
 circle-o
 </li>
 <li>&#9673;
 circle dot
 </li>
 <li>&#9678;
 circle dot-o
 </li>
 <li>&#9899;
 circle
 </li>
 <li>&#9938;
 times circle-o
 </li>
 <li>&#9940;
 minus circle
 </li>
 <li>&#9866;
 minus
 </li>
 <li>&#10010;
 plus 
 </li>
 <li> &times;
 times
 </li>
 <li class="header">
 <h2> gender </h2>
 </li>
 <li>&#9791;
 mercury
 </li>
 <li>&#9792;
 female 
 </li>
 <li>&#9794;
 male
 </li>
 <li>&#9793;
 earth
 </li>
 <li>&#9890;
 doubled female 
 </li>
 <li>&#9891;
 doubled male 
 </li>
 <li>&#9893;
 male and female
 </li>
 <li class="header">
 <h2> currency</h2>
 </li>
 <li>&#8377;
 rupee
 </li>
 <li>&cent;
 cent
 </li>
 <li>&pound;
 pound 
 </li>
 <li>&yen;
 yen
 </li>
 <li>&#8352;
 euro
 </li>
 <li>&#8353;
 colon 
 </li>
 <li>&#8354;
 cruzeiro 
 </li>
 <li>&#8355;
 french franc 
 </li>
 <li>&#8356;
 lira
 </li>
 <li>&#8357;
 mill
 </li>
 <li>&#8373;
 ced i 
 </li>
 <li>&#8371;
 austral 
 </li>
 <li>$
 usd 
 </li>
</ul>

Html/HTML5 Icons 包含笑脸、哭脸、风扇、骷髅、十字、阴阳图、咖啡、雨伞、音乐符号、太阳、电话ua、三叶草、邮件、五角星、云朵等字符图标。

编辑器支持Emmet

快捷键

Html/HTML5 Icons 包含笑脸、哭脸、风扇、骷髅、十字、阴阳图、咖啡、雨伞、音乐符号、太阳、电话ua、三叶草、邮件、五角星、云朵等字符图标。

HTML5/Three.js 3D地形高度图

HTML5 WebGL 基于Three.js实现的一个可复用3D烟雾界面组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：