Entypo classes

HTML

<div class="entypo-items">
		<div title="icon-phone" class="icon-phone"></div>
		<div title="icon-mobile" class="icon-mobile"></div>
		<div title="icon-mouse" class="icon-mouse"></div>
		<div title="icon-address" class="icon-address"></div>
		<div title="icon-mail" class="icon-mail"></div>
		<div title="icon-paper-plane" class="icon-paper-plane"></div>
		<div title="icon-pencil" class="icon-pencil"></div>
		<div title="icon-feather" class="icon-feather"></div>
		<div title="icon-attach" class="icon-attach"></div>
		<div title="icon-inbox" class="icon-inbox"></div>
		<div title="icon-reply" class="icon-reply"></div>
		<div title="icon-reply-all" class="icon-reply-all"></div>
		<div title="icon-forward" class="icon-forward"></div>
		<div title="icon-user" class="icon-user"></div>
		<div title="icon-users" class="icon-users"></div>
		<div title="icon-add-user" class="icon-add-user"></div>
		<div title="icon-vcard" class="icon-vcard"></div>
		<div title="icon-export" class="icon-export"></div>
		<div title="icon-location" class="icon-location"></div>
		<div title="icon-map" class="icon-map"></div>
		<div title="icon-compass" class="icon-compass"></div>
		<div title="icon-direction" class="icon-direction"></div>
		<div title="icon-hair-cross" class="icon-hair-cross"></div>
		<div title="icon-share" class="icon-share"></div>
		<div title="icon-shareable" class="icon-shareable"></div>
		<div title="icon-heart" class="icon-heart"></div>
		<div title="icon-heart-empty" class="icon-heart-empty"></div>
		<div title="icon-star" class="icon-star"></div>
		<div title="icon-star-empty" class="icon-star-empty"></div>
		<div title="icon-thumbs-up" class="icon-thumbs-up"></div>
		<div title="icon-thumbs-down" class="icon-thumbs-down"></div>
		<div title="icon-chat" class="icon-chat"></div>
		<div title="icon-comment" class="icon-comment"></div>
		<div title="icon-quote" class="icon-quote"></div>
		<div title="icon-home" class="icon-home"></div>
		<div title="icon-popup"...

CSS

/*//////////////////////////////////////////////////////////////////////
//SOF entypo*/
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body {
    font-size: 10px;
    font-family: sans-serif;
}
[class*="icon"] {
  font-family: 'entypo';
}

.entypo-items, .entypo-items:before {
  /*font-family: 'entypo';*/
}
.entypo-items > div {
    display:inline-block;
    font-size: 4em;
    color: #999999;
}

.entypo-items > div:hover {
    color:black;
}
/*/ EOF entypo
//////////////////////////////////////////////////////////////////////*/
.icon-phone:after { content:"\1F4DE"; }
.icon-mobile:after { content:"\1F4F1"; }
.icon-mouse:after { content:"\E789"; }
.icon-address:after { content:"\E723"; }
.icon-mail:after { content:"\2709"; }
.icon-paper-plane:after { content:"\1F53F"; }
.icon-pencil:after { content:"\270E"; }
.icon-feather:after { content:"\2712"; }
.icon-attach:after { content:"\1F4CE"; }
.icon-inbox:after { content:"\E777"; }
.icon-reply:after { content:"\E712"; }
.icon-reply-all:after { content:"\E713"; }
.icon-forward:after { content:"\27A6"; }
.icon-user:after { content:"\1F464"; }
.icon-users:after { content:"\1F465"; }
.icon-add-user:after { content:"\E700"; }
.icon-vcard:after { content:"\E722"; }
.icon-export:after { content:"\E715"; }
.icon-location:after { content:"\E724"; }
.icon-map:after { content:"\E727"; }
.icon-compass:after { content:"\E728"; }
.icon-direction:after { content:"\27A2"; }
.icon-hair-cross:after { content:"\1F3AF"; }
.icon-share:after { content:"\E73C"; }
.icon-shareable:after { content:"\E73E"; }
.icon-heart:after { content:"\2665"; }
.icon-heart-empty:after { content:"\2661"; }
.icon-star:after { content:"\2605"; }
.icon-star-empty:after { content:"\2606"; }
.icon-thumbs-up:after { content:"\1F44D"; }
.icon-thumbs-down:after { content:"\1F44E"; }
.icon-chat:after { content:"\E720"; }
.icon-comment:after { content:"\E718"; }
.icon-quote:after { content:"\275E"; }
.icon-home:after { content:"\2302";...

JavaScript

$('#css').hide();
$(".entypo-items > div").on("click", function(){
    var cn = $(this).attr('class');
    $(".className").val(cn);
    $(".className").focus();
    $(".className").select();
});
/*
$('#show_css').on('click', function(){
    alert('foo');
    if ($('#css_wrap').is(':hidden')) {
        $('#css').show('blind', function(){
            $('#css').focus();
            $('#css').select();
        });
        $('#show_css').html('Hide The CSS');
    } else {
        $('#css_wrap').hide('blind');
        $('#show_css').html('Grab The CSS');
    }
})
*/