藤藤每日一练——345 Brankic Icon UI
发布于
藤藤
这个ICON库工程真是浩大，其实藤藤整理出来是350个ICON，可是被我弄丢了五个，找不回来了，真是罪过罪过呀，实在找不回来的情况之下，我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成，可以说，你需要的ICON图标都基本上全了，有生活的、有工业的、有技术的等等，不信你自己看看。我是信了。(^_^)，制作方法是不用了说，主要是大家苦于没有这样的字体库，那么现在我们给大家提供了，需要的就直接下载吧，不过转载的话，注明一下来源哟，别让我们辛苦过后一点余香都没了。
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;
}
特别声明，此案例的是由别的SVG字体库，通过IcoMoon.io在线转换生成。
如需转载，烦请注明出处：https://www.fedev.cn/demo/345-brankic-icon-ui.html
nike air max 2019 boots