藤藤每日一练——345 Brankic Icon UI

这个ICON库工程真是浩大，其实藤藤整理出来是350个ICON，可是被我弄丢了五个，找不回来了，真是罪过罪过呀，实在找不回来的情况之下，我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成，可以说，你需要的ICON图标都基本上全了，有生活的、有工业的、有技术的等等，不信你自己看看。我是信了。(^_^)，制作方法是不用了说，主要是大家苦于没有这样的字体库，那么现在我们给大家提供了，需要的就直接下载吧，不过转载的话，注明一下来源哟，别让我们辛苦过后一点余香都没了。

demodownload

HTML CODE

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

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

CSS Code

.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: #333;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,.08) inset;
  border: 1px solid #333;
  border-radius: 3px;
}
.icon:hover {
  color: #333;
  box-shadow: 0 0 1px 1px #fa6fa0;
  border: 1px solid #fa6fa0;
  text-decoration:none;
}
.icon:hover span {
  max-height: 36px;
}
.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;
       -o-transition: max-height .3s linear;
      transition: max-height .3s linear;
  z-index: 2;
}
.icon span em {
  position: relative;
  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:#fa6fa0;
  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: #fa6fa0;
  margin-left: -6px;
}
.icon:after {
  font-family: 'brankic1979';
  font-style: normal;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
.icon-number:after {
  content:"\21";
}
.icon-quote:after {
  content:"\22";
}
.icon-tv:after {
  content:"\23";
}
.icon-upload:after {
  content:"\24";
}
.icon-picture:after {
  content:"\25";
}
.icon-site-map:after {
  content:"\26";
}
.icon-sale:after {
  content:"\27";
}
.icon-smiley:after {
  content:"\28";
}
.icon-stack:after {
  content:"\29";
}
.icon-megaphone:after {
  content:"\2a";
}
.icon-layout:after {
  content:"\2b";
}
.icon-chat:after {
  content:"\2c";
}
.icon-attachment:after {
  content:"\2d";
}
.icon-crop:after {
  content:"\2e";
}
.icon-aids:after {
  content:"\2f";
}
.icon-book:after {
  content:"\30";
}
.icon-radio:after {
  content:"\31";
}
.icon-navigation:after {
  content:"\32";
}
.icon-tags:after {
  content:"\33";
}
.icon-printer:after {
  content:"\34";
}
.icon-book-2:after {
  content:"\35";
}
.icon-heart:after {
  content:"\36";
}
.icon-square:after {
  content:"\37";
}
.icon-hourglass:after {
  content:"\38";
}
.icon-comments:after {
  content:"\39";
}
.icon-chat-2:after {
  content:"\3a";
}
.icon-chat-3:after {
  content:"\3b";
}
.icon-abacus:after {
  content:"\3c";
}
.icon-pencil:after {
  content:"\3d";
}
.icon-circle:after {
  content:"\3e";
}
.icon-info:after {
  content:"\3f";
}
.icon-square-2:after {
  content:"\40";
}
.icon-info-2:after {
  content:"\41";
}
.icon-barcode:after {
  content:"\42";
}
.icon-barcode-2:after {
  content:"\43";
}
.icon-error:after {
  content:"\44";
}
.icon-checked:after {
  content:"\45";
}
.icon-heart-2:after {
  content:"\46";
}
.icon-heart-3:after {
  content:"\47";
}
.icon-usb:after {
  content:"\48";
}
.icon-clipboard:after {
  content:"\49";
}
.icon-clipboard-2:after {
  content:"\4a";
}
.icon-minus:after {
  content:"\4b";
}
.icon-add:after {
  content:"\4c";
}
.icon-expand:after {
  content:"\4d";
}
.icon-collapse:after {
  content:"\4e";
}
.icon-pop-out:after {
  content:"\4f";
}
.icon-pop-in:after {
  content:"\50";
}
.icon-target:after {
  content:"\51";
}
.icon-badge:after {
  content:"\52";
}
.icon-eyedropper:after {
  content:"\53";
}
.icon-switch:after {
  content:"\54";
}
.icon-clipboard-3:after {
  content:"\55";
}
.icon-atom:after {
  content:"\56";
}
.icon-pictures:after {
  content:"\57";
}
.icon-alert:after {
  content:"\58";
}
.icon-ruler:after {
  content:"\59";
}
.icon-moon:after {
  content:"\5a";
}
.icon-sun:after {
  content:"\5b";
}
.icon-lightning:after {
  content:"\5c";
}
.icon-rain:after {
  content:"\5d";
}
.icon-dollar:after {
  content:"\5e";
}
.icon-piano:after {
  content:"\5f";
}
.icon-pen:after {
  content:"\60";
}
.icon-volume:after {
  content:"\61";
}
.icon-volume-2:after {
  content:"\62";
}
.icon-volume-3:after {
  content:"\63";
}
.icon-equalizer:after {
  content:"\64";
}
.icon-resize:after {
  content:"\65";
}
.icon-resize-2:after {
  content:"\66";
}
.icon-scissors:after {
  content:"\67";
}
.icon-discout:after {
  content:"\68";
}
.icon-pin:after {
  content:"\69";
}
.icon-pin-2:after {
  content:"\6a";
}
.icon-dollar-2:after {
  content:"\6b";
}
.icon-coins:after {
  content:"\6c";
}
.icon-pig:after {
  content:"\6d";
}
.icon-bookmark:after {
  content:"\6e";
}
.icon-bookmark-2:after {
  content:"\6f";
}
.icon-layout-2:after {
  content:"\70";
}
.icon-box:after {
  content:"\71";
}
.icon-lamp:after {
  content:"\72";
}
.icon-key:after {
  content:"\73";
}
.icon-eight-ball:after {
  content:"\74";
}
.icon-location:after {
  content:"\75";
}
.icon-watch:after {
  content:"\76";
}
.icon-minus-2:after {
  content:"\77";
}
.icon-minus-3:after {
  content:"\78";
}
.icon-plus:after {
  content:"\79";
}
.icon-plus-2:after {
  content:"\7a";
}
.icon-cancel:after {
  content:"\7b";
}
.icon-cancel-2:after {
  content:"\7c";
}
.icon-checkmark:after {
  content:"\7d";
}
.icon-inbox:after {
  content:"\7e";
}
.icon-pictures-2:after {
  content:"\e000";
}
.icon-android:after {
  content:"\e001";
}
.icon-marvin:after {
  content:"\e002";
}
.icon-checkmark-2:after {
  content:"\e003";
}
.icon-pictures-3:after {
  content:"\e004";
}
.icon-cloud:after {
  content:"\e005";
}
.icon-upload-2:after {
  content:"\e006";
}
.icon-direction:after {
  content:"\e007";
}
.icon-map:after {
  content:"\e008";
}
.icon-sad:after {
  content:"\e009";
}
.icon-david-star:after {
  content:"\e00a";
}
.icon-patch:after {
  content:"\e00b";
}
.icon-layout-3:after {
  content:"\e00c";
}
.icon-layout-4:after {
  content:"\e00d";
}
.icon-pil:after {
  content:"\e00e";
}
.icon-cross:after {
  content:"\e00f";
}
.icon-mute:after {
  content:"\e010";
}
.icon-chart:after {
  content:"\e011";
}
.icon-trashcan:after {
  content:"\e012";
}
.icon-hand:after {
  content:"\e013";
}
.icon-moon-and-star:after {
  content:"\e014";
}
.icon-injection:after {
  content:"\e015";
}
.icon-layout-5:after {
  content:"\e016";
}
.icon-layout-6:after {
  content:"\e017";
}
.icon-layout-7:after {
  content:"\e018";
}
.icon-layout-8:after {
  content:"\e019";
}
.icon-layout-9:after {
  content:"\e01a";
}
.icon-layout-10:after {
  content:"\e01b";
}
.icon-cube:after {
  content:"\e01c";
}
.icon-lamp-2:after {
  content:"\e01d";
}
.icon-lamp-3:after {
  content:"\e01e";
}
.icon-lamp-4:after {
  content:"\e01f";
}
.icon-thermometer:after {
  content:"\e020";
}
.icon-transformers:after {
  content:"\e021";
}
.icon-radio-2:after {
  content:"\e022";
}
.icon-vote:after {
  content:"\e023";
}
.icon-chart-2:after {
  content:"\e024";
}
.icon-pacman:after {
  content:"\e025";
}
.icon-cassette:after {
  content:"\e026";
}
.icon-watch-2:after {
  content:"\e027";
}
.icon-chronometer:after {
  content:"\e028";
}
.icon-chart-3:after {
  content:"\e029";
}
.icon-chart-4:after {
  content:"\e02a";
}
.icon-chart-5:after {
  content:"\e02b";
}
.icon-chart-6:after {
  content:"\e02c";
}
.icon-graduate:after {
  content:"\e02d";
}
.icon-lab:after {
  content:"\e02e";
}
.icon-football:after {
  content:"\e02f";
}
.icon-tie:after {
  content:"\e030";
}
.icon-medal:after {
  content:"\e031";
}
.icon-medal-2:after {
  content:"\e032";
}
.icon-satellite:after {
  content:"\e033";
}
.icon-batman:after {
  content:"\e034";
}
.icon-space-invaders:after {
  content:"\e035";
}
.icon-skeletor:after {
  content:"\e036";
}
.icon-lamp-5:after {
  content:"\e037";
}
.icon-switch-2:after {
  content:"\e038";
}
.icon-edit:after {
  content:"\e039";
}
.icon-notice:after {
  content:"\e03a";
}
.icon-notice-2:after {
  content:"\e03b";
}
.icon-cog:after {
  content:"\e03c";
}
.icon-cogs:after {
  content:"\e03d";
}
.icon-cog-2:after {
  content:"\e03e";
}
.icon-warning:after {
  content:"\e03f";
}
.icon-suitcase:after {
  content:"\e040";
}
.icon-health:after {
  content:"\e041";
}
.icon-suitcase-2:after {
  content:"\e042";
}
.icon-suitcase-3:after {
  content:"\e043";
}
.icon-number-2:after {
  content:"\e044";
}
.icon-camera:after {
  content:"\e045";
}
.icon-quote-2:after {
  content:"\e046";
}
.icon-number-3:after {
  content:"\e047";
}
.icon-tag:after {
  content:"\e048";
}
.icon-camera-2:after {
  content:"\e049";
}
.icon-camera-3:after {
  content:"\e04a";
}
.icon-tag-2:after {
  content:"\e04b";
}
.icon-number-4:after {
  content:"\e04c";
}
.icon-link:after {
  content:"\e04d";
}
.icon-number-5:after {
  content:"\e04e";
}
.icon-film:after {
  content:"\e04f";
}
.icon-film-2:after {
  content:"\e050";
}
.icon-link-2:after {
  content:"\e051";
}
.icon-number-6:after {
  content:"\e052";
}
.icon-number-7:after {
  content:"\e053";
}
.icon-number-8:after {
  content:"\e054";
}
.icon-number-9:after {
  content:"\e055";
}
.icon-number-10:after {
  content:"\e056";
}
.icon-number-11:after {
  content:"\e057";
}
.icon-number-12:after {
  content:"\e058";
}
.icon-number-13:after {
  content:"\e059";
}
.icon-number-14:after {
  content:"\e05a";
}
.icon-number-15:after {
  content:"\e05b";
}
.icon-number-16:after {
  content:"\e05c";
}
.icon-number-17:after {
  content:"\e05d";
}
.icon-number-18:after {
  content:"\e05e";
}
.icon-number-19:after {
  content:"\e05f";
}
.icon-number-20:after {
  content:"\e060";
}
.icon-ipod:after {
  content:"\e061";
}
.icon-monitor:after {
  content:"\e062";
}
.icon-window:after {
  content:"\e063";
}
.icon-tablet:after {
  content:"\e064";
}
.icon-phone:after {
  content:"\e065";
}
.icon-files:after {
  content:"\e066";
}
.icon-file:after {
  content:"\e067";
}
.icon-file-2:after {
  content:"\e068";
}
.icon-file-3:after {
  content:"\e069";
}
.icon-calendar:after {
  content:"\e06a";
}
.icon-calendar-2:after {
  content:"\e06b";
}
.icon-calendar-3:after {
  content:"\e06c";
}
.icon-cabinet:after {
  content:"\e06d";
}
.icon-cabinet-2:after {
  content:"\e06e";
}
.icon-film-3:after {
  content:"\e06f";
}
.icon-microphone:after {
  content:"\e070";
}
.icon-microphone-2:after {
  content:"\e071";
}
.icon-microphone-3:after {
  content:"\e072";
}
.icon-drink:after {
  content:"\e073";
}
.icon-drink-2:after {
  content:"\e074";
}
.icon-drink-3:after {
  content:"\e075";
}
.icon-drink-4:after {
  content:"\e076";
}
.icon-coffee:after {
  content:"\e077";
}
.icon-mug:after {
  content:"\e078";
}
.icon-ice-cream:after {
  content:"\e079";
}
.icon-cake:after {
  content:"\e07a";
}
.icon-inbox-2:after {
  content:"\e07b";
}
.icon-download:after {
  content:"\e07c";
}
.icon-alarm-clock:after {
  content:"\e07d";
}
.icon-time:after {
  content:"\e07e";
}
.icon-time-2:after {
  content:"\e07f";
}
.icon-headphones:after {
  content:"\e080";
}
.icon-wallet:after {
  content:"\e081";
}
.icon-checkmark-3:after {
  content:"\e082";
}
.icon-cancel-3:after {
  content:"\e083";
}
.icon-eye:after {
  content:"\e084";
}
.icon-position:after {
  content:"\e085";
}
.icon-site-map-2:after {
  content:"\e086";
}
.icon-download-2:after {
  content:"\e087";
}
.icon-bowling:after {
  content:"\e088";
}
.icon-cord:after {
  content:"\e089";
}
.icon-umbrella:after {
  content:"\e08a";
}
.icon-box-2:after {
  content:"\e08b";
}
.icon-stretch:after {
  content:"\e08c";
}
.icon-layout-11:after {
  content:"\e08d";
}
.icon-profile:after {
  content:"\e08e";
}
.icon-address-book:after {
  content:"\e08f";
}
.icon-address-book-2:after {
  content:"\e090";
}
.icon-profile-2:after {
  content:"\e091";
}
.icon-narrow:after {
  content:"\e092";
}
.icon-layout-12:after {
  content:"\e093";
}
.icon-diamond:after {
  content:"\e094";
}
.icon-street-light:after {
  content:"\e095";
}
.icon-locked:after {
  content:"\e096";
}
.icon-bowling-pin:after {
  content:"\e097";
}
.icon-basket:after {
  content:"\e098";
}
.icon-folder:after {
  content:"\e099";
}
.icon-gamepad:after {
  content:"\e09a";
}
.icon-alarm:after {
  content:"\e09b";
}
.icon-alarm-cancel:after {
  content:"\e09c";
}
.icon-phone-2:after {
  content:"\e09d";
}
.icon-phone-3:after {
  content:"\e09e";
}
.icon-image:after {
  content:"\e09f";
}
.icon-open:after {
  content:"\e0a0";
}
.icon-mouse:after {
  content:"\e0a1";
}
.icon-washing-machine:after {
  content:"\e0a2";
}
.icon-oven:after {
  content:"\e0a3";
}
.icon-refrigerator:after {
  content:"\e0a4";
}
.icon-microwave:after {
  content:"\e0a5";
}
.icon-3d-glasses:after {
  content:"\e0a6";
}
.icon-soccer:after {
  content:"\e0a7";
}
.icon-baseball:after {
  content:"\e0a8";
}
.icon-unlocked:after {
  content:"\e0a9";
}
.icon-locked-2:after {
  content:"\e0aa";
}
.icon-unlocked-2:after {
  content:"\e0ab";
}
.icon-magnifier:after {
  content:"\e0ac";
}
.icon-zoom-in:after {
  content:"\e0ad";
}
.icon-zoom-out:after {
  content:"\e0ae";
}
.icon-stack-2:after {
  content:"\e0af";
}
.icon-stack-3:after {
  content:"\e0b0";
}
.icon-megaphone-2:after {
  content:"\e0b1";
}
.icon-battery:after {
  content:"\e0b2";
}
.icon-battery-2:after {
  content:"\e0b3";
}
.icon-battery-3:after {
  content:"\e0b4";
}
.icon-battery-4:after {
  content:"\e0b5";
}
.icon-battery-5:after {
  content:"\e0b6";
}
.icon-archive:after {
  content:"\e0b7";
}
.icon-bomb:after {
  content:"\e0b8";
}
.icon-bag:after {
  content:"\e0b9";
}
.icon-money-bag:after {
  content:"\e0ba";
}
.icon-grid:after {
  content:"\e0bb";
}
.icon-grid-2:after {
  content:"\e0bc";
}
.icon-list:after {
  content:"\e0bd";
}
.icon-list-2:after {
  content:"\e0be";
}
.icon-ruler-2:after {
  content:"\e0bf";
}
.icon-ruler-3:after {
  content:"\e0c0";
}
.icon-pen-2:after {
  content:"\e0c1";
}
.icon-brush:after {
  content:"\e0c2";
}
.icon-hammer:after {
  content:"\e0c3";
}
.icon-paint:after {
  content:"\e0c4";
}
.icon-screwdriver:after {
  content:"\e0c5";
}
.icon-tools:after {
  content:"\e0c6";
}
.icon-layout-13:after {
  content:"\e0c7";
}
.icon-layout-14:after {
  content:"\e0c8";
}
.icon-resize-3:after {
  content:"\e0c9";
}
.icon-profile-3:after {
  content:"\e0ca";
}
.icon-safe:after {
  content:"\e0cb";
}
.icon-rotate:after {
  content:"\e0cc";
}
.icon-download-3:after {
  content:"\e0cd";
}
.icon-envelope:after {
  content:"\e0ce";
}
.icon-envelope-2:after {
  content:"\e0cf";
}
.icon-rotate-2:after {
  content:"\e0d0";
}
.icon-calculator:after {
  content:"\e0d1";
}
.icon-library:after {
  content:"\e0d2";
}
.icon-reply:after {
  content:"\e0d3";
}
.icon-radio-active:after {
  content:"\e0d4";
}
.icon-music:after {
  content:"\e0d5";
}
.icon-forward:after {
  content:"\e0d6";
}
.icon-auction:after {
  content:"\e0d6";
}
.icon-justice:after {
  content:"\e0d8";
}
.icon-retweet:after {
  content:"\e0d9";
}
.icon-presentation:after {
  content:"\e0da";
}
.icon-male:after {
  content:"\e0db";
}
.icon-shuffle:after {
  content:"\e0dc";
}
.icon-stats:after {
  content:"\e0dd";
}
.icon-stats-2:after {
  content:"\e0de";
}
.icon-loop:after {
  content:"\e0df";
}
.icon-female:after {
  content:"\e0e0";
}
.icon-cloudy:after {
  content:"\e0e1";
}
.icon-badge-2:after {
  content:"\e0e2";
}
.icon-globe:after {
  content:"\e0e3";
}
.icon-globe-2:after {
  content:"\e0e4";
}
.icon-ticket:after {
  content:"\e0e5";
}
.icon-cloudy-2:after {
  content:"\e0e6";
}
.icon-shipping:after {
  content:"\e0e7";
}
.icon-ticket-2:after {
  content:"\e0e8";
}
.icon-car:after {
  content:"\e0e9";
}
.icon-bike:after {
  content:"\e0ea";
}
.icon-ticket-3:after {
  content:"\e0eb";
}
.icon-ying-yang:after {
  content:"\e0ec";
}
.icon-compass:after {
  content:"\e0ed";
}
.icon-microphone-4:after {
  content:"\e0ee";
}
.icon-truck:after {
  content:"\e0ef";
}
.icon-bus:after {
  content:"\e0f0";
}
.icon-bike-2:after {
  content:"\e0f1";
}
.icon-plane:after {
  content:"\e0f2";
}
.icon-paper-plane:after {
  content:"\e0f3";
}
.icon-rocket:after {
  content:"\e0f4";
}
.icon-keyboard:after {
  content:"\e0f5";
}
.icon-stop:after {
  content:"\e0f6";
}
.icon-cone:after {
  content:"\e0f6";
}
.icon-blocked:after {
  content:"\e0f8";
}
.icon-zip:after {
  content:"\e0f9";
}
.icon-zip-2:after {
  content:"\e0fa";
}
.icon-anchor:after {
  content:"\e0fb";
}
.icon-locked-heart:after {
  content:"\e0fc";
}
.icon-magnet:after {
  content:"\e0fd";
}
.icon-keyboard-2:after {
  content:"\e0fe";
}
.icon-snow:after {
  content:"\e0ff";
}
@font-face {
  font-family: 'brankic1979';
  src:url('fonts/brankic1979.eot');
  src:url('fonts/brankic1979.eot?#iefix') format('embedded-opentype'),
    url('fonts/brankic1979.svg#brankic1979') format('svg'),
    url('fonts/brankic1979.woff') format('woff'),
    url('fonts/brankic1979.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

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

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