|
7 anos atrás | |
---|---|---|
css | 7 anos atrás | |
fonts | 7 anos atrás | |
lab | 7 anos atrás | |
src | 7 anos atrás | |
LICENSE | 7 anos atrás | |
README.md | 7 anos atrás | |
demo.html | 7 anos atrás |
Fuentes de Letra [Fonts] para Redes sociales Libres y otros servicios descentralizados que apoyan el uso de Software Libre.
Copie los directorios css y fonts con sus archivos a su proyecto, y agregue una línea al head de su archivo html.
Ejemplo:
<link href="css/libresocial.css" rel="stylesheet"/>
Si usted es un experto puede reordenar sus directorios para mejor comodidad.
Dependencias
Instrucciones
Explicando lo anterior:
scr: aquí se encuentran los archivos de imagen vectorial con sus cuadrículas para ayudar a la edición futura de los mismos; así mismo encontrará un archivo llamado template.svg el cual es una plantilla para crear futuras imágenes vectoriales que luego serán íconos.
lab: aquí se encuentran los archivos de imagen vectorial listos para su compilación.
Si usted agrega una nueva imagen vectorial, debe editar el archivo metadata.json:
Ejemplo:
, "glyphs":
{ "0xe800": "diaspora.svg"
, "0xe801": "friendica.svg"
, "0xe802": "gitlab.svg"
, "0xe803": "gnusocial.svg"
, "0xe804": "hubzilla.svg"
, "0xe805": "mastodon.svg"
, "0xe806": "mediagoblin.svg"
, "0xe807": "notabug.svg"
, "0xe808": "pump.svg"
, "0xe809": "tox.svg"
, "0xe810": "xmpp.svg"
, "0xe811": "nueva.svg"
}
La imagen vectorial nueva lleva por nombre nueva.svg, y su número de glyphs respectivo es 0xe811. También opcionalmente puede cambiar el nombre de la fuente, copyright, etc.
Compilación:
Ejemplo:
./svgs2ttf metadata.json
La salida de este comando, nos dará como resultado los siguientes archivos:
Añadimos las nuevas fuentes (libresocial.ttf, libresocial.woff y libresocial.svg) al directorio fonts
Luego..., en el caso de haber agregado una nueva imagen vectorial, modifique el archivo libresocial.css localizado en el directorio css:
Ejemplo:
Agregamos la imagen vectorial llamada nueva.svg a nuestra lista de íconos generada en pasos anteriores.
.icon-nueva:before { content: '\e811'; } /* '[]' */
Por último usted agregaría el nombre del ícono (icon-nueva) al archivo demo.html para testear su nuevo ícono.
Ejemplo:
<a class="nueva" href="#"><i class="icon-nueva"></i></a>
Listo. Hasta aquí ya tendría su ícono agregado a su fuente tipográfica.