بعد استبدال الأيقونات أواجه مشكلة في محاذاتها

الدعم
1

لقد اتبعت هذا البرنامج التعليمي لاستبدال الأيقونات

لقد حصلت على أيقونات Android هنا
Material Symbols and Icons - Google Fonts

ولكن عندما يتم استبدالها، فإنها تصبح غير محاذاة كما في المثال أدناه

image

image
image383×133 830 Bytes

كيف يمكنني محاذاتها؟

إعجابَين (2)
2

ستتم إدارة هذا بسهولة عن طريق تعديل الأيقونات نفسها.

أحد العوامل التي أراها هو أن مجموعة الأيقونات التي نستخدمها افتراضيًا، FontAwesome، لا تتضمن أبعادًا داخل ملفات SVG الخاصة بها بينما تفعل Google ذلك.

علامة الفتح الخاصة بـ FontAwesome:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

الخاصة بـ Google (لاحظ إضافة الارتفاع والعرض حول viewBox)

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">

لذا سأحاول إزالة الارتفاع/العرض من أيقونات Google… تبدو ورقة الأيقونات الناتجة كما يلي:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="google-bars" viewBox="0 96 960 960" ><path d="M150 816q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 756h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 816H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 336h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 396H150Z" /></symbol>
</svg>

والنتيجة متوازنة :tada:

Screenshot 2023-03-06 at 4.05.37 PM

إعجابَين (2)
3

شكراً لمساعدتك، لقد قمت بذلك هنا وعمل، ولكن هناك بعض أيقونات SVG التي حتى لو قمت بإزالتها، تظل كبيرة، مثل الأيقونات أدناه

<symbol id="baloon">
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M17.45 43.35v-10.4h-.8q-5.25.05-8.725-3.375Q4.45 26.15 4.45 21q0-5.15 3.575-8.75 3.575-3.6 8.725-3.6h3.2l-3.8-3.85 2-2.05 7.4 7.4-7.4 7.4-2-2.05 3.8-3.9h-3.2q-3.9 0-6.65 2.75Q7.35 17.1 7.35 21q0 4 2.775 6.7t6.725 2.7h3.5v5.9l5.95-5.9h5q3.9 0 6.65-2.75 2.75-2.75 2.75-6.7 0-3.9-2.775-6.65-2.775-2.75-6.675-2.75H29.5v-2.9h1.75q5.15 0 8.75 3.575 3.6 3.575 3.6 8.725 0 5.15-3.575 8.75-3.575 3.6-8.725 3.6h-3.75Z"/>
</svg>
</symbol>

<symbol id="points">
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M11.3 35.15q3.05-2.1 6.125-3.25T24 30.75q3.5 0 6.575 1.15t6.225 3.25q2.1-2.65 3.1-5.35 1-2.7 1-5.8 0-7.15-4.875-12.025T24 7.1q-7.15 0-12.025 4.875T7.1 24q0 3.1 1 5.8 1 2.7 3.2 5.35Zm12.7-9.4q-2.95 0-4.975-2.025Q17 21.7 17 18.75q0-2.95 2.025-4.975Q21.05 11.75 24 11.75q2.95 0 4.975 2.025Q31 15.8 31 18.75q0 2.95-2.025 4.975Q26.95 25.75 24 25.75Zm0 18.05q-4.1 0-7.675-1.55t-6.275-4.275q-2.7-2.725-4.275-6.3Q4.2 28.1 4.2 23.95q0-4 1.575-7.6 1.575-3.6 4.275-6.325t6.275-4.275Q19.9 4.2 24.05 4.2q4 0 7.6 1.575 3.6 1.575 6.3 4.275 2.7 2.7 4.275 6.3Q43.8 19.95 43.8 24q0 4.1-1.55 7.675t-4.275 6.275q-2.725 2.7-6.325 4.275Q28.05 43.8 24 43.8Zm0-2.9q2.7 0 5.35-.85 2.65-.85 5.1-2.8-2.4-1.75-5.075-2.65-2.675-.9-5.375-.9t-5.375.9q-2.675.9-5.025 2.65 2.4 1.95 5.05 2.8 2.65.85 5.35.85Zm0-18.1q1.75 0 2.9-1.15t1.15-2.9q0-1.75-1.15-2.9T24 14.7q-1.75 0-2.9 1.15t-1.15 2.9q0 1.75 1.15 2.9T24 22.8Zm0-4.05Zm0 18.5Z"/>
</svg>
</symbol>

image

هل يجب أن أزيل شيئًا آخر لأجعلها أصغر؟

إعجاب واحد (1)
4

لاحظت الآن أنه إذا قمت بتنزيل أيقونات SVG من Google Fonts ، فإنها لم تعد تظهر مع مربع العرض (viewbox) كما كانت من قبل ، فلماذا؟ هل لهذا علاقة بالأمر؟

إعجاب واحد (1)
5

في السابق، كان رمز مساحة العمل بصيغة SVG كالتالي، مع مربع عرض (كنت بحاجة فقط إلى إزالة الارتفاع والعرض وكان كل شيء على ما يرام)

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M230.693 931.614q-62.886 0-105.596-42.711-42.711-42.71-42.711-105.596 0-62.885 42.711-105.595 42.71-42.711 105.596-42.711 62.885 0 105.595 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.595 42.711Zm499.422 0q-62.693 0-105.596-42.711-42.903-42.71-42.903-105.596 0-62.885 42.903-105.595 42.903-42.711 105.596-42.711 62.693 0 105.404 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.404 42.711Zm-499.497-58.383q37.228 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.31-26.385-63.539-26.385-37.228 0-63.613 26.31-26.385 26.31-26.385 63.539 0 37.228 26.31 63.613 26.31 26.385 63.539 26.385Zm499.23 0q37.229 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.309-26.385-63.346-26.385-37.036 0-63.613 26.31-26.48 26.385-26.48 63.368 0 37.228 26.481 63.613 26.481 26.385 63.368 26.385Zm-249.04-360.847q-62.693 0-105.596-42.903-42.903-42.903-42.903-105.596 0-62.693 42.903-105.404t105.596-42.711q62.693 0 105.403 42.711 42.711 42.711 42.711 105.404t-42.711 105.596q-42.71 42.903-105.403 42.903ZM480.54 454q37.229 0 63.614-26.48 26.385-26.481 26.385-63.368 0-37.229-26.31-63.613-26.31-26.385-63.346-26.385-37.037 0-63.614 26.31-26.577 26.309-26.577 63.346 0 37.036 26.481 63.613Q443.653 454 480.54 454Zm.075-89.923Zm249.308 419.23Zm-499.23 0Z"/\u003e\u003c/svg\u003e

الآن يتم تنزيله هكذا، بدون مربع عرض وهو كبير جدًا على الموقع

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11.55 41.8q-3.15 0-5.3-2.15t-2.15-5.3q0-3.15 2.15-5.275 2.15-2.125 5.3-2.125t5.275 2.125Q18.95 31.2 18.95 34.35q0 3.15-2.125 5.3T11.55 41.8Zm24.95 0q-3.15 0-5.275-2.15-2.125-2.15-2.125-5.3t2.125-5.275Q33.35 26.95 36.5 26.95q3.15 0 5.275 2.125Q43.9 31.2 43.9 34.35q0 3.15-2.125 5.3T36.5 41.8Zm-24.95-2.95q1.85 0 3.175-1.3 1.325-1.3 1.325-3.2 0-1.85-1.325-3.175Q13.4 29.85 11.55 29.85q-1.85 0-3.175 1.325Q7.05 32.5 7.05 34.35q0 1.85 1.3 3.175 1.3 1.325 3.2 1.325Zm24.95 0q1.85 0 3.175-1.3Q41 36.25 41 34.35q0-1.85-1.325-3.175Q38.35 29.85 36.5 29.85q-1.85 0-3.175 1.325Q32 32.5 32 34.35q0 1.85 1.325 3.175Q34.65 38.85 36.5 38.85ZM24.05 20.8q-3.15 0-5.3-2.125T16.6 13.4q0-3.15 2.15-5.275Q20.9 6 24.05 6t5.275 2.125Q31.45 10.25 31.45 13.4q0 3.15-2.125 5.275Q27.2 20.8 24.05 20.8Zm0-2.9q1.85 0 3.175-1.325Q28.55 15.25 28.55 13.4q0-1.85-1.325-3.175Q25.9 8.9 24.05 8.9q-1.85 0-3.175 1.325Q19.55 11.55 19.55 13.4q0 1.85 1.325 3.175Q22.2 17.9 24.05 17.9Zm0-4.5ZM36.5 34.35Zm-24.95 0Z"/\u003e\u003c/svg\u003e
إعجابَين (2)
6

نعم، قد يكون هذا يسبب بعض المشاكل، من الغريب أنه تمت إزالته… أتساءل عما إذا كانت جوجل قد غيرت شيئًا؟ يمكنك محاولة نقل الارتفاع/العرض إلى قيم viewbox بدلاً من ذلك، سيبدو الأمر كالتالي:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">

إعجابَين (2)
7

الآن يعمل، شكراً جزيلاً لمساعدتي!

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.