آموزش سازگار کردن قالب با fontawesome بدون نیاز به افزونه

آموزش سازگار کردن قالب با fontawesome بدون نیاز به افزونه

اشتـــراک گـــذاری مطلب

آموزش سازگار کردن قالب با fontawesome بدون نیاز به افزونه

با سلام میلاد علیزاده وکیلی هستم، از آکادمی وردپرس پوش در خدمت شما هستم با آموزش سازگار کردن قالب با fontawesome بدون نیاز به افزونه

گاها شما نیاز دارید که در سایت خود تصاویریو ایجاد کنید اما این تصاویر هم حجم زیادی رو به وبسایتتون اضافه می کنند و هم نیاز هستش که اونارو توی فتوشاپ طراحی کنید.

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

شاید این کار زمان بر و از لحاظ بهینه بودن وبسایت، اصلا کار درستی نباشد

fontawesome یک وبسایتی می باشد که شما می توانید از آیکون های آماده ی آن استفاده کنید.

  • توجه داشته باشید هر ایکونی که برای یک وبسایت نیاز هستش، داخل وبسایت fontawesome قرار داده شده است.

خب حالا به شکلی می توانیم از آیکون های موجود در وبسایت fontawesome داخل وبسایت خود استفاده کنیم؟

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

حال در این آموزش یاد میگیرید که به چه شکلی کتابخانه ی fontawesome را بدون نیاز به افزونه به وبسایت خود اضافه کنید.

  • ابتدا از این لینک  وارد وبسایت fontawesome شوید سپس نسخه ی Free for Web را دانلود کنید
  • فایل های دانلود شده را از حالت زیر خارج کنید.
  • در فایل های دانلود شده، وارد پوشه ی css شوید سپس فایل fontawesome.css را کپی کرده و در قالب خود در پوشه ی css قرار دهید.
  • سپس در فایل های دانلود شده، وارد پوشه ی js شوید سپس فایل fontawesome.js را کپی کرده و در قالب خود در پوشه ی js قرار دهید.
  • حال وارد پوشه ی webfonts شوید سپس تمامی فونت هارا کپی کرده و در قالب خود در پوشه ی fonts قرار دهید.
  • سپس فایل functions.php  قالبتان را ادیت کرده و دو خط کد زیر را به آن اضافه کنید.
مطالب تصادفی -->  ساخت صفحه ی به زودی می آییم بدون نیاز به افزونه

توجه داشته باشید که اگر پوشه ی css و js داخل قالب وبسایت شما موجود نبود، دو فولدر به این اسم ایجاد کنید سپس مراحل بالا را انجام دهید.

کار تمام است شما توانستید با موفقیت قالب خود را با fontawesome سازگار کنید.

برای مثال اگر کد زیر را در وبسایت خود اضافه کنید، آیکون instagram برای شما نمایش داده خواهد شد.

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

در صورت برخورد با هر گونه مشکل ، در قسمت دیدگاه ها با ما در میان بگذارید ما حتما پاسخ آن را برای شما ارسال خواهیم کرد

لینک کوتاه این آموزش :

راستی! جهت دریافت ویدئو های رایگان، عضو پیج اینیستاگرام ما شوید.

دوست من سوالی داری که پاسخشو نمی دونی؟

پاسخ سوالتو همین امروز دریافت کن

تاریخ انتشار :

تعداد بازدید : 101 بازدید

برچسب ها :


, , , ,


پاسخی بگذارید

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

11 + هفت =

تبلیغات تصویری

بـراے دستــرسے سریع تر به سایــت، می توانــید وب سایـــت ما را بوکــمارک کنیــد .