مردم به طور طبیعی به ظاهر بصری الف کشیده می شوند وب سایت از وردپرس، به همان اندازه که جذب محتوای نوشتاری شما می شوند. در واقع، با توجه به جف Bullas "، مقالات با تصاویر دارای 94٪ بیشتر از مقالات بدون تصویر هستند.

اگر از من سال کنید این یک افزایش چشمگیر در بازدید از صفحه است.

و دقیقا چه دلیلی؟

فقط چند تصویر با کیفیت بالا و مربوط به مقاله را در سراسر محتوای خود اضافه کنید.

اما در مورد تصاویر روی شما چطور؟ وب سایت که فراتر از اسکرین شات و عکس است؟ در مورد تصاویری که نه تنها توجه را جلب می کنند، بلکه عملکرد مفیدی نیز دارند، چطور؟

بله ، من در مورد آیکون ها صحبت می کنم. می دانید ، آن تصاویر کوچکی که در وب سایت ها برای تشویق به اشتراک گذاری در رسانه های اجتماعی ، برای نشان دادن صفحات تماس صاحبان مشاغل ، برای نام بردن از موارد مختلف یافت می شود استفاده

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

با وجود پیشرفت تکنولوژی ، مثل همیشه ، آیکون های تصویری سنتی به عنوان یک راه حل تصویری برای وب سایت ها ، متزلزل می شوند. دلیل این امر این است که آنها صفحات را بسیار سنگین تر و بنابراین کندتر می کنند ، اما مهمتر از همه این که این راه حل همیشه برای موبایل مناسب نیست.

اما یک راه حل وجود دارد: قلمهای آیکون.

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

بنابراین ، اجازه دهید شروع کنیم.

فونت های آیکون چیست و چرا باید از آنها استفاده کنید؟

قلم های آیکون دقیقاً همان چیزی است که آنها می گویند: قلم هایی که کاملاً در آیکون ساخته شده اند. در واقع ، قلم های آیکون یا " را-آیکون "می توان به عنوان فونت توصیف کرد که فقط کاراکترها یا نمادها را نشان می دهد ، نه حروف و اعدادی که قلم ها و متن های سنتی با آنها در ارتباط هستند.

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

Fonticone در یک وب سایت

چرا از قلم های آیکون استفاده می شود؟

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

در اینجا برخی از دلایل قانع کننده بودن بهترین گزینه برای انتخاب قلم های آیکون را مشاهده می کنید:

  • قابل راحتی و بدون از دست دادن کیفیت قابل ارتقا است
  • از نظر رنگ و سایه قابل تنظیم است
  • 100٪ پاسخگو
  • مانند Spritit های تصویر CSS کار می کند ، اما مانند متن رفتار می کند
  • آسان برای استفاده
  • سازگار با مرورگرها
  • کدورت ، چرخش و موارد دیگر را سفارشی کنید
  • اندازه فایل کوچکتر
  • سرعت و عملکرد وب سایت خود را قربانی نکنید

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

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

Better Font Awesome a پلاگین وردپرس نرم افزار رایگانی که به شما امکان می دهد به طور خودکار آخرین نسخه Font Awesome را در پروژه وردپرس خود ادغام کنید. علاوه بر این، با CSS، کدهای کوتاه و تولید کننده کد کوتاه TinyMCE همراه است.

این افزونه ویژگی های مختلفی برای مالکان سایت دارد:

  • بروزرسانی معمول آخرین نسخه
  • امکان جابجایی بین نسخه های Font Awesome بدون تغییر کدهای کوتاه
  • پشتیبانی از سایر افزونه های فونت محبوب از جمله کد کوتاه آنها
  • صادر شده توسط jsDelivr CDN

1 مرحله: نصب و فعال سازی بهتر قلم جذاب

برای شروع ، پلاگین "Better Font Awesome" را از طریق داشبورد وردپرس خود نصب و فعال کنید دقیقاً مانند سایر افزونه ها.

ابتدا به " پلاگین ها> افزودن موارد جدید و جستجو برای " عالی فونت عالی '.

پلاگین عالی فونت بهتر نصب و فعال کنید

سپس " نصب در حال حاضر »و روی« فعال کردن '.

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

آیتم جدید منوی پلاگین عالی با قلم بهتر

مرحله 2: تنظیمات افزونه را پیکربندی کنید

برای پیکربندی افزونه « عالی فونت عالی "، با کلیک کردن روی مورد منو شروع کنید" عالی فونت عالی در زیر تنظیمات پس از انجام این کار ، صفحه ای شبیه به این مشاهده خواهید کرد:

تنظیمات پیکربندی جذاب عالی فونت بهتردر اینجا می توانید موارد زیر را انجام دهید:

  • نسخه: نسخه "Better Font Awesome" را که می خواهید استفاده کنید انتخاب کنید.
  • از CSS Minified استفاده کنید: اگر می خواهید از نسخه مینی CSS استفاده کنید ، این کادر را علامت بزنید.
  • قلم چاپ موجود را حذف کنید: این جعبه را انتخاب کنید تا سعی کنید قطعه های کدگذاری شده و کد کوتاه اضافه شده توسط پلاگین ها و موضوعات دیگر را حذف کنید.
  • پنهان کردن مرورهای سرپرست: هشدارهای مدیر پیش فرض را که هنگام بروز خطاهای API و CDN ظاهر می شوند ، مخفی کنید.

علاوه بر حداقل گزینه های Better Font Awesome ، یک بخش کوچک "Usage" وجود دارد که نحوه افزودن آیکون به سایت شما را توضیح می دهد.

با استفاده از پلاگین عالی عالی فونت

مرحله 3: افزودن نمادها به وب سایت شما

سه روش آسان برای افزودن آیکون به وب سایت خود با استفاده از "Better Font Awesome" وجود دارد - از طریق کد کوتاه ، HTML یا TinyMCE.

شماره 1 افزودن نمادها با استفاده از کد کوتاه

برای افزودن آیکون به وب سایت خود با استفاده از کد کوتاه ، ابتدا از " قلم عالی برای دیدن لیست کاملی از نمادهای موجود که قابل استفاده است.

در اینجا می توانید نماد مورد نظر خود را جستجو کنید. به عنوان مثال ، اگر نماد "ایمیل" می خواهید ، فقط آن کلمه کلیدی را جستجو کنید و با کلیک بر روی آن نمادی را که می خواهید استفاده کنید ، انتخاب کنید.

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

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

ویرایشگر کد با نمادها در وردپرسویرایشگر کد با نمادها در وردپرسدر پایان، در اینجا چیزی است آخرین بازدید زمانی که آنها به سایت شما دسترسی پیدا می کنند می بینند:

نتیجه پوستر نماد وردپرس
شماره 2. افزودن نمادها با استفاده از کد HTML

همانطور که در بخش " کاربرد این گزینه را دارید که از کد HTML برای درج نمادها در وب سایت خود استفاده کنید. با این حال ، توسعه دهندگان پلاگین در نظر می گیرند که استفاده از HTML به پیشوندهای خاص نسخه نیاز دارد.

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

شماره 3. افزودن نمادها با استفاده از TinyMCE

این احتمالاً ساده ترین راه برای افزودن آیکون به سایت شما است. در حالت "Visual Editor" ، فقط روی نماد درج کلیک کنید. از آنجا ، در گزینه های نماد موجود پیمایش کنید یا با استفاده از ویژگی جستجو نتایج خود را محدود کنید.

دکمه جستجوی نماد ویرایشگر وردپرس

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

اگر می خواهید نحوه سفارشی سازی نمادها را در سایت خود بیاموزید ، به نمونه های "" قلم عالی '.