Aprendiendo a usar Bootstrap parte 5 – Font Awesome Icons

Añade iconos con Font Awesome

Font Awesome es una excelente librería de iconos. Estos iconos son vectores gráficos, almacenados en un archivo de formato .svg y son tratados como fuentes. Puedes especificar su tamaño usando píxeles y pueden asumir el tamaño del texto que los rodea.

Puedes utilizar Font Awesome con solo colocar el siguiente código en la parte superior de tu código HTML.

 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

 

El elemento i era usado originalmente para hacer que un elemento de texto tenga letra cursiva, pero ahora es más usado para iconos. Puedes añadir el class de Font Awesme  al elemento i para convertirlo en un icono, por ejemplo:

 

<i class="fa fa-info-circle"></i>

 

Usa Font Awesome para añadir un icono de pulgar arriba a tu botón “Me Gusta” colocándole un elemento i con los classes “fa” y ” fa-thumbs-up”.

 

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”/>

<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>

<div class=”container-fluid”>
<style>
h2 {
font-family: Lobster, Monospace;
}

.borde-verde-estrecho {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

</style>

<div class=”row”><div class=”col-xs-8″><h2 class=”text-primary text-center”>MisViajes</h2></div>

<div class=”col-xs-4″><a href=”#”><img class=”img-responsive borde-verde-estrecho” src=”https://cryptodevelopments.com/wp-content/uploads/2017/04/travel.jpeg” alt=”Lentes sobre mapa”></a></div></div>

<img class=”img-responsive” src=”https://goo.gl/1DhMKc”>

<div class=”row”><div class=”col-xs-4″><button class=”btn btn-block btn-primary”>Me Gusta</button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info”>Info</button></div>
<div class=”col-xs-4″><button class=”btn btn-block btn-info btn-danger”>Borrar</button></div></div>

<p>Para viajar <span class = “text-danger”>necesitamos:</span></p>
<ul>
<li>Pasaporte</li>
<li>Dinero</li>
<li>Conocimiento del lugar </li>
</ul>
<p>Cosas que debes evitar en el viaje:</p>
<ol>
<li>Tener gastos innecesarios</li>
<li>Romper la ley</li>
<li>No preveer posibles riesgos</li>
</ol>

<form action=”/submit-cat-photo”>

<label><input type=”radio” name=”solo-acompañado” checked> Solo</label>
<label><input type=”radio” name=”solo-acompañado”> Acompañado</label>
<label><input type=”checkbox” name=”destino” checked> Ciudad</label>
<label><input type=”checkbox” name=”destino”> Selva</label>
<label><input type=”checkbox” name=”destino”> Islas</label>
<input type=”text” placeholder=”Mis viajes URL” required>
<button type=”submit”>Enviar</button>
</form>

</div>

 

  1. Copia y pega tu código en nuestro editor online (Try it editor).
  2. Añade un elemento i con los classes “fa” y “fa-thumbs-up”.
  3. Tu icono debe estar dentro del botón “Me Gusta”.
  4. Anida tu elemento i dentro de tu elemento de botón.
  5. Asegúrate de que tu elemento i tiene su etiqueta de cierre.
  6. No cierres la ventana de nuestro editor, seguiremos usando el código a lo largo de todo el articulo.

 

¡Añade Font Awesome Incons a todos tus botones!

Usa Font Awesome para añadir un icono de información para tu botón “Info” y un icono de papelera a tu botón “Borrar”.

 

  1. Debes añadir <i class="fa fa-trash"></i> dentro de tu elemento de botón “Borrar”.
  2. Añade <i class="fa fa-info-circle"></i> dentro de tu elemento de botón “Info”.
  3. Asegúrate de que todos los elementos tengan su respectivo etiqueta de cierre.

 

 

 

Con esta tarea damos por finalizada ésta entrega. En el siguiente apartado hablaremos de cómo añadir un diseño adaptativo a los elementos de los formularios. Puedes ingresar a la entrada aquí: Siguiente

También puedes regresar al anterior articulo aquí.

Deja un comentario

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