{"id":1883,"date":"2022-06-13T01:37:55","date_gmt":"2022-06-13T01:37:55","guid":{"rendered":"https:\/\/dapliw.org\/?p=1883"},"modified":"2022-06-13T01:37:55","modified_gmt":"2022-06-13T01:37:55","slug":"crear-iconos-con-fontello-e-inkscape","status":"publish","type":"post","link":"https:\/\/saemas.com\/sitio_web\/crear-iconos-con-fontello-e-inkscape\/","title":{"rendered":"Crear \u00edconos con Fontello e Inkscape"},"content":{"rendered":"\n<p>Dise\u00f1amos el \u00edcono en Inkscape de acuerdo a los siguientes par\u00e1metros:<\/p>\n\n\n\n<ul><li>Configuramos la p\u00e1gina para que la unidad de medida sea pixeles<\/li><li>Hacemos el dibujo, se agrupa y si coloca de tama\u00f1o de 1.000 px<\/li><li>No usar colores<\/li><li>Se desagrupa, convertirmos los c\u00edrculos, cuadrados y figuras B\u00e9zier en trayecto: Trayecto-> Trazo a trayecto<\/li><li>Trayecto->Uni\u00f3n<\/li><li>Trayecto->Combinar<\/li><li>Archivo->Limpiar documento<\/li><li>Guardar como archivo .SVG plano<\/li><li>Abrir https:\/\/fontello.com<\/li><li>Arrastrar el \u00edcono hasta el \u00e1rea de \u00abCustom icons\u00bb<\/li><li>Seleccionamos el \u00edcono. Tambi\u00e9n se pueden seleccionar otros \u00edconos free (Licencia SIL) que est\u00e9n disponibles<\/li><li>Colocar un nombre al proyecto, ejemplo: iconos_dapliw<\/li><li>Hacer clic en download webfont. El n\u00famero entre par\u00e9ntesis indica la cantidad de \u00edconos que deseamos convertir<\/li><li>Descargamos<\/li><li>Se descomprime<\/li><li>Se ubica en la carpeta css, el archivo: nombre_del_proyecto.css<\/li><li>Se copia el contenido a nuestro archivo .css en la aplicaci\u00f3n<\/li><li>Se renombra:<ul><li>[class^=\u00bbicon-\u00ab]:before, [class*=\u00bb icon-\u00ab]:before <\/li><\/ul><\/li><li>Por:<ul><li>[class^=\u00bbicond-\u00ab]:before, [class*=\u00bb icond-\u00ab]:before <\/li><\/ul><\/li><li>Tambi\u00e9n se renombran el prefijo \u00abicon\u00bb en las clases de los \u00edconos: icon-nombre-\u00edcono por icond-nombre-\u00edcono<\/li><li>Se copia la carpeta font en el directorio de la aplicaci\u00f3n<\/li><li>En nuestra aplicaci\u00f3n se llama al \u00edcono:<ul><li>&lt;i class=\u00bbicond-nombre_icono\u00bb>&lt;\/i><\/li><\/ul><\/li><li>Se guarda el archivo: config.json<\/li><li>Si m\u00e1s adelante se quieren a\u00f1adir \u00edconos, se dise\u00f1an en Inkscape y luego se sube el archivo config.json a Fontello.com en la opci\u00f3n \u00abHerramientas\u00bb->\u00bbImport\u00bb<\/li><li>Se arrastran los nuevos \u00edconos y se repite el procedimiento<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1amos el \u00edcono en Inkscape de acuerdo a los siguientes par\u00e1metros: Configuramos la p\u00e1gina para que la unidad de medida sea pixeles Hacemos el dibujo, se agrupa y si coloca de tama\u00f1o de 1.000 px No usar colores Se desagrupa, convertirmos los c\u00edrculos, cuadrados y figuras B\u00e9zier en trayecto: Trayecto-> Trazo a trayecto Trayecto->Uni\u00f3n Trayecto->Combinar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"material-hide-sections":[],"footnotes":""},"categories":[70,72],"tags":[69,71],"class_list":["post-1883","post","type-post","status-publish","format-standard","hentry","category-iconos","category-inkscape","tag-iconos","tag-inkscape"],"_links":{"self":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/1883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/comments?post=1883"}],"version-history":[{"count":0,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/1883\/revisions"}],"wp:attachment":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/media?parent=1883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/categories?post=1883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/tags?post=1883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}