آموزش اضافه کردن Font Awesome به وردپرس | طریقه استفاده از فونت آیکون ها در وردپرس چگونه است؟

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

بیشتر بخوانید: دلایل عدم نمایش فهرست در وردپرس | چرا منو در سایت وردپرسی نمایش داده نمی شود؟ 

منظور از فونت آیکون ها (Font Awesome) چیست؟

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

از فونت های آیکون می توانید در بخش های مختلف سایت خود برای جذاب تر شدن آن بخش استفاده کنید. به عنوان مثال: شما می توانید از فونت های آیکون برای نمایش آیکون ها در سبد خرید، دکمه‌ های دانلود، جعبه‌ های ویژگی، منوها و… استفاده نمائید.

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

بیشتر بخوانید: پکیج جامع از افزودنی های افزونه Awesome Suppoort

طریقه استفاده از فونت آیکن ها در وردپرس

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

بیشتر بخوانید: آموزش ساخت حساب کاربری با المنتور | نحوه طراحی صفحه ثبت نام با المنتور پرو 

1- آموزش اضافه کردن Font Awesome به وردپرس با افزونه

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

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

پس از فعال‌ سازی افزونه اکنون می توانید هر پست یا صفحه وردپرس را ویرایش کنید و از کد کوتاه آیکون مانند زیر استفاده نمائید:        

[icon name=”rocket”]

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

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

همچنین می ‌توانید کد کوتاه آیکون فونت را در یک بلوک پاراگراف اضافه نمائید.

بیشتر بخوانید: نحوه استفاده از کپچا در وردپرس | چگونه کد امنیتی گوگل را در وردپرس فعال کنیم؟ 

2- آموزش اضافه کردن فونت آیکون در وردپرس با صفحه سازها

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

– اضافه کردن فونت آیکون در وردپرس با صفحه ساز Beaver Builder

افزونه Beaver Builder یکی از افزونه های محبوب صفحه ساز برای وردپرس می باشد که به شما این امکان را می دهد تا به راحتی طرح بندی صفحات سفارشی را در وردپرس بدون نوشتن هیچ کدی ایجاد کنید. همچنین این افزونه دارای مجموعه ای از آیکون ‌های زیبا و ماژول‌ های آماده برای استفاده است که می ‌توانید آن‌ها را بکشید و در پست و صفحات خود رها کنید.

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

– اضافه کردن فونت آیکون در وردپرس با صفحه ساز المنتور پرو

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

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

بیشتر بخوانید: آموزش تغییر و افزودن فونت به قالب وردپرس + 7 افزونه تغییر فونت

3- آموزش اضافه کردن Font Awesome به صورت دستی

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

پس از اینکه آدرس ایمیل خود را وارد و روی گزینه ارسال کلیک کردید، یک ایمیل همراه با یک کد برای شما ارسال می شود. سپس این کد را شما باید درست قبل از تگ </head>  در فایل header.php قالب وردپرس خود کپی و جایگذاری نمائید. کد شما همانند زیر خواهد بود:

<script src=”https://use.fontawesome.com/123456abc.js”></script>

این روش بسیار ساده است، اما از طرفی می تواند باعث تداخل با سایر افزونه ها شود. یک رویکرد بهتر، بارگیری صحیح جاوا اسکریپت در وردپرس با استفاده از مکانیزم صف بندی داخلی می باشد. برای انجام دادن اینکار، شا می توانید کد زیر را در فایل functions.php  قالب خود یا در یک افزونه مخصوص سایت اضافه نمائید: