اضافه کردن فونت آیکن با CSS به قالب سایت وردپرسی

اضافه کردن فونت آیکن با CSS به قالب سایت وردپرسی

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

اضافه کردن فونت آیکن با CSS به قالب سایت وردپرسی

انتخاب فونت آیکن مناسب و دانلود آن

برای این منظور من فونت آیکن glyphicon را انتخاب کرده ام. زیرا به نسبت فونت آیکن های دیگر سبک تر است و قالب شما را سنگین نمی‌کند اما همچنان طیف خوبی از آیکن ها را در اختیار شما می‌گذارد.

دانلود فونت های glyphicon

به Cpanel خود مراجعه کرده و از پوشه wp-content و سپس themes، قالب سایت وردپرسی را پیدا کرده و در پوشه CSS آن یک پوشه جدید به نام Fonts ایجاد کرده و فونت های دانلود خود را در آنجا آپلود کنید.

سپس فایل style.css خود را باز کرده و کدهای موجود در قایل text زیر را در انتهای آن وارد کنید:

لازم به ذکر است پوشه CSS در قالب ها ممکن است در پوشه دیگری به نام assets یا عنوان دیگری باشد یا آنکه فایل Style.css اصلی قالب در همان پوشه اصلی قالب باشد و الزاما طراح قالب چنین پوشه ای را ایجاد نکرده باشد. این بخش برای هر قالب متفاوت است اما دستورالعمل کلی کار چنان است که گفته شد.

 

اضافه کردن فونت آیکن با CSS در نوشه ها یا برگه ها

  • حالا در هر کجای سایت خود که نیاز داشتید آیکن را وارد کنید می توانید کد <span class="کلاس آیکن"></span>  را در بخش متن ویرایشگر وردپرس خود وارد کنید.
  • برای استفاده از آیکن های متفاوت کافیست نام Class آن را تغییر دهید.
  • برای پیدا کردن این کلاس ها می توانید از سایت سازنده؛ کلاس مورد نظر خود را انتخاب کنید.
  • برای مثال کد <span class="glyphicon glyphicon-home"></span> چنین آیکنی را در محتوای شما نمایش می دهد.

قرار دادن کد آیکن مربوطه در ویرایشگر متن وردپرس

مقاله پیشنهادی :

ساخت منو چسبان با CSS

5/5 - (1 امتیاز)

دیدگاهتان را بنویسید

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