رفع مشکل عدم تغییر رنگ آیکون‌های شخصی در المنتور

یکی از مشکلاتی که ما در المنتور با آن مواجه هستیم این است که زمانی که هیچکدام از فونت آیکون‌های المنتور پاسخگوی نیاز ما در طراحی نیست، به سراغ سایت‌های دانلود آیکون نظیر flaticon.com یا iconfinder.com و غیره میرویم و یا از یک سایتی آیکون SVG دلخواه و مناسب خودمان را برمیداریم. اما هنگامی که آن را در سایت خودمان بارگزاری میکنیم و می‌خواهیم با المنتور رنگ آن را عوض کنیم یا ابعاد و اندازه آن را تغییر دهیم در کمال تعجب میبینیم که این امکان وجود ندارد و رنگ آیکون SVG ما تغییر نمیکند و ابعاد و اندازه آن به درستی طبق تنظیمات المنتور ست نمی‌شود.

ما با این مشکل در تمامی ویجت های المنتور از جمله آیکن (Icon)، آیکون جعبه (Icon Box)، لیست آیکن (Icon List) و تمامی ویجت های دیگر المنتور و ادان‌های المنتوری وجود دارد. لازم به ذکر است که بگوییم این مشکل هیچ ارتباطی با خود افزونه صفحه‌ساز المنتور و عملکرد آن ندارد و تنها ناشی از خود آیکون SVG مورد نظر ما است.

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

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

ما برای بهینه و آماده‌سازی هر آیکون SVG برای استفاده از آن در المنتور بطور کلی باید 4 گام مهم و اساسی را برداریم:

خروجی گرفتن از آیکون مورد نظر در نرم‌افزار Adobe Illustrator با تنظیمات ایده‌آل و بهینه

ابتدا باید آیکون SVG مورد نظر خود را قبل از آپلود در قسمت رسانه‌های سایت، وارد نرم افزار Adobe Illustrator کنید. (میتوانید با Drag and Drop خیلی راحت آن را بگیرید و داخل محیط برنامه ایلوستریتور بیندازید)

سپس بدون این که لازم باشد با هیچ کدام از ابزار‌های ایلوستریتور کاری بر روی آیکون انجام دهید باد از آن خروجی بگیرید. طبق روند نشان‌داده شده در عکس زیر به راحتی می‌توانید این کار را انجام دهید. (File > Export > Export as)

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

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

بازکردن آیکون SVG با نرم‌افزار ویرایشگر متن و کپی کردن تمامی کدهای داخل آن

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

برای این کار میتوانید روی آیکون SVG مورد نظر راست‌کلیک کرده و سپس با رفتن بر روی گزینه Open With، آیکون SVG را با با یک نرم افزار ویرایش متن همچون NotePad خود ویندوز و یا نرم افزار ++Notepad و یا Visual Studio و یا هر نرم افزار ویرایشگر متن دیگری که دارید باز کنید.

تمامی کدهای نمایش داده شده را انتخاب و کپی کنید. برای این کار شما باید برای انتخاب تمامی محتویات و کدهای نشان‌داده شده کلیدهای ترکیبی Crtl + A را زده و برای کپی کردن آنها کلیدهای ترکیبی Crtl + C را فشاردهید.

اصلاح و بهینه‌سازی نهایی آیکون SVG با استفاده از سایت SVGOMG

در آخرین مرحله کار شما باید به سایت SVGOMG مراجعه کنید و کدی‌های آیکون SVG که قبلا کپی کرده بودید را در قسمت Paste Markup سایت جایگذاری نمایید.

به محض Paste کردن کد آیکون در کادر Paste Markup آیکون شما در سایت SVGOMG نشان‌داده می‌شود که میتوانید با اسکرول کردن، روی آیکون خود Zoom in و Zoom out کنید.

کاری که باید انجام دهید این است از کادر سمت راست گزینه‌ها را مطابق تنظیمات عکس پایین روشن و ست کنید.

(اگر با روشن کردن گزینه‌ها مطابق تنظیمات عکس پایین آیکون شما با مشکل مواجه شد می‌توانید با زدن دکمه Reset All در انتهای پایین کادر سمت راست، تنظیمات را به حالت اولیه بازگردانید و سپس با روشن کردن یکی یکی گزینه‌ها، آن گزینه‌ای که باعث خراب شدن آیکون شما شده است را یافته و از روشن کردن آن خودداری کنید.)

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

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

اکنون باید کدهایی اصلاح و بهینه شده آیکون SVG مورد نظر خود را که از سایت SVGOMG کپی کردید و برداشتید را در همان ویرایشگر متن قبلی خود جایگذاری کنید. برای این کار باید کدهای قدیمی و قبلی آیکون SVG را بطور کامل پاک کنید و سپس با زدن کلیدهای ترکیبی Ctrl + V کدهای جدید را در جای کدهای قبلی Paste کنید و تغییرات را ذخیره کنید. (می‌توانید با زدن کلیدهای ترکیبی Ctrl + S تغییرات را در ویرایشگر متن ذخیره کنید.)

یافتن و پاک کردن کدرنگی آیکون SVG

در آخرین مرحله کار باید در داخل کدهای جدید بدنبال عبارت fill بگردیم و این عبارت را از داخل کد پاک کنیم. با نگاهی به کد میتوانیم یک عبارتی همچون :

fill="#3b82f6"

را بیابیم که زبان ساده به آیکون ما دستور میدهد که رنگ آیکون (fill) باید مقدار کد رنگی 5ca4da# باشد. (مقدار کد رنگی 5ca4da# یک مثال است و شما باید به دنبال کد رنگی آیکون خود باشید.)

هنگامی که این عبارت و مقدار کد رنگی آن را یافتید باید بطور کامل آن را پاک کنید و کد را ذخیره نمایید.

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