/ آموزش استفاده از فونت آیکون , مخصوص طراحان وب +معرفی چند سایت ( اختصاصی ویکی وی بی )
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 2 از 2

مقاله: آموزش استفاده از فونت آیکون , مخصوص طراحان وب +معرفی چند سایت ( اختصاصی ویکی وی بی )

    1. آموزش استفاده از فونت آیکون , مخصوص طراحان وب +معرفی چند سایت ( اختصاصی ویکی وی بی )

      آموزش استفاده از فونت آیکون , مخصوص طراحان وب +معرفی چند سایت ( اختصاصی ویکی وی بی )

      بسم الله الرحمن ارحیم

      مدتی هست که کلا خوصله فعالیت ندارم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی به همین خاطر یک آموزش ساده و بسیار بسیار کاربردی برای وب دیزاینر ها و حتی عزیزانی که طراح نیستن اماده کردم. :D

      چند تا از برتری های آیکون فونت ها نصب به تصاویر رو براتون مینویسم :

      - خیلی راحت میتونید بدون افت کیفیت آیکون ها رو با استفاده از فونت سایز تغییر اندازه بدید.

      - به راحتی مثل متن میتونید رنگ آیکون ها رو تغییر بدید.

      - امکان استفاده از سایه برای آیکون ها وجود داره.

      - توی اکثر مرورگرها حتی IE7 کار میکنه!

      - برای حالت های Hover و … نیاز به استفاده از چند تصویر ندارید!

      - سایز کمتری نسبت به تعداد زیادی تصویر داره.


      خب برای استفاده اول باید فایل سورس که فشرده شده رو از فایل های پیوست این تاپیک دانلود کنید . تا به اینجاش که راحته بینیم ادامه ش چجوریاس ؟! مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      بعد که فایل رو دانلود کردید با یک لینک اچ رف متصل میکنیم به استایل . خب اگر برای ویبولتین میخواید استفاده کنید این کد رو
      کد:
      <link href="مسیر فایل/.font-awesome.min.css" rel="stylesheet">
      بزارید داخل headinclude_bottom .

      اما اگر وردپرس کار هستید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی کد بالارو بزارید داخل تگ های head (خدا این تگ هد رو از وردپرسی ها نگیرهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی) .

      مرحله بعدی گذاشتن تگ ایکن در جای مورد نظر است . اول به یکی از سایت هایی که در آخر این مقاله میگم میرید و ایکن مورد نظر رو سلکت میکنید (خودش کد رو میده) مثلا من فرض میکنم این کد ما هست
      کد:
      <i class="fa fa-download"></i>
      مثلا من میرم این کد رو میزارم داخل هدر و تمام ایکون ظاهر شد .

      نکات : 1-برای بزرگ کردن ایکون این کد رو fa-2xبه
      کد:
      <i class="fa fa-download"></i>
      اضافه میکنم که اینجوری درمیاد
      کد:
      <i class="fa fa-download fa-2x"></i>
      توجه داشته باشید که به جای 2 میتونید از یک عدد بین 2 تا 5 استفاده کنید .

      2-برای انیمین چرخش مداوم (ینی ایکون کلا هی بچرخه!) این کدرو اضافه کنید fa-spin مثلا من میخوام که اون خاصیت قبلی یعنی اندازه ایکون رو هم داشته باشه اون کد بالا رو بدون دست زدن میزارم و کد جدید رو بهش میدم که اینجوری در میاد
      کد:
      <i class="fa fa-download fa-2x fa-spin"></i>
      .

      3-بران رنگ دادن به ایکون باید برای اون تگ i یک ایدی بدیم (توجه کنید فقط ایدی نه کلس) مثلا اینجوری
      کد:
      <i id="wikivb" class="fa fa-download"></i>
      بعدش میریم به قسمت ادیشنال (برای ویبولتین) و استایل (برای ورد پرس) و فراخوانی میزنیم
      کد:
      #wikivb{color:red;}
      .

      /************************************ sites **************************************/

      1-http://fontello.com/
      2-http://icomoon.io/
      3-http://iconmonstr.com/
      4-http://fontastic.me/
      5-http://www.uiplayground.in/css3-icons/
      6-http://fontawesome.io/icons/

      بهترین سایت شماره 6 میباشد از لحاظ راحتی کارکرد .
      کد های تگ های هد و اینکلود باتم این آموزش از سایت شماره 6 گرفته شده است . برای تغییر , کد یکی از سایت بالارا قرار دهید .

      /************************************ end of sites *********************************/

      بدرود مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


      آموزش استفاده از فونت آیکون , مخصوص طراحان وب +معرفی چند سایت ( اختصاصی ویکی وی بی ) فايل هاي پيوست شده
      ویرایش توسط xperiairan : 07-18-2014 در ساعت 04:50 PM
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      14 نفر از اعضا پست xperiairan را پسندیده اند


  1. #2
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    این نکته رو یادم رفت بگم که برای هر ایدی که میدید یک ترنسیشن در نظر بگیرید اگر هاور دار میخواید , چون خیلی قشنگتر و روون تر میکنه . مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست xperiairan را پسندیده اند



اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی