Diseñamos el ícono en Inkscape de acuerdo a los siguientes parámetros:
- Configuramos la página para que la unidad de medida sea pixeles
- Hacemos el dibujo, se agrupa y si coloca de tamaño de 1.000 px
- No usar colores
- Se desagrupa, convertirmos los círculos, cuadrados y figuras Bézier en trayecto: Trayecto-> Trazo a trayecto
- Trayecto->Unión
- Trayecto->Combinar
- Archivo->Limpiar documento
- Guardar como archivo .SVG plano
- Abrir https://fontello.com
- Arrastrar el ícono hasta el área de «Custom icons»
- Seleccionamos el ícono. También se pueden seleccionar otros íconos free (Licencia SIL) que estén disponibles
- Colocar un nombre al proyecto, ejemplo: iconos_dapliw
- Hacer clic en download webfont. El número entre paréntesis indica la cantidad de íconos que deseamos convertir
- Descargamos
- Se descomprime
- Se ubica en la carpeta css, el archivo: nombre_del_proyecto.css
- Se copia el contenido a nuestro archivo .css en la aplicación
- Se renombra:
- [class^=»icon-«]:before, [class*=» icon-«]:before
- Por:
- [class^=»icond-«]:before, [class*=» icond-«]:before
- También se renombran el prefijo «icon» en las clases de los íconos: icon-nombre-ícono por icond-nombre-ícono
- Se copia la carpeta font en el directorio de la aplicación
- En nuestra aplicación se llama al ícono:
- <i class=»icond-nombre_icono»></i>
- Se guarda el archivo: config.json
- Si más adelante se quieren añadir íconos, se diseñan en Inkscape y luego se sube el archivo config.json a Fontello.com en la opción «Herramientas»->»Import»
- Se arrastran los nuevos íconos y se repite el procedimiento