استفاده از فونت آیکون

امروز با یه مطلب خیلی کاربردی و عالی و در عین حال خیلی ساده در خدمت شما هستیم .

یکی از دغدغه های اصلی طراحان و صاحبان سایت ها سرعت بارگزاری سایتشونه امروزه برای افزایش سرعت بارگزاری سایت راه های مختلفی وجود داره از انوع فشرده سازی ها گرفته تا کارهایی مثله css sprite اما امروز ما یه راهی رو به شما پیشنهاد می کنیم که میتونه خیلی تو افزایش سرعت سایت به شما کمک کنه اونم استفاده از فونت آیکون ها هستند.

این آموزش با استفاده از فونت websymbols اماده شده است.

فونت آیکون چیست؟

فونت آیکون به شما این اجازه رو میده که به جای استفاده از  عکس های زیاد که سرعت لود سایت شمارو پایین میاره از الفبای انگلیسی به جای آیکون استفاده کنید!

تصور کنید در جای جای سایت شما چقدر آیکون استفاده شده ؟ حالا با استفاده از فونت آیکون در تمام آیکون ها تمام تصاویر حذف میشه و بجای اون شما از حروف الفبای انگلیسی استفاده می کنید بصورت مثال شما با استفاده از این فونت می توانید با تایپ حرف L آیکون زره بین رو نمایش بدید.

نحوه استفاده :

1- ابتدا فایل فونت را دانلود کرده و آن را در مسیر قالب خودتون در درون پوشه fonts آپلود کنید و از حالت فشرده خارج کنید

2-سپس این کد رو در اول فایل cssخودتون قرار بدید کنید:

(با این کار فونت فراخوانی میشه)

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

3- سپس در مکان دلخواه فونت رو قرار بدید:

(اینم یه مدل به همراه css)

الف) کد اچ تی ام ال

 <ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon">F</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Exceptional Service</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>
                    </li>
           </ul>

ب ) کد CSS

.ca-menu{
    padding: 0 0 0 48px;
    margin: 20px auto;
    width: 1020px;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-left:-48px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #f6f6f6;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
    color: #555;
}
.ca-sub{
    display: none;
}
.ca-menu li:hover{
    border-color: #333;
    z-index: 999;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
    color: #000;
    font-size: 60px;
    text-shadow: 0px 0px 1px #000;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -moz-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -ms-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}

کپی برداری از این آموزش با ذکر منبع بلامانع است.

خب اینم یه اموزش دیگه از خانه وردپرس امید وارم تونسته باشیم خواسته های شما رو تا حدودی براورده کنیم.

مارو از نظرات خودتون محروم نکنید.