diff options
| -rw-r--r-- | README.md | 82 |
1 files changed, 45 insertions, 37 deletions
@@ -50,8 +50,9 @@ Si usted es un experto puede reordenar sus directorios para mejor comodidad. - Dependencias - FontForge (Se necesita de una versión >= 20140101) - Python >= 2.6 or 3 + - sass -- Instrucciones +### Instrucciones - Fuente: Los íconos se localizan en 2 directorios __scr__ y __lab__. @@ -62,13 +63,38 @@ Si usted es un experto puede reordenar sus directorios para mejor comodidad. __lab__: aquí se encuentran los archivos de imagen vectorial listos para su compilación. - - Edición de __metadata.json__ +### Compilación: - Si usted agrega una nueva imagen vectorial, debe editar el archivo __metadata.json__: + - Para compilar se facilita el archivo __build.sh__ Ejemplo: - ```html + ```shell + sh build.sh + ``` + + - La salida de este comando, almacenará los archivos en dist: + + ``` + dist/ + ├── css + │ └── libresocial.css + └── fonts + ├── libresocial.otf + ├── libresocial.svg + ├── libresocial.ttf + └── libresocial.woff + ``` + +### Nueva imagen vectorial + +- Si usted agrega una nueva imagen vectorial, es necesario editar el archivo __metadata.json__ + +#### Edición de _metadata.json_ + + Ejemplo: + + ```json "glyphs": { "0xe800": "copyleft.svg", "0xe801": "diaspora.svg", @@ -90,47 +116,29 @@ Si usted es un experto puede reordenar sus directorios para mejor comodidad. "0xe820": "nueva.svg" }, ``` - La imagen vectorial **nueva** lleva por nombre _nueva.svg_, y su número de __glyphs__ respectivo es __0xe820__. - También opcionalmente puede cambiar el __nombre de la fuente__, __copyright__, etc. - -- Compilación: - - - Para realizar la compilación debemos estar en el directorio __lab__ y luego abrir la terminal en ese directorio. - - Si usted agrega una nueva imagen vectorial, es necesario editar el archivo __metadata.json__ - - Ejemplo: - - ```html - ./svg2ttf.py metadata.json - ``` - - La salida de este comando, nos dará como resultado los siguientes archivos: - - libresocial.ttf - - libresocial.odf - - libresocial.woff - - libresocial.svg +La imagen vectorial **nueva** lleva por nombre _nueva.svg_, y su número de __glyphs__ respectivo es __0xe820__. +También opcionalmente puede cambiar el __nombre de la fuente__, __copyright__, etc. - - Añadimos las nuevas fuentes (libresocial.ttf, libresocial.woff y libresocial.svg) al directorio __fonts__ +#### Editando _libresocial.scss_ - - Luego..., en el caso de haber agregado una nueva imagen vectorial, modifique el archivo _libresocial.css_ localizado en el directorio __css__: +1. Después de agregar la nueva imagen vectorial, modifique el archivo _libresocial.scss_ localizado en el directorio __scss__: - Ejemplo: - - Agregamos la imagen vectorial llamada __nueva__.svg a nuestra lista de íconos generada en pasos anteriores. +2. Agregamos la imagen vectorial llamada __nueva__.svg a nuestra lista de íconos. - ```html - .icon-nueva:before { content: '\e820'; } /* '[]' */ - ``` - - Por último usted agregaría el nombre del ícono _(icon-nueva)_ al archivo _demo.html_ para testear su nuevo ícono. +```scss +.icon-nueva:before { + content: "\e820"; +} +``` - Ejemplo: +3. Por último usted agregaría el nombre de la clase __icon-nueva__ al archivo _demo.html_ para testear su nuevo ícono. - ```html - <a class="nueva" href="#"><i class="icon-nueva"></i></a> - ``` +```html +<a class="nueva" href="#"><i class="icon-nueva"></i></a> +``` - Listo. Hasta aquí ya tendría su ícono agregado a su fuente tipográfica. +4. [Compilar LibreSocial](###Compilacion) ## Contributor |