آیکون های وردپرس: با فونت های آیکون وردپرس و روش آپلود آنها آشنا شوید

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

آیا به تمام نمادها توجه کردید؟ روی وب سایت ما؟ یکی از آنها نماد خانه است روی نوار ناوبری

خوب، اگر می خواهید نمادهایی مانند این را به وب سایت خود اضافه کنید – بنشینید و استراحت کنید، زیرا ما به شما آموزش می دهیم که چگونه دقیقاً این کار را انجام دهید.

چرا آیکون؟

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

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

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

فونت های آیکون تصاویر برداری هستند. بنابراین آنها بی نهایت مقیاس پذیر هستند.

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

آنها ساده و نسبتا آسان برای اجرا هستند. علاوه بر این، فونت‌های آیکون به شما امکان می‌دهند بسیاری از نمادها را در یک فایل ذخیره کنید. این می تواند تعداد درخواست های HTTP را کاهش دهد.

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

فونت آیکون رایگان

چندین منبع فونت آیکون رایگان برای سایت وردپرس شما وجود دارد. شما به سادگی می توانید “قلم نماد” را مرور کنید روی گوگل. IcoFont، فونت عالی، ما فونت های نماد را دوست داریم، و IcoMoon پلتفرم های پیشنهادی هستند.

IcoFont یکی از بزرگترین منابع برای فونت آیکون رایگان است. بیش از 2100 آیکون را در یک فونت ارائه می دهد که در 30 دسته طبقه بندی شده اند. همچنین به شما امکان می دهد بسته آیکون سفارشی خود را نیز ایجاد کنید.

شما به سادگی می توانید آیکون ها را از سایت IcoFont دانلود کنید – یا با کپی کردن کد HTML یا کلیک کردن روی دکمه دانلود از ناوبری سایت.

به سادگی نمادهایی را که انتخاب کرده اید مرور کنید، آنها را به مجموعه خود اضافه کنید و آنها را دانلود کنید. پس از دانلود، یک فایل فشرده شامل CSS، مثال ها و فونت ها دریافت خواهید کرد. تکه‌های HTML نمادهای دانلود شده با Unicode آنها در پوشه نمونه جفت می‌شوند.

اگر می خواهید مستقیماً از آنها استفاده کنید روی در وب، می توانید کل فهرست IcoFont را در پوشه پروژه خود کپی کنید. حتما مکان را به محل مورد نظر خود ارجاع دهید icofont.min.css. در سربرگ

یکی دیگر از منابع پرکاربرد فونت آیکون است فونت عالی. بیش از 1500 آیکون رایگان و بیش از 5000 نماد نسخه پیشرفته را ارائه می دهد که بیش از 70 نوع آیکون را با چهار سبک اصلی – جامد، معمولی، سبک، مارک ها پوشش می دهد.

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

آخرین موضوع ولی به همان اهمیت، IcoMoon بیش از 5500 نماد وکتور رایگان و بیش از 4000 آیکون ممتاز را ارائه می دهد. همچنین می توانید فونت IcoMoon خود را بسازید و فایل SVG خود را با استفاده از آن آپلود کنید import ویژگی.

سریع ترین روش های استفاده از آیکون ها روی وردپرس

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

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

استفاده از افزونه وردپرس ساده ترین راه برای افزودن فونت آیکون به سایت وردپرسی خود بدون نیاز به تغییر کد است. اول از همه، شما باید رایگان را نصب و فعال کنید افزونه Font Awesome Integration. پس از اتمام نصب و فعال سازی آن، می توانید آیکون های فونت را با کد کوتاه خود اضافه کنید – [fawesome]. بیایید وارد جزئیات شویم.

چهار ویژگی در کد کوتاه وجود دارد:

• هدف – هدف از ‘آ’ برچسب زدن
• href – پیوند برای استفاده در ‘آ’ برچسب زدن
• iclass – کلاس هایی برای استفاده در /من/ برچسب زدن
• یک کلاس – کلاس هایی برای استفاده در ‘آ‘ برچسب

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

در اینجا ما باید کد نماد را قرار دهیم – (فا-وردپرس)– به درون iclass برچسب و لینک http://wordpress.org/ به درون ahref برچسب:

[fawesome iclass="fab fa-wordpress" ahref="https://wordpress.com"]

توجه داشته باشید که در این مثال، پیشوند fab را به آن اضافه می کنیم iclass. ما پیشوندهای سبک را بعداً با ارائه یک برگه تقلب به شما پوشش خواهیم داد.

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

بیایید از یک نماد وردپرس رایگان در دسترس استفاده کنیم روی فونت Awesome را بنویسید و آن را قرار دهید روی یک پست وردپرس به عنوان نمونه.

ابتدا به سادگی وردپرس انتخابی را کپی کنید کد آیکون از Font Awesome:

<i class="fab fa-wordpress"></i>

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

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

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

پیشنهاد می‌کنیم بخوانید:  آشنایی با برنامه های وب پیشرفته Magento و ایجاد یک فروشگاه

دستور دستور به این صورت است:

<i class=”style_prefix fa-icon name></i>

یا،

<span=”style_prefix fa-icon_name></span>

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

سبک	دسترسی	پیشوند سبک	مثال
جامد	رایگان	فاس	<i class="fas fa-icon_name"></i> <span class="fas fa-icon_name"></span>
منظم	حرفه ای	دور	<i class="far fa-icon_name"></i> <span class="far fa-icon_name"></span>
سبک	حرفه ای	فال	<i class="fal fa-icon_name"></i> <span class="far fa-icon_name"></span>
برندها	رایگان	عالی	<i class="fab fa-icon_name"></i> <span class="far fa-icon_name"></span>

استفاده از Dashicon ها

صرف نظر از فونت های آیکون منبع باز موجود روی در اینترنت، وردپرس در واقع دارای Dashicons است – یک بسته فونت آیکون پیش‌فرض داخلی برای هر سایت وردپرس. با وردپرس 3.8 معرفی شد.

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

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

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

با آن، شما می توانید به وب سایت Dashicons و موردی را که می خواهید استفاده کنید انتخاب کنید. برای ادغام آن روی وب سایت خود را، می توانید کلیک کنید “HTML را کپی کنید” پیوند دهید، و کد را دریافت می کنید – به سادگی آن را کپی و در عنصر وردپرس خود قرار دهید.

به عنوان مثال، اجازه دهید داشیکون ها-بلیت ها نماد از داشیکن ها دایرکتوری و آن را به یک پست وردپرس اضافه کنید. HTML را کپی کرده و در بلوک HTML قرار دهید. به این شکل خواهد بود: پس از کلیک بر روی “پیش نمایش”، نماد زیر را مشاهده خواهید کرد:

برای سفارشی سازی بیشتر Dashicon ها، می توانید از CSS استفاده کنید.

نتیجه

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

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

برخی از منابع توصیه شده برای دریافت فونت نمادها عبارتند از:

1. IcoFont
2. فونت عالی
3. ما عاشق فونت های آیکون هستیم
4. IcoMoon

به جای افزودن دستی فونت‌های آیکون، می‌توانید از سریع‌ترین و ساده‌ترین راه برای افزودن آنها استفاده کنید:

1. با استفاده از افزونه Font Awesome Integration
2. استفاده از Dashicon های داخلی وردپرس با افزونه های Code Snippets

تنها کاری که باید انجام دهید این است که کد HTML نمادهایی را که می خواهید استفاده کنید، کپی و جایگذاری کنید روی منطقه مورد نظر سایت شما

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

صفحه سازهای وردپرس
لوکال هاست وردپرس
اسلایدرهای وردپرس
اندازه تصویر وردپرس
محیط صحنه سازی وردپرس
روش تغییر اندازه فونت در وردپرس