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.
Añadir Octicons a tu ordenador
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;
} 
