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

دسته بندی ها : آموزشگاه 8 ژانویه 2015 خانه وردپرس 1802 بازدید

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

یکی از دغدغه های اصلی طراحان و صاحبان سایت ها سرعت بارگزاری سایتشونه امروزه برای افزایش سرعت بارگزاری سایت راه های مختلفی وجود داره از انوع فشرده سازی ها گرفته تا کارهایی مثله 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;        
    }
}

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

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

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

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

نظرات کاربران

  1. shahab گفته :
    19:00 2015/01/30

    استفاده کردم، واقعا عالی و کارساز بود

  2. Soamye گفته :
    15:19 2015/05/14

    سلام من یه سوال داشتم. من یه قالب دارم که در اون از fontawsome استفاده شده. چطوری میتونم به جای اونها از تصاویر وکتوری استفاده کنم؟؟خواهش میکنم کمکم کنید

  3. احسان گفته :
    16:23 2015/07/30

    سلام خسته نباشید چطوری میتونم تمام این فایل ها را داشته باشم متاسفانه تو وب نتونستم پیدا شون کنم خیلی بهشون نیاز دارم لطفا برام به همین ایمیل فرستید!
    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’);
    من تنها فایل otf رو تونستم پیدا کنم لطفا کمکم کنید

    • سلام دوست عزیز فقط کافیه نام فونت دلخواه رو به انگلیسی تو گوگل سرچ کنید
      مانند:ebsymbols-regular-webfont.eot

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

لینک کوتاه :
0