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

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

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

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

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

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

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

آیکون های وردپرس چیست؟

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

3 نوع آیکون برای وب سایت ها وجود دارد

فونت های آیکون (Font Awesome، Material Design و …) در واقع فونت هستند، اما به جای حروف، نمادهایی دارید. این بدان معنی است که شما می توانید همان خصوصیات را برای هر فونت دیگری اعمال کنید: رنگ، تراز کردن متن یا ویژگی اندازه فونت. با این حال، آن‌ها (در مقایسه با SVG) در مورد انیمیشن چندان انعطاف‌پذیر نیستند.

آیکون های SVG : SVG مخفف “scalable vector graphics” که به فارسی می شود “گرافیک برداری مقیاس پذیر” است، به این معنی که سبک ترین فرمت ممکن برای هر گرافیکی است. به احتمال زیاد طراح وب سایت شما از این قالب در طراحی ها استفاده خواهد کرد.

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

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

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

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

آیکون های SVG در مقابل فونت آیکون ها

قبلاً برای مدتی موضوع بحث بود: کدام یک بهترین است؟ آیکون های SVG به عنوان یک روش ارجح در نظر گرفته می شوند، اما هیچ تفاوت اساسی بین این دو رویکرد وجود ندارد و در بیشتر موارد، می توانید از هر دو استفاده کنید.

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

👈سرعت
اگر هر دو شرکت کننده ما را با هم مقایسه کنید، این فاکتور بسیار مهم چندان متفاوت نیست. فقط اگر اینترنت خیلی بد باشد، SVG ممکن است نتایج بهتری بدهد، فقط به این دلیل که درخواست‌های کمتری ایجاد می‌کنند و کمی سبک‌تر هستند.

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

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

بنابراین، از این منظر، SVG ها بهتر هستند.

اما اگر می خواهید رنگ را تغییر دهید، می توانید این کار را فقط با فونت ها یا SVG های درون خطی (که به ندرت در زندگی واقعی به عنوان آیکون استفاده می کنید) انجام دهید.

با این حال، برای اکثر انیمیشن ها، SVG ها بهتر هستند، زیرا می توانند از تنوع بهتری از انیمیشن ها استفاده کنند.

📢 نمادهای SVG و فونت از بسیاری جهات کاملاً قابل تعویض هستند. تم ها بیشتر از فونت های نماد، به ویژه Font Awesome، به عنوان نماد استفاده می کنند. من حدس می‌زنم این پنل ویجتی را که Elementor ارائه می‌دهد، دیده‌اید، جایی که “آیکون‌ها” در واقع به معنای نمادهای فونت عالی است.

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

ویجت آیکون المنتور

در مورد عملکرد، Elementor اخیراً پیشرفت بزرگی انجام داده است و Font Awesome را به عنوان SVGهای درون خطی نمایش می دهد که می توانید در بخش تنظیمات المنتور به این گزینه دسترسی داشته باشید. برای فعال کردن آن، به المنتور > تنظیمات > ویژگی ها بروید.

دانلود آیکون های زیبا و رایگان!

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

• svgrepo.com
• freeicons.io
• freeicon.com
• icon-icons.com

افزودن فونت آیکون به المنتور

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

دو راه اصلی برای افزودن آیکون های سفارشی به Elementor وجود دارد: استفاده از Elementor Pro یا یک افزونه جانبی وردپرس. اما قبل از آن، باید این آیکون های سفارشی را ایجاد کنید. این کار را می توان با محبوب ترین ارائه دهندگان فونت ، مانند Fontello یا IcoMoon انجام داد.

تولید یک فونت سفارشی

ابتدا، باید یک فونت سفارشی ایجاد کنید، و این ساده‌تر از آن چیزی است که به نظر می‌رسد. من آن را با استفاده از یک مثال Fontello نشان خواهم داد. ابتدا به وب سایت بروید و آیکون های مورد استفاده خود را انتخاب کنید. انتخاب بزرگی وجود دارد، و همچنین می توانید SVG های سفارشی خود را در آنجا اضافه کنید. به سادگی بر روی آیکون های مورد نظر خود کلیک کنید تا به مجموعه شما اضافه شوند.

در صورت تمایل می توانید کد یا نام آنها را در برگه های اختصاصی ویرایش کنید. پس از آن، روی دکمه «Download webfont» کلیک کنید و فونت آیکون سفارشی شما آماده است. وقتی بر روی این دکمه کلیک می کنید، یک فایل زیپ برای شما دانلود می شود که دارای آیکون های دلخواه شما هست و باید این فایل را در المنتور اضافه کنید که در ادامه همراه ما باشید.

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

برای این کار به راحتی به مسیر “المنتور > آیکون های سفارشی” بروید. این منو در پیشخوان وردپرس شما در سمت راست موجود است.

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

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