Hoy os traigo 3 bibliotecas de iconos online libres y gratuitos para usar en vuestros desarrollos web, bien sean con un CMS como WordPress o páginas desarrolladas con código propio desde cero, con la ventaja añadida de poder usarlos online sin tener la necesidad de alojarlos en nuestro servidor.
Tabla de contenidos
Font Awesome Icons
Para usar los iconos de Font Awesome, debemos añadir la siguiente línea dentro del <head> de nuestra página HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Podéis echar un vistazo a los iconos que nos ofrece en su página web: http://fontawesome.io/icons/
Ejemplo de uso:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-cloud"></i> <i class="fa fa-heart"></i> <i class="fa fa-car"></i> <i class="fa fa-file"></i> <i class="fa fa-bars"></i> </body> </html>
Bootstrap glyphicons
Para usar los iconos de Glyphicons, debemos añadir la siguiente línea dentro del <head> de nuestra página HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Podéis echar un vistazo a los iconos que nos ofrece en su página web http://glyphicons.com/
Ejemplo de uso:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html>
Google icons
Para usar los iconos de Glyphicons, debemos añadir la siguiente línea dentro del <head> de nuestra página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Podéis echar un vistazo a los iconos que nos ofrece en su página web https://material.io/icons/
Ejemplo de uso:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html>