藤藤每日一练——163 Entypo Icon UI

站上放了好几个ICON UI，这些ICON UI其实没有特别之处，从效果上看，但他们具有一个共同点，都是使用@font-face来实现这些ICON的效果，而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子，藤藤给大家整理了一份163个Entypo ICON效果，希望大家喜欢，并能在项目中使用上。

demodownload

HTML CODE

<a href="#" class="icon icon-phone">
  <span>
   <em>icon-phone</em>
  </span>
</a>

这里仅显示了一个Icon的结构，其他的ICON结构使用相同，特别注意，此处结构添加了一个tip效果，方便大家查询对应的ICON类名，实际使用时，可以将tip中的代码去除。

CSS Code

body {
 background-color: #f7f7f7;
}	
.demo {
 width: 900px;
 text-align: left;
 margin: 40px auto 0;
}
.control_buttons li {
 display: inline-block;
 margin-right: 6px;
}
.icon {
 position: relative;
 display: inline-block;
 color: #6b864b;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-bottom: 20px;
 border-radius: 3px;
 background-color: #fff;
}
.icon:hover {
 color: #7d9a5b;
 box-shadow: 0 0 2px 1px #7d9a5b;
 text-decoration:none;
}
.icon:hover span {
 max-height: 50px;
}
.icon span {
 position: absolute;
 left: -42px;
 top: 50px;
 padding: 0 10px;
 display: block;
 overflow: hidden;
 max-height: 0;
 text-align: center;
 -webkit-transition: max-height .3s linear;
 -moz-transition: max-height .3s linear;
 -o-transition: max-height .3s linear;
 transition: max-height .3s linear;
 z-index: 2;
}
.icon span em {
 position: relative;
 display: inline-block;
 width: 110px;
 height: 30px;
 line-height: 30px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 border-radius: 2px 2px 0 0;
 box-shadow: 0 0 2px #7d9a5b;
 background-color:#7d9a5b;
 z-index: 3;
}
.icon span em:after {
 position: absolute;
 left: 50%;
 top: -10px;
 content: '';
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #7d9a5b;
 margin-left: -6px;
}
.icon:before {
 font-family: 'entypo';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 22px;
}
.icon-phone:before {
 content: "\21";
}
.icon-share:before {
 content: "\22";
}
.icon-leaf:before {
 content: "\23";
}
.icon-minus:before {
 content: "\24";
}
.icon-landscape:before {
 content: "\25";
}
.icon-full-screen:before {
 content: "\26";
}
.icon-arrow:before {
 content: "\27";
}
.icon-browser:before {
 content: "\28";
}
.icon-cd:before {
 content: "\29";
}
.icon-suitcase:before {
 content: "\2a";
}
.icon-publish:before {
 content: "\2b";
}
.icon-arrow-2:before {
 content: "\2c";
}
.icon-collapse:before {
 content: "\2d";
}
.icon-images:before {
 content: "\2e";
}
.icon-plus:before {
 content: "\2f";
}
.icon-music:before {
 content: "\30";
}
.icon-heart:before {
 content: "\31";
}
.icon-mobile:before {
 content: "\32";
}
.icon-mouse:before {
 content: "\33";
}
.icon-address:before {
 content: "\34";
}
.icon-email:before {
 content: "\35";
}
.icon-star:before {
 content: "\36";
}
.icon-star-2:before {
 content: "\37";
}
.icon-heart-2:before {
 content: "\38";
}
.icon-shopping:before {
 content: "\39";
}
.icon-flight:before {
 content: "\3a";
}
.icon-support:before {
 content: "\3b";
}
.icon-info-circle:before {
 content: "\3c";
}
.icon-info:before {
 content: "\3d";
}
.icon-blocked:before {
 content: "\3e";
}
.icon-movie:before {
 content: "\3f";
}
.icon-song:before {
 content: "\40";
}
.icon-folder:before {
 content: "\41";
}
.icon-mute:before {
 content: "\42";
}
.icon-sound:before {
 content: "\43";
}
.icon-volume:before {
 content: "\44";
}
.icon-arrow-3:before {
 content: "\45";
}
.icon-arrow-4:before {
 content: "\46";
}
.icon-arrow-5:before {
 content: "\47";
}
.icon-broadcast:before {
 content: "\48";
}
.icon-arrow-6:before {
 content: "\49";
}
.icon-screen:before {
 content: "\4a";
}
.icon-suitcase-2:before {
 content: "\4b";
}
.icon-globe:before {
 content: "\4c";
}
.icon-square:before {
 content: "\4d";
}
.icon-triangle:before {
 content: "\4e";
}
.icon-triangle-2:before {
 content: "\4f";
}
.icon-triangle-3:before {
 content: "\50";
}
.icon-inbox:before {
 content: "\51";
}
.icon-network:before {
 content: "\52";
}
.icon-triangle-4:before {
 content: "\53";
}
.icon-arrow-7:before {
 content: "\54";
}
.icon-arrow-8:before {
 content: "\55";
}
.icon-arrow-9:before {
 content: "\56";
}
.icon-arrow-10:before {
 content: "\57";
}
.icon-archive:before {
 content: "\58";
}
.icon-trashcan:before {
 content: "\59";
}
.icon-upload:before {
 content: "\5a";
}
.icon-download:before {
 content: "\5b";
}
.icon-reload-CW:before {
 content: "\5c";
}
.icon-warning:before {
 content: "\5d";
}
.icon-help:before {
 content: "\5e";
}
.icon-help-2:before {
 content: "\5f";
}
.icon-google-circles:before {
 content: "\60";
}
.icon-eye:before {
 content: "\61";
}
.icon-clock:before {
 content: "\62";
}
.icon-microphone:before {
 content: "\63";
}
.icon-quote:before {
 content: "\64";
}
.icon-chat:before {
 content: "\65";
}
.icon-comment:before {
 content: "\66";
}
.icon-thumbs-up:before {
 content: "\67";
}
.icon-write:before {
 content: "\68";
}
.icon-attachment:before {
 content: "\69";
}
.icon-reply:before {
 content: "\6a";
}
.icon-reply-to-all:before {
 content: "\6b";
}
.icon-forward:before {
 content: "\6c";
}
.icon-user:before {
 content: "\6d";
}
.icon-users:before {
 content: "\6e";
}
.icon-contact:before {
 content: "\6f";
}
.icon-card:before {
 content: "\70";
}
.icon-export:before {
 content: "\71";
}
.icon-location:before {
 content: "\72";
}
.icon-compass:before {
 content: "\73";
}
.icon-direction:before {
 content: "\74";
}
.icon-center:before {
 content: "\75";
}
.icon-map:before {
 content: "\76";
}
.icon-printer:before {
 content: "\77";
}
.icon-calendar:before {
 content: "\78";
}
.icon-reload-CCW:before {
 content: "\79";
}
.icon-install:before {
 content: "\7a";
}
.icon-arrow-11:before {
 content: "\7b";
}
.icon-code:before {
 content: "\7c";
}
.icon-feather:before {
 content: "\7d";
}
.icon-keyboard:before {
 content: "\7e";
}
.icon-battery:before {
 content: "\e000";
}
.icon-arrow-12:before {
 content: "\e001";
}
.icon-cloud:before {
 content: "\e002";
}
.icon-shuffle:before {
 content: "\e003";
}
.icon-flash:before {
 content: "\e004";
}
.icon-alert:before {
 content: "\e005";
}
.icon-link:before {
 content: "\e006";
}
.icon-time:before {
 content: "\e007";
}
.icon-back:before {
 content: "\e008";
}
.icon-upload-2:before {
 content: "\e009";
}
.icon-arrow-13:before {
 content: "\e00a";
}
.icon-battery-2:before {
 content: "\e00b";
}
.icon-home:before {
 content: "\e00c";
}
.icon-bookmark:before {
 content: "\e00d";
}
.icon-battery-3:before {
 content: "\e00e";
}
.icon-arrow-14:before {
 content: "\e00f";
}
.icon-play:before {
 content: "\e010";
}
.icon-arrow-15:before {
 content: "\e011";
}
.icon-rss:before {
 content: "\e012";
}
.icon-flag:before {
 content: "\e013";
}
.icon-settings:before {
 content: "\e014";
}
.icon-locked:before {
 content: "\e015";
}
.icon-retweet:before {
 content: "\e016";
}
.icon-pause:before {
 content: "\e017";
}
.icon-arrow-16:before {
 content: "\e018";
}
.icon-battery-4:before {
 content: "\e019";
}
.icon-book:before {
 content: "\e01a";
}
.icon-popup:before {
 content: "\e01b";
}
.icon-battery-5:before {
 content: "\e01c";
}
.icon-arrow-17:before {
 content: "\e01d";
}
.icon-record:before {
 content: "\e01e";
}
.icon-list:before {
 content: "\e01f";
}
.icon-unlocked:before {
 content: "\e020";
}
.icon-search:before {
 content: "\e021";
}
.icon-trophy:before {
 content: "\e022";
}
.icon-checkmark:before {
 content: "\e023";
}
.icon-stop:before {
 content: "\e024";
}
.icon-add:before {
 content: "\e025";
}
.icon-arrow-18:before {
 content: "\e026";
}
.icon-history:before {
 content: "\e027";
}
.icon-search-2:before {
 content: "\e028";
}
.icon-dots-three:before {
 content: "\e029";
}
.icon-back-2:before {
 content: "\e02a";
}
.icon-arrow-19:before {
 content: "\e02b";
}
.icon-fast-forward:before {
 content: "\e02c";
}
.icon-grid:before {
 content: "\e02d";
}
.icon-cancel:before {
 content: "\e02e";
}
.icon-price:before {
 content: "\e02f";
}
.icon-camera:before {
 content: "\e030";
}
.icon-sleep:before {
 content: "\e031";
}
.icon-close:before {
 content: "\e032";
}
.icon-palette:before {
 content: "\e033";
}
.icon-plus-2:before {
 content: "\e034";
}
.icon-minus-2:before {
 content: "\e035";
}
.icon-document:before {
 content: "\e036";
}
.icon-document-2:before {
 content: "\e037";
}
.icon-documents:before {
 content: "\e038";
}
.icon-last:before {
 content: "\e039";
}
.icon-first:before {
 content: "\e03a";
}
.icon-fast-backward:before {
 content: "\e03b";
}
.icon-arrow-20:before {
 content: "\e03c";
}
.icon-arrow-21:before {
 content: "\e03d";
}
.icon-arrow-22:before {
 content: "\e03e";
}
.icon-sun:before {
 content: "\e03f";
}
.icon-sun-2:before {
 content: "\e040";
}
.icon-dots-two:before {
 content: "\e041";
}
.icon-dot:before {
 content: "\e042";
}
.icon-creative-commons:before {
 content: "\e043";
}
.icon-light-bulb:before {
 content: "\e044";
}
@font-face {
  font-family: 'entypo';
  src:url('fonts/entypo.eot');
  src:url('fonts/entypo.eot?#iefix') format('embedded-opentype'),
 	url('fonts/entypo.svg#entypo') format('svg'),
	url('fonts/entypo.woff') format('woff'),
	url('fonts/entypo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。

如需转载，烦请注明出处：http://www.w3cplus.com/demo/163-entypo-icon-ui.html