انتخاب المنتور به عنوان یک صفحه ساز قوی برای ساخت صفحات سایت یک روش کارآمد و منطقی است. چرا که از زمان پیدایش این افزونه تاکنون، با روند رو به رشدی که در زمینهی طراحی سایت داشته، توانسته است نیازهای کاربران خود را مرتفع سازد.
شما به کمک المنتور هر چیزی را که در ذهن دارید میتوانید به راحتی پیادهسازی کنید. امکانات و ویژگی های متنوع و گستردهی این افزونه، هر کاربری را از افزونه های دیگر بی نیاز میسازد. ما در سری آموزش های قبلی، در مورد آموزش المنتور و دوره جامع بدون کدنویسی به طور کامل صحبت کردیم و مرحله به مرحله بهصورت تصویری آن را توضیح داده ایم.
بنابراین در این مقاله تصمیم داریم ساخت آیکون سفارشی در المنتور را آموزش دهیم، تا از این پس بتوانید در کنار طراحی های خود از آیکون های سفارشیشده و خلاق استفاده کرده و Ux جذابی را برای مخاطبین خود خلق کنید.
چگونه میتوان در المنتور آیکون سفارشی ساخت؟
اجازه دهید موضوع ساخت آیکون سفارشی در المنتور را با یک مثال شروع کنیم.
فرض کنید در حال طراحی صفحات تماس با ما، یا درباره ما سایت خود هستید، و قرار هست در قسمتهایی از محتوای خود ایمیل، شماره تماس، آدرس و … بگذارید. یا اینکه در صفحهی فروشگاه و خدمات خود آیکون های مربوط به محصولات و خدمات را درج کنید. اگر در کنار هر یک از این آیتمها، آیکون مخصوص به آنها را قرار دهید، آیا طراحی شما را خاص و متفاوت تر نمیکند؟
البته تمام کاربرد آیکون های سفارشی به این مثال خلاصه نمیشود و غیر از همین موارد برای بخشهای مختلفی نیز نیازمند استفاده از آیکونها خواهیم بود. زیرا همانطور که میدانید به کمک همین المانها و ویجت هاست که میتوانیم طراحی جذاب و پویایی را جایگزین یک طراحی بیروح و خسته کننده کنیم.
شایان ذکر است که با خرید المنتور پرو، شما به کتابخانه بزرگی از آیکون های Font Awesome در آن دسترسی خواهید داشت. اما از آنجایی که ممکن است این آیکون ها مورد استفاده شما نباشند و یا اینکه شما بخواهید آیکون های شخصی سازی شدهی دیگری را در سایت خود داشته باشید، بنابراین میتوانید از افزونه های مختص این کار استفاده کنید. و سپس آنها را به کتابخانهی آیکون ها اضافه نمایید.
بنابراین با ما همراه باشید تا ساخت آیکون های سفارشی در المنتور را به کمک Custom Icons بررسی کنیم.
معرفی Custom Icons المنتور | نحوه ی ساخت آیکون سفارشی در المنتور
Custom Icons المنتور امکان ساخت آیکون های اختصاصی و سفارشی را برای شما فراهم میکند. البته این قابلیت فقط در نسخه المنتور پرو موجود می باشد که میتوانید از طریق صفحه خرید المنتور پرو اقدام به نصب و راه اندازی کنید .
پس از فعالسازی Custom Icons شما به آیکون های سفارشی المنتور دسترسی خواهید داشت.
نحوه ی ساخت آیکون سفارشی در المنتور به کمک Custom Icons
برای ساخت آیکون های سفارشی لازم است به ترتیب، این دو مرحله را انجام دهید:
مرحله اول | تهیه و دانلود آیکون های موردنظر
برای دسترسی به آیکون ها و تنظیمات آن در Custom Icons المنتور، کافی است به سایت Flaticon.com مراجعه کرده و پس از ثبت نام رایگان در آن، آیکون های دلخواه خود را از میان میلیون ها آیکون، دانلود کنید.
توجه داشتید باشید که بهتر است از آیکون های خطی و تک رنگ استفاده کنید. استفاده از آیکون های رنگی جهت استفاده به عنوان فونت آیکون گزینه های مناسبی نیستند. بر روی هر کدام از تصاویر که کلیک کنید به صفحه دانلود منتقل خواهید شد.
در این قسمت شما می توانید آیکون ها را بهصورت جداگانه دانلود کرده، که در این صورت باید آنها را با فرمت SVG دریافت کنید. و یا با کلیک بر روی دکمه سبز رنگ، کل مجموعه و پکیج را یکجا بهصورت فایل Zip دانلود نمایید.
در مرحله بعد، برای اینکه بتوانید از این آیکون ها در المنتور استفاده کنید باید آنها را به فونت آیکون تبدیل نمایید. بنابراین به سایت fontello.com مراجعه کنید و پکیچ دانلودی با فرمت SVG را در صفحه دراگ کرده تا در سایت آپلود شود.
سپس میتوانید آیکون های انتخابی خود را در داخل پکیج و بهصورت یکجا دانلود کنید. حتماً یک نام برای مجموعه فونت آیکون خود انتخاب کرده و یک پیشوند یکتا نیز برای آن در نظر بگیرید.
پس از انجام تنظیمات بر روی دکمه دانلود کلیک کرده و فایل zip را دریافت کنید.
مرحله دوم | اضافه کردن فونت آیکون در المنتور
اکنون زمان آن است که آیکون های سفارشی خود را در المنتور وارد کنیم. ابتدا از قسمت پیشخوان، المنتور را انتخاب کرده و گزینه آیکون های سفارشی یا Custom icon را بزنید.
سپس در صفحه ای که برای شما باز میشود باید فایلی را که از سایت Fontello دریافت کردید، آپلود کنید.
پس از گذشت چند ثانیه، آیکون های آپلود شده به همراه نام آن، را در لیست بهصورت زیر مشاهده خواهید کرد.
بعد از این مرحله کار شما تمام شده و میتوانید یکی از صفحات المنتوری سایتتان را باز کرده و ویجت آیکون را در صفحه قرار دهید.
با کلیک بر روی کتابخانه آیکون، پنجره آیکونها برای شما باز خواهد شد و می توانید پکیج آیکون هایی را که اضافه کرده اید، مشاهده کنید.
جمع بندی نهایی
به خاطر داشته باشید برای اینکه بتوانید ظاهری جذاب برای صفحات و طراحی خود به کمک المنتور داشته باشید، باید از امکانات جانبی مانند ساخت آیکون های سفارشی در المنتور هم استفاده کنید. ما در این آموزش از المنتور سایت سعی کردیم بهصورت کامل مراحل ساخت و آپلود آیکون های سفارشی در المنتور به کمک آیکون های سفارشی را توضیح دهیم.. امیدواریم این مقاله به شما کمک کرده باشد اما چنانچه فکر میکنید نیاز به راهنمایی بیشتری در این زمینه دارید میتوانید از طریق کامنت و راه های ارتباطی با ما در تماس باشید تا در کوتاه ترین زمان ممکن پاسخگوی سؤالات شما باشیم.
در صورت تمایل نیز میتوانید به پست مربوط به بهترین ابزارها و افزونه هایی که یک سئوکار نیاز دارد مراجعه کرده و نظرات خود را برای ما در کامنت بنویسید.
28 پاسخ
استاد سلام خسته نباشید
من از سایت flaticon ایکون SVG دانلود میکنم اما وقتی میخوام همینو تو fontello بارگذاری کنم این ارور رو میده
If image looks not as expected please convert to compound path manually. See wiki.
میشه لطفا راهنمایی کنید
سلام درود بر شما
مشکل از فایل ایجاد شده می باشد
یعنی مشکل از فرمت ایکونای این سایته flaticon ؟
سلام خیر از خروجی فایل zip می باشد
استاد سلام خسته نباشید
من از سایت flaticon ایکون SVG دانلود میکنم اما وقتی میخوام همینو تو fontello بارگذاری کنم این ارور رو میده
If image looks not as expected please convert to compound path manually. See wiki.
میشه راهنمایی کنید
استاد سلام خسته نباشین
من حتی ایکونایی که از خود سایت https://fontello.com/ دانلود میکنم هم تو سایتم نمایش داده نمیشن
فقط اسمشون میاد بدون تصویر
میشه راهنمایی کنید برای حلش چیکار کنیم؟
سلام خدمت شما
معمولاً مشکل برای یکی از این موارد است :
اول مسیر فایلهای فونت داخل CSS را بررسی کنید (آدرس پوشهی font در فایل fontello.css باید دقیق و نسبت به محل CSS درست باشد)
دوم مطمئن شوید فایلهای با پسوند woff, woff2, ttf, svg, eot واقعاً روی هاست آپلود شدهاند و خطای 404 نمیدهند (در DevTools تب Network چک کنید)
سوم اگر سایت روی HTTPS است ولی فونت با HTTP لود میشود خطای Mixed Content میگیرید
چهارم هدر MIME Type سرور برای فونتها باید درست تنظیم شده باشد (مثلاً font/woff2)
پنجم کش مرورگر را پاک کنید یا با Ctrl+F5 تست بگیرید، و در نهایت بررسی کنید کلاس آیکون دقیقاً همان کلاسی باشد که در CSS تعریف شده
سلام من از داخل سایت fontello و icomoon هردو دانلود کردم اصلا این روشها جوابگو نیست طبق آموزش رفتم جلو فقط اسمش میاد و مربع های 4 گوش نمایش میده آموزش به روز بزارین با تشکر
سلام خدمت شما
باید فایل zip بدون تغییر مستقیماً از بخش آیکون سفارشی المنتور آپلود شود نام فونت و prefix دقیقاً مطابق فایل CSS باشد و همچنین charset و MIME type فونتها روی سرور بهدرستی پشتیبانی شوند. در بسیاری از هاستها نیز بهدلیل محدودیت mod_security یا کش، فونت لود نمیشود در غیر این صورت مشکل از سمت سرور یا تنظیمات وردپرس بوده و نیاز به بررسی فنی دارد
سلام خسته نباشین.ادرسhttps://www.flaticon.com/ اجازه دانلود رو به صورت SVG نمیده.
من وقتی ایکون از سایت https://fontello.com/ دانلود میکنم و توی المنتور بارگذاری میکنم عکس ایکون نمیاد فقط اسمش هست
اصن نمایش داده نمیشه
میشه راهنمایی کنید برای حل مشکل
سلام درود بر شما
باید دقت داشته باشید ایکون هایی که استفاده میتونید سازگاری داشته باشند
میشه خواهش کنم راهنماییم کنید یا ادرس سایتیو بدین که ایکون هاش با المنتور سازگاری دارن؟
سلام من آیکن های شبکه های اجتماعی ایرانی با فرمت SVG داخل یک فایل زیپ رو دانلود کردم اما وقتی توی سایت آپلود میکنم خطا میده که بایگانی را نمیتوان از حالت فشرده خارج کرد. (هر فایل زیپی که وارد میکنم همین خطا رو میده) راهنمایی میکنید مشکل از چیه؟
سلام خدمت شما
این خطا معمولاً به یکی از دلایل زیر مربوط است:
۱. فایل ZIP ساختار مناسبی برای آپلود در بخش آیکن سفارشی المنتور ندارد
۲. ممکن است فایل SVG بهدرستی داخل پوشه قرار نگرفته یا فایل زیپ حاوی پوشههای تودرتو باشد
۳. المنتور فقط فرمت خاصی از فایل آیکن (مثل فایلهای ساختهشده توسط Fontello یا IcoMoon) را میپذیرد
سلام و سپاس
آیکون ها دانلود شده اما به صورت نام هست و تصویر نداره و توی سایت هم نشون داده نمیشه
سلام خروجی گرفته شده سازگار نمی باشد باید بررسی کنید
سلام استاد.
چطور میتونم از این آیکون ها در منو موجود در هدر استفاده کنم
سلام المنتور این قابلیت را ندارد یا میتوانید از افزونه جت منو استفاده کنید و یا از افزونه رایگان WP Menu Icon استفاده نمایید. البته قابلیت آیکون کاستوم را ندارد
سلام وقت بخیر
توی المنتور هرچی فایل زیپ رو آپلود میکنم هیچ اتفاقی نمیوفته حتی خطا هم نمیده و آیکونا هم بالا نمیاره روی همئن متن فایل زیپ رو آپلود کنین مونده
مشکل چیه
سلام معمولا این خطا شما متداول نیست و لطفا یکبار افزونه های خود را بروز کنید و چک کنید اگر مشکل رفع نشد احتمالا مشکل از هاست شماست شاید فضا ندارید و …
سلام
این مشکل برای من هم پیش اومده. برای برطرف کردنش باید چیکار کرد؟
سلام parvin
برای رفع مشکل آپلود فایل ZIP در المنتور، این موارد را بررسی کنید:
1.مطمئن شوید المنتور و سایر افزونهها بهروز هستند
2. فضای هاست را بررسی کنید؛ کمبود فضا میتواند مشکلساز باشد
3. مقادیر upload_max_filesize و post_max_size را افزایش دهید
4. افزونههای دیگر را موقتاً غیرفعال کرده و دوباره امتحان کنید
اگر مشکل رفع نشد، با پشتیبانی هاست تماس بگیرید.
سلام اگر ایکن های شبکه های اجتماعی ایرانی میخواهیم استفاده کنیم چه کار باید بکنیم؟
سلام
ابتدا آیکونهای خودتان را پیدا کنید به صورت SVG و بعد طبق ویدیو انجام دهید .
سلام
ویدئو را آپلود نمیکنین؟
ممنون
سلام بله بزودی قرار داده می شود
ویدیو آپلود نشده
سلام وقت بخیر
خیر فعلا ویدیویی ندارد بزودی آموزش ویدیو هم قرار داده خواهد شد .