Modificado por última vez en Martes, 24 Junio 2014 22:56
(0 votos)

GitHub lanza sus iconos gratis para tu nuevo proyecto

octicons de Github

Github Octicons está ahora disponible para descarga gratuita

Hace dos años en Github empezaron a utilizar Octicons como sus iconos de fuentes. Las usan en muchos de sus sitios y las incluyeron en Atom. Ahora han hecho que estén disponibles para su descarga a todos los demás.

octicons ejemplo de iconos

Añadir Octicons a tu ordenador

1) Descarga Octicons

2) Instala el archivo octicons-local.ttf: OSX | Windows

Asegúrate de instalar el archivo correcto. Si instalas una de las fuentes web en su lugar, puede entrar en conflicto con los sitios web de GitHub, entoncesserá elegida la fuente local sobre la fuente web.

Octicons aparecerán como github-octicons en tu menú de fuentes. Si utilizas una aplicación con un menú de fuentes preview como Keynote,  se verá como una fila de logos GitHub.

Añadir Octicons a tu proyecto

1) Descarga y copia la carpeta de octicons en tu proyecto. En este ejemplo se da por supuesto que se ha copiado en el directorio raíz.

2) Enlaza a la hoja de estilo octicons.css en el <head> de su página <html>:

<link rel="stylesheet" href="/octicons/octicons.css">

3) Sólo tienes que utilizar un icono en la página HTML:

<span class="octicon octicon-flame"> </ span>

Si decides separar los ficheros de los archivos CSS, asegúrate de actualizar los vínculos en octicons.css.

Bower

Octicons son instalables a través de Bower.

1) Creaa un nuevo archivo llamado bower.json (si no tienes ya uno).

2) Agrega una nueva línea para la dependencia Octicon, señalando el repositorio correcto:

{
"name": "my_great_project",
"dependencies": {
  "octicons": "2.0.0"
}
}

3) Ejecuta bower install. Los estilos Octicons se descargarán en bower_components/octicons.

4) Enlaza a la hoja de estilo octicons.css en el <head> de tu página <html>:

<link rel="stylesheet" href="/bower_components/octicons/octicons/octicons.css">

5) Simplemente utiliza un icono en la página HTML:

<span class="octicon octicon-microscope"></span>

Ejemplos

Normal

<span class="octicon octicon-git-pull-request"></span>

Mega

<span class="mega-octicon octicon-git-pull-request"></span>

Buenas prácticas

Octicons se ven mejor en tamaños que son múltiplos de 16px.

Octicons no es monoespaciado. Esto le permite trabajar bien junto al tipo, pero significa que no van a apilar bien por defecto. Si vas a apilar octicons, como en la navegación, tendrás que añadir un poco de CSS para que sean del mismo ancho y centrado. Por ejemplo:

.navigation .octicon {
width: 16px;
text-align: center;
}

Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento