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

موضوع: آموزش استفاده از FontAwesome در صفحات وب ( اختصاصی ویکی وی بی )

  1. #1
    NiNE آنلاین نیست.
    NiNE
    مدير بازنشسته
    1,975نوشته4,462مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    63
    پسندیده است
    7,092 پست
    بلاگ
    1 پست
    میزان امتیاز
    4470
    gilas-web.ir

    آموزش استفاده از FontAwesome در صفحات وب ( اختصاصی ویکی وی بی )



    باسلام و 2رودی دِگَر بار مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی حالتون خوبه ؟ دماغتون چاقه ؟ مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    این بار با یک آموزش بسیار بدرد بخور اومدم پیشتون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی آموزش استفاده از فونت آیکون Font Awesome .

    این فونت آیکونِ بسیار خوب و دوست داشتنی ، میشه گفت محبوب ترین فونت آیکون موجود در سطح نت هست . از خوبی های استفاده از فونت آیکون میشه به :



    1. تغییر دادن سایز آیکون بدون هرگونه افت کیفیت
    2. پشتیبانی از مرورگرهای قدیمی ( حتی IE7 مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی )
    3. حجم بسیار کم نسبت به استفاده از عکس
    4. قابلیت استفاده از هاور بدون نیاز به استفاده از چند تصویر


    ما توی این آموزش از Font Awesome استفاده میکنیم . خوب ، برای شروع به آدرس :

    برید و دکمه Download رو بزنید .

    ار بین فایل های دانلود شده، فولدر های css و fonts رو کپی کنید توی محل قالبتون .

    حالا فایل font-awesome.min.css رو درون کد های head یا اگر از ویبولتین استفاده میکنید درون
    headinclude_bottom لینک کنید . به این صورت :

    کد:
    <link rel="stylesheet" href="css/font-awesome.min.css">


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



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

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

    و کپی کنید جایی که میخواید آیکون باشه . میتونید بجای i از هرتگی استفاده کنید ( از جمله div , p , a , li , .... )


    حالا میریم سراغ بزرگ و کوچیک کردن و بعضی توضیحات دیگه .

    1- تغییر سایز آیکون ها


    برای بزرگتر کردن سایز آیکون ها جلوی اسم آیکون ( برای مثال fa-heart ) باید بنویسید :

    کد:
    fa-2x
    که هرچه عدد 2 رو بزرگتر کنید آیکون بزرگتر میشه . در بزرگترین حالت هم تا 5 میره و اینطوری میشه مثلا :

    کد HTML:
    <i class="fa fa-heart fa-5x"></i>
    اما بعضی وقت ها نیاز میشه که آیکون رو بزرگتر کنید . برای این کار باید به آیکون Id بدید و توی کدهای سی اس اس سایز فونت رو بالا ببرید ، برای مثال :

    کد HTML:
    <i id="heart" class="fa fa-heart fa-5x"></i>
    و سپس در کد های سی اس اس تون قرار بدید :

    کد:
    .heart{   font-size: 20em;
    }


    2-تغییر رنگ / شادو ( سایه ) دادن


    برای تغییر رنگ دادن هم باید از همین روش آی دی دادن استفاده کنید ،

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

    کد:
    color : code-rang;
    text-shadow: code-e-shadow;



    3- چرخش آیکون


    برای چرخش آیکون کافیه یه کد ساده رو اضافه کنید ، اونهم کد :

    کد:
    fa-spin
    هست که کل کد به این صورت میشه برای مثال :

    کد HTML:
    <i class="fa-li fa fa-spinner fa-spin"></i>



    4- باقی مثال ها


    کد های بسیار زیادی برای استفاده هرچه راحت تر و بهتر از فونت آیکون موجود هستند، میتوانید مثال ها را در این جا ببنیدید .


    این آموزش اختصاصی ویکی وی بی هست ، لطفا فقط با ذکر منبع و لینک دادن به این مطلب کپی کنید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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


    Different type

  2. نوين وردپرس تبلیغات شما

  3. #2
    jey8des آنلاین نیست.
    jey8des
    کاربر اخراجي
    224نوشته343مورد پسند

    تاریخ عضویت
    Jul 2014
    شماره عضویت
    5831
    پسندیده است
    210 پست
    بلاگ
    پست
    میزان امتیاز
    353
    wikivb.ir
    خیلی هم عالی طاها جانمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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



  4. #3
    mbb1376 آنلاین نیست.
    mbb1376 72نوشته17مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    2853
    پسندیده است
    29 پست
    بلاگ
    پست
    میزان امتیاز
    27
    No Set
    من از آیکون ها داخل span استفاده می کنم ولی آیکن پایین متن span
    چجوری میشه مشکل رو حل کرد
    ممنون

  5. #4
    Ali.shafaey آنلاین نیست.
    Ali.shafaey
    کاربر برتر فصل
    مدير ارشد
    6,425نوشته8,292مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1571
    پسندیده است
    4,628 پست
    بلاگ
    پست
    میزان امتیاز
    8298
    مسئول 7 ستاره
    king-design.ir
    من از آیکون ها داخل span استفاده می کنم ولی آیکن پایین متن span
    متوجه نشدم لطفا واضح مشکل رو مطرح کنید
    میخواید چجوری نمایش بده؟ که نمیده

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

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

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

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

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

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

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