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

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

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

فونت آیکون چیست؟

فونت های آیکون نوعی فونت هستند که شامل نمادها و علامت ها می باشد. انها از اعداد یا حروف استفاده نمی کنند. این بسیار محبوب شده است زیرا می توان به راحتی با استفاده از CSS به آن استایل داد. می‌توانید فونت‌های آیکون را به صورت متن معمولی استایل دهید. فونت های آیکون بسیار سریعتر از نمادهای مبتنی بر تصویر هستند که سرعت وب سایت شما را کاهش نمی دهند. بنابراین فونت های آیکون به شما در سرعت کلی وب سایت شما کمک می کنند.

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

• Font Awesome
• IconMoon
• Materialicons

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

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

اضافه کردن نمادهای فونت عالی با استفاده از یک افزونه

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

برای اضافه کردن Font Awesome باید افزونه Font Awesome WordPress را نصب و فعال کنید. پس از فعال سازی افزونه، به طور خودکار پشتیبانی Font Awesome را برای تم شما فعال می کند. اکنون باید از کد کوتاه برای افزودن آیکون در پست ها و صفحات وب سایت خود استفاده کنید. کد کوتاه نماد باید به شکل زیر باشد :

[icon name=”stroopwafel”]

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

بلوک کد کوتاه

اگر از ویرایشگر کلاسیک استفاده می کنید، می توانید از دکمه Font Awesome برای اضافه کردن نماد مورد نظر خود استفاده کنید. روی دکمه Add Font Awesome کلیک کنید و کتابخانه نماد باز می شود.

افزودن فونت

اکنون از کتابخانه آیکون، روی هر یک از نمادهایی که می خواهید اضافه کنید، کلیک کنید.

کتابخانه ایکون font-awesome

کد کوتاه آن نماد را در ویرایشگر کلاسیک شما اضافه می کند.

اضافه کردن ایکون

اکنون می توانید پیش نمایش پست را مشاهده کنید تا آیکون را در عمل مشاهده کنید.

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

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

ویجت نماد Elementor

فونت آیکون را در وردپرس به صورت دستی اضافه کنید

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

برای این کار باید کد جاسازی را از Font Awesome دریافت کنید. به وب سایت Font Awesome بروید و آدرس ایمیل خود را برای دریافت کد جاسازی وارد کنید.

جاسازی فونت عالی

کد جاسازی شده را برای شما ایمیل می کند و باید کد را در فایل header.php تم خود اضافه کنید. این کد جاسازی کتابخانه Font Awesome را مستقیماً از سرور CDN خود نشان می دهد. کد جاسازی باید به این شکل باشد :

<script src=”https://use.fontawesome.com/1f7944234c.js“></script>

This is the easiest method to add Font Awesome manually to your website. But sometimes this method creates conflicts in other plugins. So the best way is to add the following code in your function.php file.

function wpb_load_fa() {

wp_enqueue_script( ‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array(), ‘1.0.0’, true );}

add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’ );

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