Después de reemplazar los iconos, tengo problemas para alinearlos

Soporte
1

Seguí este tutorial para reemplazar los iconos

Obtuve los iconos de Android aquí
Material Symbols and Icons - Google Fonts

pero cuando los reemplazo se desalinean como en el ejemplo a continuación

image

image
image383×133 830 Bytes

¿Cómo puedo alinearlos?

2 Me gusta
2

La forma más sencilla de gestionarlo será editando los propios iconos.

Un factor que puedo ver es que el conjunto de iconos que usamos por defecto, FontAwesome, no incluye dimensiones dentro de sus archivos SVG, mientras que Google sí lo hace.

Etiqueta de apertura de FontAwesome:

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

De Google (nota el alto y ancho añadidos alrededor del viewBox)

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

Así que intentaría eliminar el alto/ancho de los iconos de Google… la hoja de sprites resultante se ve así:

<?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>

y el resultado está alineado :tada:

Screenshot 2023-03-06 at 4.05.37 PM

2 Me gusta
3

Gracias por tu ayuda, lo hice aquí y funcionó, pero hay algunos iconos svg que, incluso si los elimino, siguen siendo grandes, como los de abajo

<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

¿tengo que quitar algo más para hacerlo más pequeño?

1 me gusta
4

Ahora me he dado cuenta de que si descargo los iconos SVG de Google Fonts, ya no aparecen con el viewbox como venían antes, ¿por qué es eso? ¿tendría algo que ver?

1 me gusta
5

Antes, el SVG del icono del espacio de trabajo era así, con un viewBox (solo tuve que quitar la altura y la anchura y todo funcionó bien)

<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.31-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"/></svg>

ahora se descarga así, sin viewBox y es demasiado grande en el sitio web

<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"/></svg>
2 Me gusta
6

Sí, esto podría estar causando algunos problemas, es extraño que se haya eliminado… ¿Me pregunto si Google cambió algo? Puedes intentar mover el alto/ancho a los valores de viewBox en su lugar, se vería así:

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

2 Me gusta
7

¡Ahora funciona, muchas gracias por ayudarme!

8

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