1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش استفاده از فونت بجای آیکون در طراحی سایت

شروع موضوع توسط !!!OMID!!! ‏26/10/15 در انجمن طراحی سایت

  1. !!!OMID!!!

    کاربر فوق حرفه ای

    تاریخ عضویت:
    ‏10/10/15
    ارسال ها:
    3,455
    تشکر شده:
    4,066
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    کارشناس نظام مهندسی


    به نام خدا

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

    ترفندی که منجر به کمتر شدن حجم کلی سایت و بالا رفتن سرعت بارگزاری صفحات میشود.

    -------------------------------------------------------------

    خوب بریم سر آموزش

    سایت http://fontawesome.io که در این ضمینه کار بسیار جالبی انجام داده و تمام کد های استایل رو یکجا جمع آوری کرده و کار طراحان رو راحت کرده

    این آیکن هارو میتونید در آدرس زیر مشاهده کنید

    http://fontawesome.io/icons/

    خوب اپتدا یک فایل زیپ که کد تمامی آیکن ها در آن وجود دارد را از لینک زیر دانلود کنید:

    http://fontawesome.io/assets/font-awesome-4.1.0.zip


    حالا اونو از حالت فشرده خارج کنید . خواهید دید لیست فایل ها و فولدر های موجود در این فایل زیپ را !!!!

    کد:
    css
    fonts
    less
    scss
    خوب حالا این پوشه هارو توی قالب دلخواهتون کپی کنید و کار مهم تر از اون اینه که در صفحاتی که میخواهید از این آیکن ها استفاده کنید کد زیر را در قسمت head وارد کنید: (لینک کردن فایل css)

    کد:
    <head>
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    </head>
    توجه داشته باشید که باید آدرس محل قرار گیری فایل های font-awesome.min.css و font-awesomecss که در پوشه css هستند رو صحیح وارد کنید چرا که ممکنه شما در محل دیگه ای اونو کپی کرده باشید.

    بگذریم....
    -------------------------------------------------

    خوب حالا برای وارد کردن آیکن ها شما کار سختی در پیش ندارید فقط باید از یک span استفاده کنید

    به مثال زیر دقت کنید:

    کد:
    <span class="fa iconcode size"></span>
    خوب در این کد عبارت fa ثابته و همیشه باید باشه و iconcode در واقع کلاس مربوط به آیکون های مختلف هستش که میتونید کلاس مربوط به هر آیکن را در کنار آیکن در لینک زیر ببینید:

    http://fontawesome.io/icons/

    به عنوان مثال برای قرار دادن آیکن خودرو که در بالا ترین قسمت آیکن ها قرار داره کدی شبیه به کد زیر بدست میاد:

    کد:
    <span class="fa fa-car"></span>
    دقت داشته باشید که تعیین سایز اجباری نیست و میتوان آنرا وارد نکرد
    اما در صورتی که بخواهیم آیکون مورد نظر رو در سایز های مختلف داشته باشیم بجای عبارت size تنها عبارات زیر میتواند قرار گیرد (از کوچک به بزرگ):

    fa-lg
    fa-2x
    fa-3x
    fa-4x
    fa-5x

    پس اگه بخواییم آیکن خودرو رو در سایز های مختلف داشته باشیم به ترتیب از کوچیک به بزرگ کد ها میشن:

    کد:
    <span class="fa fa-car fa-lg"></span>
    <span class="fa fa-car fa-2x"></span>
    <span class="fa fa-car fa-3x"></span>
    <span class="fa fa-car fa-4x"></span>
    <span class="fa fa-car fa-5x"></span>
    خوب همونطور که میبینید آیکن های مختلف رو براحتی با کمترین حجم ممکن میتونید در صفحاتتون استفاده کنید.

    و اما چند نکته کلیدی:

    شما بجای span میتوانید از li هم استفاده کنید ( به صورت پیشفرض)

    و اما نکته دوم رنگی کردن آیکن ها هستش که خیلی راحته فقط باید به span یک style نسبت بدیم و با خاصیت color به آیکنمون رنگ بدیم
    به مثال زیر دقت کنید:

    کد:
    <span class="fa fa-car fa-lg" style="color:red"></span>

    <span class="fa fa-life-ring fa-2x" style="color:blue"></span>

    <span class="fa fa-cloud-download fa-3x" style="color:green"></span>

    <span class="fa fa-info-circle fa-4x" style="color:orange"></span>

    <span class="fa fa-share-square fa-5x" style="color:purple"></span>
    نکته سوم هم بگم و آموزشو به پایان برسونم

    با زوم کردن صفحه معمولا تصاویر وضوح خود را از دست میدهند و این در حالی است که این آیکن ها واضح تر هم میشوند!!!! :دی

    خوب دوستان فایل تمرینی ضمیمه شد دانلود کنید تا نحوه کار رو کاملا لمس کنید.

    منبع بیا تو فروم
     
    !!!OMID!!!, ‏26/10/15
    #1