Bibliotecas de iconos online para páginas web

Hoy os traigo 3 juegos de iconos 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.

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>

 

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *