藤藤每日一练——Ligature Icon UI

大家好久没有看到藤藤的每日一练了吧，会不会觉得少了什么？难道藤藤同学不写案例了吗？不是的，因为最近我和藤藤一起在整理ICON　UI的库，希望这些UI的库能帮助大家解决一些ICON的制作时间，做到拿来就可以用。这些ICON　UI我们都是使用字体来制作的，用到的就是ＣＳＳ３的＠font-face属性，制作方法简单。只是类名和实体符的对应，大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature　Symbols，希望大家喜欢。

demodownload

HTML CODE

<a href="#" class="icon file">
　<span>
　　<em>file</em>
　　<em>&amp#xe048;</em>
　</span>
</a>

特别声明：由于例中制作了两百多个ICON，受限于篇幅问题，在这里不将所有的html结构展示出来，详细的可以点击DEMO按钮查看源码，或者直接下载源码查看。

CSS CODE

body {
　background-color: #fdfdfd;
}
.demo {
　width: 900px;
　text-align: left;
　margin: auto;
}
.control_buttons li {
　display: inline-block;
　margin-right: 10px;
}
.icon {
　position: relative;
　display: inline-block;
　color: #545454;
　width: 40px;
　height: 30px;
　line-height: 30px;
　text-align: center;
　margin-bottom: 20px;
　box-shadow: 0 1px 0 #f4f4f4 inset;
　border: 1px solid #7d7d7d;
　border-radius: 3px;
　background: -webkit-linear-gradient(top,#ececec,#bfbfbf);
　background: -moz-linear-gradient(top,#ececec,#bfbfbf);
　background: linear-gradient(top,#ececec,#bfbfbf);
}
.icon:hover {
　color: #545454;
　text-decoration:none;
　background: -webkit-linear-gradient(top,#f7f5f5,#c9c7c7);
　background: -moz-linear-gradient(top,#f7f5f5,#c9c7c7);
　background: linear-gradient(top,#f7f5f5,#c9c7c7);
}
.icon:hover span {
　max-height: 72px;
}
.icon span {
　position: absolute;
　left: -32px;
　top: 30px;
　display: block;
　overflow: hidden;
　max-height: 0;
　text-align: center;
　-webkit-transition: max-height .3s linear;
  -moz-transition: max-height .3s linear;
　transition: max-height .3s linear;
　z-index: 2;
}
.icon span em {
　display: block;
　width: 100px;
　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:#363636;
　z-index: 3;
}
.icon span em + em {
　margin-top: 0;
　border-radius: 0 0 2px 2px;
　background-color:#313131;
}
.icon span em:hover {
　background-color:#444;
}
.icon span em:after {
　position: absolute;
　left: 50%;
　top: 0;
　content: '';
　width: 1px;
　height: 1px;
　border: 5px solid transparent;
　border-bottom-color: #363636;
　margin-left: -5px;
}
.icon:after {
  font-family: 'LigatureSymbols';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
  font-size: 26px;
}
.file:after {
　content:"file";
}
.print:after {
　content:"print";
}
.delete:after {
　content:"delete";
}
.clear:after {
　content:"clear";
}
.save:after {
　content:"save";
}
.upload:after {
　content:"upload";
}
.cloud:after {
　content:"cloud";
}
.folder:after {
　content:"folder";
}
.camera:after {
　content:"camera";
}
.photo:after {
　content:"photo";
}
.image:after {
　content:"image";
}
.barcode:after {
　content:"barcode";
}
.phone:after {
　content:"phone";
}
.music:after {
　content:"music";
}
.video:after {
　content:"video";
}
.playmedia:after {
　content:"playmedia";
}
.record:after {
　content:"record";
}
.play:after {
　content:"play";
}
.pause:after {
　content:"pause";
}
.stop:after {
　content:"stop";
}
.eject:after {
　content:"eject";
}
.bell:after {
　content:"bell";
}
.volumeup:after {
　content:"volumeup";
}
.volumedown:after {
　content:"volumedown";
}
.volume:after {
　content:"volume";
}
.off:after {
　content:"off";
}
.light:after {
　content:"light";
}
.dark:after {
　content:"dark";
}
.lock:after {
　content:"lock";
}
.unlock:after {
　content:"unlock";
}
.flag:after {
　content:"flag";
}
.wifi:after {
　content:"wifi";
}
.time:after {
　content:"time";
}
.map:after {
　content:"map";
}
.geo:after {
　content:"wifi";
}
.location:after {
　content:"location";
}
.pin:after {
　content:"pin";
}
.walking:after {
　content:"walking";
}
.bicycle:after {
　content:"bicycle";
}
.car:after {
　content:"car";
}
.bus:after {
　content:"bus";
}
.plane:after {
　content:"plane";
}
.compass:after {
　content:"compass";
}
.arrowup:after {
　content:"arrowup";
}
.arrowright:after {
　content:"arrowright";
}
.arrowdown:after {
　content:"arrowdown";
}
.arrowleft:after {
　content:"arrowleft";
}
.up:after {
　content:"up";
}
.right:after {
　content:"right";
}
.down:after {
　content:"down";
}
.left:after {
　content:"left";
}
.back:after {
　content:"back";
}
.next:after {
　content:"next";
}
.dropdown:after {
　content:"dropdown";
}
.sort:after {
　content:"sort";
}
.good:after {
　content:"good";
}
.bad:after {
　content:"bad";
}
.full:after {
　content:"full";
}
.small:after {
　content:"small";
}
.move:after {
　content:"move";
}
.undo:after {
　content:"undo";
}
.forward:after {
　content:"forward";
}
.reply:after {
　content:"reply";
}
.share:after {
　content:"share";
}
.login:after {
　content:"login";
}
.logout:after {
　content:"logout";
}
.exchange:after {
　content:"exchange";
}
.shuffle:after {
　content:"shuffle";
}
.repeat:after {
　content:"repeat";
}
.refresh:after {
　content:"refresh";
}
.sync:after {
　content:"sync";
}
.external:after {
　content:"external";
}
.addstar:after {
　content:"addstar";
}
.star:after {
　content:"star";
}
.starempty:after {
　content:"starempty";
}
.heart:after {
　content:"heart";
}
.share:after {
　content:"share";
}
.heartempty:after {
　content:"heartempty";
}
.view:after {
　content:"view";
}
.comment:after {
　content:"comment";
}
.comments:after {
　content:"comments";
}
.plus:after {
　content:"plus";
}
.minus:after {
　content:"minus";
}
.zoomin:after {
　content:"zoomin";
}
.zoomout:after {
　content:"zoomout";
}
.search:after {
　content:"search";
}
.menu:after {
　content:"menu";
}
.tilemenu:after {
　content:"tilemenu";
}
.list:after {
　content:"list";
}
.tile:after {
　content:"tile";
}
.table:after {
　content:"table";
}
.copy:after {
　content:"copy";
}
.cut:after {
　content:"cut";
}
.backspace:after {
　content:"backspace";
}
.alignleft:after {
　content:"alignleft";
}
.aligncenter:after {
　content:"aligncenter";
}
.alignright:after {
　content:"alignright";
}
.alignadjust:after {
　content:"alignadjust";
}
.italic:after {
　content:"italic";
}
.bold:after {
　content:"bold";
}
.underline:after {
　content:"underline";
}
.strike:after {
　content:"strike";
}
.emphasis:after {
　content:"emphasis";
}
.code:after {
　content:"code";
}
.link:after {
　content:"link";
}
.quote:after {
　content:"quote";
}
.graph:after {
　content:"graph";
}
.magic:after {
　content:"magic";
}
.brush:after {
　content:"brush";
}
.color:after {
　content:"color";
}
.contrast:after {
　content:"contrast";
}
.ink:after {
　content:"ink";
}
.gradation:after {
　content:"gradation";
}
.sepia:after {
　content:"sepia";
}
.invert:after {
　content:"invert";
}
.paint:after {
　content:"paint";
}
.paramater:after {
　content:"paramater";
}
.crop:after {
　content:"crop";
}
.check:after {
　content:"check";
}
.checkbox:after {
　content:"checkbox";
}
.checkboxempty:after {
　content:"checkboxempty";
}
.pc:after {
　content:"pc";
}
.keyboard:after {
　content:"keyboard";
}
.mobile:after {
　content:"mobile";
}
.horizontal:after {
　content:"horizontal";
}
.vertical:after {
　content:"vertical";
}
.web:after {
　content:"web";
}
.mail:after {
　content:"mail";
}
.shopping:after {
　content:"shopping";
}
.dashboard:after {
　content:"dashboard";
}
.key:after {
　content:"key";
}
.sns:after {
　content:"sns";
}
.calender:after {
　content:"calender";
}
.dailycalender:after {
　content:"dailycalender";
}
.ban:after {
　content:"ban";
}
.remove:after {
　content:"remove";
}
.pen:after {
　content:"pen";
}
.eraser:after {
　content:"eraser";
}
.edit:after {
　content:"edit";
}
.tabs:after {
　content:"tabs";
}
.tag:after {
　content:"tag";
}
.setup:after {
　content:"setup";
}
.setting:after {
　content:"setting";
}
.etc:after {
　content:"etc";
}
.clip:after {
　content:"clip";
}
.bookmark:after {
　content:"bookmark";
}
.book:after {
　content:"book";
}
.album:after {
　content:"album";
}
.user:after {
　content:"user";
}
.friend:after {
　content:"friend";
}
.group:after {
　content:"group";
}
.frustrate:after {
　content:"frustrate";
}
.laugh:after {
　content:"laugh";
}
.wink:after {
　content:"wink";
}
.smile:after {
　content:"smile";
}
.surprise:after {
　content:"surprise";
}
.trouble:after {
　content:"trouble";
}
.game:after {
　content:"game";
}
.globe:after {
　content:"globe";
}
.home:after {
　content:"home";
}
.building:after {
　content:"building";
}
.rss:after {
　content:"rss";
}
.app:after {
　content:"app";
}
.memo:after {
　content:"memo";
}
.meal:after {
　content:"meal";
}
.coffee:after {
　content:"coffee";
}
.present:after {
　content:"present";
}
.twinkle:after {
　content:"twinkle";
}
.crown:after {
　content:"crown";
}
.category:after {
　content:"category";
}
.circle:after {
　content:"circle";
}
.info:after {
　content:"info";
}
.help:after {
　content:"help";
}
.refreshbutton:after {
　content:"refreshbutton";
}
.notify:after {
　content:"notify";
}
/*--logos--*/
.apple:after {
　content:"apple";
}
.android:after {
　content:"android";
}
.windows:after {
　content:"windows";
}
.amazon:after {
　content:"amazon";
}
.facebook:after {
　content:"facebook";
}
.twitter:after {
　content:"twitter";
}
.google:after {
　content:"google";
}
.hatena:after {
　content:"hatena";
}
.linkedin:after {
　content:"linkedin";
}
.mixi:after {
　content:"mixi";
}
.line:after {
　content:"line";
}
.mobage:after {
　content:"mobage";
}
.gree:after {
　content:"gree";
}
.skype:after {
　content:"skype";
}
.foursquare:after {
　content:"foursquare";
}
.pinterest:after {
　content:"pinterest";
}
.flickr:after {
　content:"flickr";
}
.tumblr:after {
　content:"tumblr";
}
.evernote:after {
　content:"evernote";
}
.github:after {
　content:"github";
}
.dribbble:after {
　content:"dribbble";
}
.cookpad:after {
　content:"cookpad";
}
.instapaper:after {
　content:"instapaper";
}
.readability:after {
　content:"readability";
}
.gumroad:after {
　content:"gumroad";
}
.picasa:after {
　content:"picasa";
}
.instagram:after {
　content:"instagram";
}
.delicious:after {
　content:"delicious";
}
.youtube:after {
　content:"youtube";
}
.chrome:after {
　content:"chrome";
}
.safari:after {
　content:"safari";
}
.sleipnir:after {
　content:"sleipnir";
}
.firefox:after {
　content:"firefox";
}
.opera:after {
　content:"opera";
}
.ie:after {
　content:"ie";
}
@font-face {
  font-family: 'LigatureSymbols';
  src: url('font/LigatureSymbols-2.05.eot');
  src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
       url('font/LigatureSymbols-2.05.woff') format('woff'),
       url('font/LigatureSymbols-2.05.ttf') format('truetype'),
       url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
  font-weight: normal;
  font-style: normal;
}	

demodownload

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