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

احتمالا شما هم تا به امروز به این مشکل در المنتور برخورد کرده‌اید که یک آیکون دلخواه را از اینترنت می‌گیرید و در سایت خودتان بارگذاری میکنید اما تنظیمات استایل آیکون المنتور بر روی آن اعمال نمیشود و رنگ آن آیکون ثابت است و هیچ تغیییری نمی‌کند. در این مقاله بطور کامل به رفع این مشکل می‌پردازیم و می‌بینیم که چطور میتوانیم آیکون‌های شخصی خود را بهینه و اصلاح کنیم تا با المنتور کاملا سازگار و هماهنگ باشند و تنظیمات بخش استایل آیکون در المنتور از جمله رنگ و اندازه را بپذیرند و بخوبی رنگ و ابعادشان با المنتور تغییر کند.
رفع مشکل عدم تغییر رنگ آیکون‌های شخصی در المنتور
(امتیاز 4.8 از 5 رای)
4.8/5

یکی از مشکلاتی که ما در المنتور با آن مواجه هستیم این است که زمانی که هیچکدام از فونت آیکون‌های المنتور پاسخگوی نیاز ما در طراحی نیست، به سراغ سایت‌های دانلود آیکون نظیر 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 in Adobe Illustrator

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

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

تنظیمات svg options در نرم افزار ایلوستریتور

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

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

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

Open Svg File With Text Editor

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

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

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

قسمت PASTE MARKUP سایت SVGOMG برای واردکردن کدهای آیکون SVG

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

پیش نمایش آیکون در سایت svgomg

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

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

تنظیمات کدهای آیکون در سایت svgomg

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

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

Copy as text in SVGOMG

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

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

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

fill="#3b82f6"

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

نمایش کدهای ایکون svg در نرم افزار ویرایش متن و یافتن کد رنگی آیکون

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

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

به این مقاله امتیاز دهید
(برحسب میزان رضایت خود از محتوای این مقاله، به آن از 1 تا 5 ستاره دهید)

امتیاز 4.8 از 5 رای

اولین نفری باش که امتیاز خودت رو ثبت می‌کنی!

جدیدترین مقالات
پرسش و دیدگاه

پس از بررسی سریع و پاسخگویی توسط کارشناسان، به شما اطلاع‌رسانی می‌گردد.

اشتراک در
اطلاع‌رسانی به من هنگامی که :
guest
4 دیدگاه
بازخورد (Feedback) های اینلاین
دیدن تمامی دیدگاه‌ها
جدیدترین مقالات

5 مقاله اخیر از این قسمت برای شما در دسترس است

نحوه انتقال دامنه به هاست دیگر یا تغییر مالکیت دامنه
انتقال دامنه
نصب وردپرس روی لوکال هاست در 6 گام، راحت‌ترین روش!
نصب وردپرس روی لوکال هاست زمپ
لوکال هاست چیست و برای طراحان سایت چه کاربردی دارد؟
لوکال هاست چیست و چه کاربردی دارد؟
آموزش نصب افزونه در وردپرس به 3 روش حرفه‌ای
آموزش نصب افزونه در وردپرس به 3 روش حرفه‌ای
چگونه اینماد را در سایت وردپرسی نمایش دهیم؟
قرار دادن اینماد در سایت وردپرسی
فهرست
Search