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

مشکل نمایش نشدن آیکون‌های دو تنی متریال در کروم

اگر در پروژه‌ای که دارید کار می‌کنید، با مشکلی مواجه شده‌اید که آیکون‌های دو تنی متریال در مرورگر کروم نمایش داده نمی‌شوند، این به معنای وجود یک مشکل خاص در نحوه بارگذاری یا ساختار فایل‌های CSS یا جاوا اسکریپت شما می‌تواند باشد. هرچند نمایش ندادن آیکون‌ها در مرورگر کروم می‌تواند واقعاً ناامید کننده باشد، اما جای نگرانی نیست، اغلب می‌توان این مشکل را با چند قدم ساده برطرف کرد.

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

مطمئن شوید که ارجاعات شما به فایل‌های CSS و فونت‌ها به درستی در HTML جایگذاری شده‌اند. یک شیوه معمول دو رده مختلف استفاده کدهای لینک و لینک‌دینک است. اطمینان حاصل کنید که منابع از پروتکل امن HTTPS استفاده می‌کنند چرا که بسیاری از مرورگرها ارجاعات به HTTP را از نقطه نظر امنیتی مسدود می‌کنند.

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

در اینجا ما یک مثال ساده را بررسی می‌کنیم:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

<div><span class="material-icons-two-tone">face</span></div>

در کد فوق: