Estoy trabajando en el código heredado, hay una lista de íconos iconmoon.
Necesito agregar uno nuevo: el icono de "cruz"
Encontré el ícono I en iconmoon
Descargo ese icono como FONT
Pero, ¿cómo fusionarlo con el resto de los iconos ya existentes?
... ICNOMON.svg file ... rest of icons, <glyph unicode=" " glyph-name="cross" d="M465.917 207.36c-35.84 0-66.5....." /> .icon-cross:before { content: "\\e90a"; }unicode del glifo sea correctoSi el nuevo ícono debe asignarse a Unicode "e90a", debe actualizar el atributo Unicode del glifo en consecuencia:
Ejemplo de fuente svg
<svg xmlns="http://www.w3.org/2000/svg"> <metadata>Generated by IcoMoon</metadata> <defs> <font id="icomoon" horiz-adv-x="1024"> <font-face units-per-em="1024" ascent="878" descent="-146" /> <missing-glyph horiz-adv-x="1024" /> <!--space--> <glyph unicode=" " horiz-adv-x="200" d="" /> <!--heart--> <glyph unicode="" glyph-name="heart" horiz-adv-x="922" d="M461-80q-13 0-23 9l-321 309q-1 1-19.5 20t-40 50.5-39.5 73-18 87.5q0 114 65 177.5t181 63.5q34 0 66-11.5t60-29 51-37 38-34.5q15 15 38 34.5t51 37 60 29 66 11.5q116 0 181-63.5t65-177.5q0-31-8.5-59.5t-21-54-28-46.5-28.5-36.5-22-24.5l-10-10-321-309q-9-9-22-9z" /> <!--new cross icon--> <glyph unicode="" glyph-name="cross" horiz-adv-x="684" d="M403 306l261-261-61-61-261 261-261-261-61 61 261 261-261 261 61 61 261-261 261 261 61-61z" /> </font> </defs> </svg>Dado que las fuentes svg están en desuso (o ya no son compatibles con la mayoría de los navegadores modernos), debe compilar una nueva fuente de icono de su svg editado.
Importe su svg en icomoon mediante el botón "Importar iconos"
Seleccione todos los glifos que desea importar
haga clic en "Generar fuente"
Opcional: puede editar nombres Unicode y glifos (solo es necesario para el css generado automáticamente)
Descomprima el paquete y agregue sus archivos de fuentes actualizados a su carpeta de fuentes
asegúrese de que su regla @font-face sea correcta (si se cambió el nombre del archivo de fuente)
@font-face { familia de fuentes: 'icomoon'; src: url('fuentes/icomoon.woff?z6h4tt') format('woff'), url('fuentes/icomoon.ttf?z6h4tt') format('truetype'); peso de fuente: normal; estilo de fuente: normal; visualización de fuente: bloque; }
También recomiendo preferir el formato woff más pequeño.
(El css generado por icomoon todavía prioriza el tipo verdadero).
Ahora debería poder colocar su icono así:
.cross:before { content: "\e90a"; }