Icon fontok használata

2014-03-30

Az icon fontok használatával vektoros ikonokat tudunk megjeleníteni a weben, melyek méretezhetők, színezhetők és akár animálhatók is.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


    <ul>
        <li><a href="" class="icon-music">Music</a></li>
        <li><a href="" class="icon-search">Search</a></li>
        <li><a href="" class="icon-mail-alt">Mail</a></li>
        <li><a href="" class="icon-camera">Gallery</a></li>
    </ul>

CSS forráskód


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

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?50091263#fontello') format('svg');
  }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 120%;
    font-family: 'Rancho', cursive;
}

body { background: url('../bg.png') #fcf9f2 }

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    margin: 0 20px 0 15px;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    font-size: 57%;
    color: rgba(255,255,255,0.4);
    text-shadow: none
}

.icon-music:before { content: '\e800'; }
.icon-search:before { content: '\e801'; }
.icon-mail-alt:before { content: '\e803'; }
.icon-camera:before { content: '\e802'; }
.icon-comment:before { content: '\e804'; }

h1 {
    text-align: center;
    font-size: 300%;
    margin: 30px 0;
}

ul {
    width: 300px;
    margin: 0 auto;
    list-style: none;
}
li {
    margin: 0 0 20px 0;
}
ul li a {
    background: #89c2b2;
    text-decoration: none;
    color: #fff;
    padding: 5px;
    display: block;
    box-shadow: 6px 6px 0px rgba(160,160,140,0.2);
    transition: all 0.3s;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
}
ul li a:hover {
    background: #43756e;
    color: #fff;
    padding-left: 40px;
    transition: all 0.3s linear;
}