经过一段时间的整理，Iconmoon Icon UI整理出来了，这个ICON UI总共具有316个不同的图标，所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似，如果你是初次接触，建议你先点击这里，阅读相关的文章。你会懂的。如果你知道是怎么一回事，那就继续往下吧，直接先浏览有什么样的图标，而且所有的图标，我们都配上了类名，使用时类名查询，就OK了。

demodownload

HTML CODE

<a href="#" class="icon icon-libreoffice">
  <span>
    <em> icon-libreoffice</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: #629ea4;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-bottom: 20px;
 border-radius: 3px;
 background-color: #fff;
}
.icon:hover {
 color: #7ac5cc;
 box-shadow: 0 0 2px 1px #7ac5cc;
 text-decoration:none;
}
.icon:hover span {
 max-height: 36px;
}
.icon span {
 position: absolute;
 left: -32px;
 top: 50px;
 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: block;
 width: 110px;
 line-height: 26px;
 font-style: normal;
 color: #fff;
 text-shadow:0 0 0 #fff;
 margin-top: 10px;
 border-radius: 2px 2px 0 0;
 background-color:#7ac5cc;
 box-shadow: 0 1px 5px rgba(0,0,0,.3);
 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: #7ac5cc;
 margin-left: -6px;
}
.icon:before {
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 18px;
}
.icon-home:before {
 content: "\21";
}
.icon-home-2:before {
 content: "\22";
}
.icon-newspaper:before {
 content: "\23";
}
.icon-pencil:before {
 content: "\24";
}
.icon-pencil-2:before {
 content: "\25";
}
.icon-droplet:before {
 content: "\26";
}
.icon-pictures:before {
  content: "\27";
}
.icon-picture:before {
 content: "\28";
}
.icon-camera:before {
 content: "\29";
}
.icon-music:before {
 content: "\2a";
}
.icon-play:before {
 content: "\2b";
}
.icon-film:before {
 content: "\2c";
}
.icon-camera-2:before {
 content: "\2d";
}
.icon-spades:before {
 content: "\2e";
}
.icon-clubs:before {
 content: "\2f";
}
.icon-diamonds:before {
 content: "\30";
}
.icon-broadcast:before {
 content: "\31";
}
.icon-mic:before {
 content: "\32";
}
.icon-book:before {
 content: "\33";
}
.icon-file:before {
 content: "\34";
}
.icon-file-2:before {
 content: "\35";
}
.icon-new:before {
 content: "\36";
}
.icon-copy:before {
 content: "\37";
}
.icon-folder:before {
 content: "\38";
}
.icon-folder-2:before {
 content: "\39";
}
.icon-tag:before {
 content: "\3a";
}
.icon-cart:before {
 content: "\3b";
}
.icon-basket:before {
 content: "\3c";
}
.icon-calculate:before {
 content: "\3d";
}
.icon-support:before {
 content: "\3e";
}
.icon-phone:before {
 content: "\3f";
}
.icon-mail:before {
 content: "\40";
}
.icon-location:before {
 content: "\41";
}
.icon-compass:before {
 content: "\42";
}
.icon-history:before {
 content: "\43";
}
.icon-clock:before {
 content: "\44";
}
.icon-bell:before {
 content: "\45";
}
.icon-calendar:before {
 content: "\46";
}
.icon-printer:before {
 content: "\47";
}
.icon-mouse:before {
 content: "\48";
}
.icon-comments:before {
 content: "\49";
}
.icon-reply:before {
 content: "\4a";
}
.icon-reply-2:before {
 content: "\4b";
}
.icon-forward:before {
 content: "\4c";
}
.icon-redo:before {
 content: "\4d";
}
.icon-undo:before {
 content: "\4e";
}
.icon-flip:before {
 content: "\4f";
}
.icon-flip-2:before {
 content: "\50";
}
.icon-database:before {
 content: "\51";
}
.icon-upload:before {
 content: "\52";
}
.icon-download:before {
 content: "\53";
}
.icon-box-remove:before {
 content: "\54";
}
.icon-box-add:before {
 content: "\55";
}
.icon-box:before {
 content: "\56";
}
.icon-drawer:before {
 content: "\57";
}
.icon-drawer-2:before {
 content: "\58";
}
.icon-cabinet:before {
 content: "\59";
}
.icon-mobile:before {
 content: "\5a";
}
.icon-laptop:before {
 content: "\5b";
}
.icon-screen:before {
 content: "\5c";
}
.icon-comments-2:before {
 content: "\5d";
}
.icon-pie:before {
 content: "\5e";
}
.icon-bus:before {
 content: "\5f";
}
.icon-cube:before {
 content: "\60";
}
.icon-bars:before {
 content: "\61";
}
.icon-comments-3:before {
 content: "\62";
}
.icon-comments-4:before {
 content: "\63";
}
.icon-stats-up:before {
 content: "\64";
}
.icon-cube-2:before {
 content: "\65";
}
.icon-puzzle:before {
 content: "\66";
}
.icon-gift:before {
 content: "\67";
}
.icon-comments-5:before {
 content: "\68";
}
.icon-user:before {
 content: "\69";
}
.icon-trophy:before {
 content: "\6a";
}
.icon-glasses:before {
 content: "\6b";
}
.icon-glasses-2:before {
 content: "\6c";
}
.icon-diamond:before {
 content: "\6d";
}
.icon-user-2:before {
 content: "\6e";
}
.icon-user-3:before {
 content: "\6f";
}
.icon-coffee:before {
 content: "\70";
}
.icon-accessibility:before {
 content: "\71";
}
.icon-accessibility-2:before {
 content: "\72";
}
.icon-rocket:before {
 content: "\73";
}
.icon-busy:before {
 content: "\74";
}
.icon-loading:before {
 content: "\75";
}
.icon-meter-slow:before {
 content: "\76";
}
.icon-target:before {
 content: "\77";
}
.icon-meter-medium:before {
 content: "\78";
}
.icon-loading-2:before {
 content: "\79";
}
.icon-target-2:before {
 content: "\7a";
}
.icon-lightning:before {
 content: "\7b";
}
.icon-meter-fast:before {
 content: "\7c";
}
.icon-search:before {
 content: "\7d";
}
.icon-zoom-in:before {
 content: "\7e";
}
.icon-dashboard:before {
 content: "\e000";
}
.icon-power:before {
 content: "\e001";
}
.icon-power-2:before {
 content: "\e002";
}
.icon-fire:before {
 content: "\e003";
}
.icon-zoom-out:before {
 content: "\e004";
}
.icon-key:before {
 content: "\e005";
}
.icon-lab:before {
 content: "\e006";
}
.icon-clipboard:before {
 content: "\e007";
}
.icon-clipboard-2:before {
 content: "\e008";
}
.icon-remove:before {
 content: "\e009";
}
.icon-key-2:before {
 content: "\e00a";
}
.icon-locked:before {
 content: "\e00b";
}
.icon-unlocked:before {
 content: "\e00c";
}
.icon-equalizer:before {
 content: "\e00d";
}
.icon-cog:before {
 content: "\e00e";
}
.icon-wrench:before {
 content: "\e00f";
}
.icon-remove-2:before {
 content: "\e010";
}
.icon-remove-3:before {
 content: "\e011";
}
.icon-briefcase:before {
 content: "\e012";
}
.icon-briefcase-2:before {
 content: "\e013";
}
.icon-cars:before {
 content: "\e014";
}
.icon-cloud:before {
 content: "\e015";
}
.icon-cloud-2:before {
 content: "\e016";
}
.icon-tree-view:before {
 content: "\e017";
}
.icon-grid-view:before {
 content: "\e018";
}
.icon-playlist:before {
 content: "\e019";
}
.icon-download-2:before {
 content: "\e01a";
}
.icon-smiley:before {
 content: "\e01b";
}
.icon-arrow-down:before {
 content: "\e01c";
}
.icon-arrow-right:before {
 content: "\e01d";
}
.icon-radio-checked:before {
 content: "\e01e";
}
.icon-google:before {
 content: "\e01f";
}
.icon-flickr:before {
 content: "\e020";
}
.icon-flickr-2:before {
 content: "\e021";
}
.icon-google-plus:before {
 content: "\e022";
}
.icon-radio-unchecked:before {
 content: "\e023";
}
.icon-arrow-down-2:before {
 content: "\e024";
}
.icon-arrow-down-left:before {
 content: "\e025";
}
.icon-neutral:before {
 content: "\e026";
}
.icon-upload-2:before {
 content: "\e027";
}
.icon-upload-3:before {
 content: "\e028";
}
.icon-plus:before {
 content: "\e029";
}
.icon-arrow-left:before {
 content: "\e02a";
}
.icon-arrow-left-2:before {
 content: "\e02b";
}
.icon-font:before {
 content: "\e02c";
}
.icon-google-plus-2:before {
 content: "\e02d";
}
.icon-flickr-3:before {
 content: "\e02e";
}
.icon-picassa:before {
 content: "\e02f";
}
.icon-google-plus-3:before {
 content: "\e030";
}
.icon-paragraph-left:before {
 content: "\e031";
}
.icon-arrow-up:before {
 content: "\e032";
}
.icon-arrow-up-left:before {
 content: "\e033";
}
.icon-minus:before {
 content: "\e034";
}
.icon-link:before {
 content: "\e035";
}
.icon-link-2:before {
 content: "\e036";
}
.icon-help:before {
 content: "\e037";
}
.icon-arrow-up-2:before {
 content: "\e038";
}
.icon-arrow-right-2:before {
 content: "\e039";
}
.icon-paragraph-center:before {
 content: "\e03a";
}
.icon-gplus:before {
 content: "\e03b";
}
.icon-picassa-2:before {
 content: "\e03c";
}
.icon-dribbble:before {
 content: "\e03d";
}
.icon-google-drive:before {
 content: "\e03e";
}
.icon-paragraph-right:before {
 content: "\e03f";
}
.icon-arrow-down-3:before {
 content: "\e040";
}
.icon-arrow-up-right:before {
 content: "\e041";
}
.icon-help-2:before {
 content: "\e042";
}
.icon-flag:before {
 content: "\e043";
}
.icon-flag-2:before {
 content: "\e044";
}
.icon-blocked:before {
 content: "\e045";
}
.icon-arrow-right-3:before {
 content: "\e046";
}
.icon-arrow-left-3:before {
 content: "\e047";
}
.icon-paragraph-justify:before {
 content: "\e048";
}
.icon-facebook:before {
 content: "\e049";
}
.icon-dribbble-2:before {
 content: "\e04a";
}
.icon-dribbble-3:before {
 content: "\e04b";
}
.icon-facebook-2:before {
 content: "\e04c";
}
.icon-left-to-right:before {
 content: "\e04d";
}
.icon-arrow-up-3:before {
 content: "\e04e";
}
.icon-arrow-down-right:before {
 content: "\e04f";
}
.icon-cancel:before {
 content: "\e050";
}
.icon-attachment:before {
 content: "\e051";
}
.icon-eye:before {
 content: "\e052";
}
.icon-eye-2:before {
 content: "\e053";
}
.icon-checkmark:before {
 content: "\e054";
}
.icon-cancel-2:before {
 content: "\e055";
}
.icon-arrow-down-4:before {
 content: "\e056";
}
.icon-arrow-down-left-2:before {
 content: "\e057";
}
.icon-arrow-down-5:before {
 content: "\e058";
}
.icon-arrow-right-4:before {
 content: "\e059";
}
.icon-right-to-left:before {
 content: "\e05a";
}
.icon-share:before {
 content: "\e05b";
}
.icon-instagram:before {
 content: "\e05c";
}
.icon-facebook-3:before {
 content: "\e05d";
}
.icon-forrst:before {
 content: "\e05e";
}
.icon-forrst-2:before {
 content: "\e05f";
}
.icon-deviantart:before {
 content: "\e060";
}
.icon-deviantart-2:before {
 content: "\e061";
}
.icon-github:before {
 content: "\e062";
}
.icon-github-2:before {
 content: "\e063";
}
.icon-github-3:before {
 content: "\e064";
}
.icon-github-4:before {
 content: "\e065";
}
.icon-github-5:before {
 content: "\e066";
}
.icon-github-6:before {
 content: "\e067";
}
.icon-git:before {
 content: "\e068";
}
.icon-github-7:before {
 content: "\e069";
}
.icon-vimeo:before {
 content: "\e06a";
}
.icon-checkbox-partial:before {
 content: "\e06b";
}
.icon-mail-2:before {
 content: "\e06c";
}
.icon-arrow-up-4:before {
 content: "\e06d";
}
.icon-arrow-down-right-2:before {
 content: "\e06e";
}
.icon-happy:before {
 content: "\e06f";
}
.icon-thumbs-down:before {
 content: "\e070";
}
.icon-thumbs-up:before {
 content: "\e071";
}
.icon-arrow-up-right-2:before {
 content: "\e072";
}
.icon-arrow-right-5:before {
 content: "\e073";
}
.icon-arrow-left-4:before {
 content: "\e074";
}
.icon-arrow-down-left-3:before {
 content: "\e075";
}
.icon-checkbox:before {
 content: "\e076";
}
.icon-checkbox-unchecked:before {
 content: "\e077";
}
.icon-mail-3:before {
 content: "\e078";
}
.icon-mail-4:before {
 content: "\e079";
}
.icon-youtube:before {
 content: "\e07a";
}
.icon-vimeo-2:before {
 content: "\e07b";
}
.icon-youtube-2:before {
 content: "\e07c";
}
.icon-feed:before {
 content: "\e07d";
}
.icon-feed-2:before {
 content: "\e07e";
}
.icon-bluetooth:before {
 content: "\e07f";
}
.icon-share-2:before {
 content: "\e080";
}
.icon-share-3:before {
 content: "\e081";
}
.icon-tab:before {
 content: "\e082";
}
.icon-tab-2:before {
 content: "\e083";
}
.icon-backspace:before {
 content: "\e084";
}
.icon-arrow-right-6:before {
 content: "\e085";
}
.icon-arrow-down-right-3:before {
 content: "\e086";
}
.icon-arrow-down-6:before {
 content: "\e087";
}
.icon-arrow-up-5:before {
 content: "\e088";
}
.icon-arrow-up-left-2:before {
 content: "\e089";
}
.icon-loop:before {
 content: "\e08a";
}
.icon-star:before {
 content: "\e08b";
}
.icon-heart:before {
 content: "\e08c";
}
.icon-heart-2:before {
  content: "\e08d";
}
.icon-star-2:before {
 content: "\e08e";
}
.icon-star-3:before {
 content: "\e08f";
}
.icon-bookmark:before {
 content: "\e090";
}
.icon-bookmark-2:before {
 content: "\e091";
}
.icon-minus-2:before {
 content: "\e092";
}
.icon-plus-2:before {
 content: "\e093";
}
.icon-enter:before {
 content: "\e094";
}
.icon-exit:before {
 content: "\e095";
}
.icon-arrow-up-right-3:before {
 content: "\e096";
}
.icon-arrow-up-6:before {
 content: "\e097";
}
.icon-arrow-up-left-3:before {
 content: "\e098";
}
.icon-arrow-left-5:before {
 content: "\e099";
}
.icon-arrow-left-6:before {
 content: "\e09a";
}
.icon-menu:before {
 content: "\e09b";
}
.icon-enter-2:before {
 content: "\e09c";
}
.icon-backspace-2:before {
 content: "\e09d";
}
.icon-code:before {
 content: "\e09e";
}
.icon-embed:before {
 content: "\e09f";
}
.icon-new-tab:before {
 content: "\e0a0";
}
.icon-new-tab-2:before {
 content: "\e0a1";
}
.icon-twitter:before {
 content: "\e0a2";
}
.icon-twitter-2:before {
 content: "\e0a3";
}
.icon-twitter-3:before {
 content: "\e0a4";
}
.icon-feed-3:before {
 content: "\e0a5";
}
.icon-linkedin:before {
 content: "\e0a6";
}
.icon-wordpress:before {
 content: "\e0a7";
}
.icon-file-openoffice:before {
 content: "\e0a8";
}
.icon-file-word:before {
 content: "\e0a9";
}
.icon-linkedin-2:before {
 content: "\e0aa";
}
.icon-wordpress-2:before {
 content: "\e0ab";
}
.icon-joomla:before {
 content: "\e0ac";
}
.icon-lastfm:before {
 content: "\e0ad";
}
.icon-file-excel:before {
 content: "\e0ae";
}
.icon-lastfm-2:before {
 content: "\e0af";
}
.icon-file-powerpoint:before {
 content: "\e0b0";
}
.icon-blogger:before {
 content: "\e0b1";
}
.icon-blogger-2:before {
 content: "\e0b2";
}
.icon-delicious:before {
 content: "\e0b3";
}
.icon-file-zip:before {
 content: "\e0b4";
}
.icon-file-xml:before {
 content: "\e0b5";
}
.icon-stumbleupon:before {
 content: "\e0b6";
}
.icon-tumblr:before {
 content: "\e0b7";
}
.icon-tumblr-2:before {
 content: "\e0b8";
}
.icon-stumbleupon-2:before {
 content: "\e0b9";
}
.icon-file-css:before {
 content: "\e0ba";
}
.icon-html5:before {
 content: "\e0bb";
}
.icon-pinterest:before {
 content: "\e0bc";
}
.icon-yahoo:before {
 content: "\e0bd";
}
.icon-yahoo-2:before {
 content: "\e0be";
}
.icon-pinterest-2:before {
 content: "\e0bf";
}
.icon-html5-2:before {
 content: "\e0c0";
}
.icon-css3:before {
 content: "\e0c1";
}
.icon-xing:before {
 content: "\e0c2";
}
.icon-amazon:before {
 content: "\e0c3";
}
.icon-amazon-2:before {
 content: "\e0c4";
}
.icon-xing-2:before {
 content: "\e0c5";
}
.icon-chrome:before {
 content: "\e0c6";
}
.icon-flattr:before {
 content: "\e0c7";
}
.icon-tux:before {
 content: "\e0c8";
}
.icon-firefox:before {
 content: "\e0c9";
}
.icon-IE:before {
 content: "\e0ca";
}
.icon-foursquare:before {
 content: "\e0cb";
}
.icon-apple:before {
 content: "\e0cc";
}
.icon-finder:before {
 content: "\e0cd";
}
.icon-foursquare-2:before {
 content: "\e0ce";
}
.icon-opera:before {
 content: "\e0cf";
}
.icon-paypal:before {
 content: "\e0d0";
}
.icon-android:before {
 content: "\e0d1";
}
.icon-windows:before {
 content: "\e0d2";
}
.icon-soundcloud:before {
 content: "\e0d3";
}
.icon-soundcloud-2:before {
 content: "\e0d4";
}
.icon-reddit:before {
 content: "\e0d5";
}
.icon-skype:before {
 content: "\e0d6";
}
.icon-file-pdf:before {
 content: "\e0d7";
}
.icon-libreoffice:before {
 content: "\e0d8";
}
.icon-yelp:before {
 content: "\e0d9";
}
.icon-paypal-2:before {
 content: "\e0da";
}
.icon-paypal-3:before {
 content: "\e0db";
}
.icon-IcoMoon:before {
 content: "\e0dc";
}
.icon-safari:before {
 content: "\e0dd";
}

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	url('fonts/icomoon.svg#icomoon') format('svg'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
font-style: normal;
}	

demodownload

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

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