چگونه به راحتی فونت های آیکون را در قالب وردپرس خود اضافه کنیم

آیا می خواهید قلم های آیکون را در سایت وردپرس خود اضافه کنید؟ اخیراً یکی از خوانندگان ما پرسیده است که ساده ترین راه برای افزودن فونت های آیکون در قالب وردپرس خود چیست؟

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

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

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

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

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

چندین فونت آیکون منبع آزاد و رایگان در دسترس است که دارای صدها آیکون زیبا است.

در واقع ، هر نصب وردپرس با dashicons . این نمادها در منوی سرپرست وردپرس و سایر مناطق داخل منطقه مدیر وردپرس استفاده می شود

برخی دیگر از فونت های معروف آیکون عبارتند از:

به خاطر این آموزش ، ما از Font Awesome استفاده خواهیم کرد. محبوب ترین فونت رایگان و منبع باز آیکون موجود است. ما از FontAwesome در وب سایت WPBeginner و همچنین افزونه های وردپرس خود مانند OptinMonster ، WPForms ، رافل پرس و غیره

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

افزودن قلم های نماد در وردپرس با استفاده از پلاگین ها h4>

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

اولین کاری که باید انجام دهید این است که افزونه Font Awesome برای وردپرس. برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

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

[icon icon = “موشک”]

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

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

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

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

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

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

2. استفاده از Icon Fonts with a WordPress Page Builder

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

Beaver Builder

Beaver Builder بهترین افزونه صفحه ساز WordPress در بازار. این امکان را به شما می دهد تا بدون نوشتن کدی به راحتی صفحه آرایی سفارشی را در وردپرس ایجاد کنید.

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

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

حتی می توانید تم های کاملاً سفارشی وردپرس را ایجاد کنید بدون نوشتن هیچ کدی با استفاده از محصول Beaver Builder’s Themer.

Elementor Pro

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

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

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

3 افزودن قلم های آیکون به صورت دستی با کد h4> در وردپرس

همانطور که قبلاً اشاره کردیم که فونتهای آیکون فقط فونت هستند و می توانند به سایت شما اضافه شوند مانند این که هر قلم های سفارشی .

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

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

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

روش 1:

این روش دستی بسیار آسان است.

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

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

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

تابع wpb_load_fa () {

wp_enqueue_script ('wpb-fa'، 'https://use.fontawesome.com/123456abc.js'، array ()، '1.0.0'، true)؛

}

add_action ('wp_enqueue_scriptts'، 'wpb_load_fa')؛

روش 2:

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

ابتدا برای بارگیری بسته قلم در رایانه خود باید به وب سایت Font Awesome مراجعه کنید.

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

اکنون ، باید به با استفاده از سرویس گیرنده FTP و به فهرست قالب WordPress خود بروید.

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

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

تابع wpb_load_fa () {

wp_enqueue_style ('wpb-fa'، get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css')؛

}

add_action ('wp_enqueue_scriptts'، 'wpb_load_fa')؛

شما Font Awesome را با موفقیت در قالب وردپرس خود بارگیری کردید.

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

نمایش دستی فونت های نماد در وردپرس h4>

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

نام آیکون را کپی کرده و مانند آن در وردپرس استفاده کنید.

می توانید این نماد را در صفحه سبک طرح زمینه خود مانند این سبک دهید:

.fa-arrow-alt-circle-up {
اندازه قلم: 50px؛
رنگ: # FF6600؛
}

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

     صفحه اصلی 
     کتابخانه 
     برنامه های کاربردی 
     تنظیمات 

iicons-group-item i {
رنگ: # 333؛
اندازه قلم: 50px؛
}
iicons-group-item i: شناور {
رنگ: # FF6600
}