اگر شما در حال کار با آیکون‌های Material Design هستید و متوجه شده‌اید که به درستی برش نمی‌خورند، نگران نباشید. این مشکل معمولاً به دلیل تنظیمات CSS یا HTML نادرست در وب‌سایت شما رخ می‌دهد. در این یادداشت، به بررسی علت‌های احتمالی این مشکل و ارائه راه‌حل‌های ساده و کاربردی می‌پردازیم تا بتوانید به راحتی آیکون‌های مورد نظر خود را به درستی نمایش دهید.
اولین گام در رفع این نوع مشکل، بررسی اندازه و موقعیت‌یابی (positioning) آیکون‌ها در صفحه است. معمولاً استفاده نادرست از واحدهای اندازه‌گیری یا موقعیت‌یابی نسبی می‌تواند باعث شود که آیکون‌ها به شکلی عادی دیده نشوند. به‌طور مثال، اگر از ویژگی position استفاده کرده‌اید باید مطمئن شوید که از واحدهای اندازه‌گیری دقیق مثل rem یا em برای سایر خصوصیات نیز استفاده شده است.
گام دوم بررسی درست عمل کردن فونت آیکون‌ها می‌باشد. اطمینان حاصل کنید که لینک صحیحی به نوروحله Material Icons خود افزوده‌اید. هرگونه خطا در این مرحله می‌تواند باعث شود که آیکون‌ها به درستی در صفحه ظاهر نشوند.
به علاوه، استفاده نادرست از CSS سفارشی که شما یا تیم توسعه شما بر روی سایت اعمال کرده‌اید نیز می‌تواند باعث ایجاد این مشکل شود. اطمینان پیدا کنید که فایل CSS شما از ویژگی‌های درست و هماهنگ با Material Icons استفاده می‌کند.
در نهایت، اگر باز هم نمی‌توانید مشکل را حل کنید، ممکن است نیاز به بررسی راهنمای آنلاین یا مستندات رسمی Material Design داشته باشید یا حتی ایده‌های رفع عیب دیگر R&D تیم توسعه خریداری کنید.
نمونه کد کاربردی
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استفاده از آیکون‌های Material Design</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
.icon {
font-size: 48px;
color: blue;
}
</style>
</head>
<body>
<i class="material-icons icon">face</i>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html>
این خط نشان می‌دهد که صفحه وب به زبان HTML نوشته شده است.
<html lang="fa">
این کد نشان‌دهنده این است که زبان محتوای صفحه فارسی است.
<head>
این بخش شامل متا دیتاهای صفحه، لینک‌ها و استایل‌گذاری‌ها است.
<title>...</title>
عنوانی که در نوار بالای مرورگر نمایش داده می‌شود.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
این خط لینک به فونت‌های آیکون Material را فراهم می‌کند.
<style> ... </style>
این بخش برای اضافه کردن CSS داخلی که ظاهر آیکون‌ها را تعریف می‌کند.
.icon {
font-size: 48px;
color: blue;
}
کلاس CSS برای تنظیم اندازه و رنگ آیکون.
<body>
این خط بخش بدنه صفحه را شروع می‌کند که محتوای سایت در آن قرار می‌گیرد.
<i class="material-icons icon">face</i>
این خط یک آیکون با استفاده از فونت Material Icons نشان می‌دهد.
</body>
پایان بخش بدنه صفحه.
</html>
پایان صفحه HTML.