تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 1 از 1

مقاله: Font Awesome چیست و چگونه از آن استفاده کنیم؟

    1. Font Awesome چیست و چگونه از آن استفاده کنیم؟ »

      Font Awesome چیست و چگونه از آن استفاده کنیم؟

      نگارش: , by (کاربر اخراجی)
      2015/04/15 11:17 AM
      امتیاز: 

      Font Awesome چیست ؟

      Font Awesome فونتی هست که دارای آیکون های بسیار زیادی می باشد که با فراخوانی آن در قالب می توانید از این آیکون ها بهره ببرید . از ویژگی های مهم این آیکون ها می توان به سرعت بارگذاری زیاد سایت و در نتیجه افزایش سرعت و عدم نیاز به sprite اشاره کرد .


      چگونه از آن استفاده کنیم؟

      استفاده از این فونت دو روش دارد :

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

      کد:
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      برای دریافت کد آیکون ها به آدرس زیر رفته و بر روی آیکون مورد نظر کلیک کنید تا کد آن برای شما نمایش داده شود .

      Font Awesome Icons

      نمونه : <i class="fa fa-buysellads"></i>

      روش دوم استفاده از css هست که برای این کار نیاز دارید فونت هارو به قالب css خود اضافه کنید . (فونت هارو از پیوست دانلود کنید)

      کد اضافه کردن فونت ها به css :

      کد:
      @font-face{
      font-family:'FontAwesome';
      src:url('images/font/fontawesome-webfont.eot?v=4.3.0');
      src:url('images/font/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('images/font/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('images/font/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('images/font/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('images/font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
      font-weight:normal;
      font-style:normal
      }
      حالا برای اینکه برای یه کلاس از اون استفاده کنید نیاز دارید که یه content:"\f20d"; و فونت رو بصورت font: 1em FontAwesome; وارد کنید.

      برای مثال:

      کد:
      .ig::before {
          content: "\f20d";
          font: 2em "FontAwesome";
          float: right;
          margin-top: 9px;
          color: #DDD;
      }
      دقت کنید برای تغییر آیکون کد f20d رو باید عوض کنید . برای دست یابی به کد آیکون ها ، آیکون هارو باز کنید و کد مقابل Unicode رو در قسمت content وارد نمایید .

      نمونه قالبی که از این فونت استفاده کرده VBIranA هستش . اینم نمونه آماده از آن : انجمن تخصصی بازی سازی در ایران

      تمام ، موفق باشید .
      فایل های پیوست شده

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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. درخواست قالب X-Orange - Premium Theme with Font Awesome Icons
    توسط نوروز 92 در انجمن درخواست از vBulletin.org
    پاسخ: 0
    آخرين نوشته: 2015/02/22, 11:48 PM
  2. استفاده آیکون SVG بصورت Font
    توسط 34150 در انجمن پرسش و پاسخ
    پاسخ: 12
    آخرين نوشته: 2014/09/11, 12:44 PM
  3. استفاده از font-face@ در vbulletin
    توسط kiani در انجمن گرافیک وی بولتین
    پاسخ: 0
    آخرين نوشته: 2013/10/08, 10:53 AM
  4. ترجمه ی افزونه ی WP Awesome Support
    توسط Persian Gamer در انجمن وردپرس
    پاسخ: 0
    آخرين نوشته: 2013/09/10, 01:02 PM
  5. مشکل font بعد از دستکاری
    توسط Maziar در انجمن پرسش و پاسخ
    پاسخ: 2
    آخرين نوشته: 2011/04/26, 02:08 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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