Lista con FontAwesome

Cómo hacer una lista usando icons de FontAwesome

codepen

En este post aprenderemos a hacer una lista HTML normal, cambiando los "bullet points" por iconos de FontAwesome.

Empezaremos con una simple lista HTML:

<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
</ul>

Ahora vamos a añadirle FontAwesome. Para hacerlo, primero hay que cargar el CSS de FontAwesome en el <head> tag. Como solución sencilla, vamos a cargarlo desde la cdnjs de FontAwesome.

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
</ul>
</body>
</html>

En la documentación de FontAwesome nos explican que debemos darle la class fa-ul a la lista, y fa-li a cada unos de sus elementos. Vamos a hacer eso y también le añadiremos un icono en cada <li>.

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
body {
  background: #222;
  color: #fff;
  font-family: sans-serif;
}

.fa-li {
  color: #08ffa3;
}
ul {
  line-height: 34px;
  font-size: 20px
}
</style>
<body>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Item #1</li>
<li><i class="fa-li fa fa-check"></i>Item #2</li>
<li><i class="fa-li fa fa-check"></i>Item #3</li>
<li><i class="fa-li fa fa-check"></i>Item #4</li>
</ul>
</body>
</html>

Listo! Ya tenemos un listado con iconos. Fácil, verdad?

Ahora vamos a ponerle un poco de CSS para dejarlo más bonito:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
body {
  background: #222;
  color: #fff;
  font-family: sans-serif;
}

.fa-li {
  color: #08ffa3;
}
ul {
  line-height: 34px;
  font-size: 20px
}
</style>
<body>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Item #1</li>
<li><i class="fa-li fa fa-check"></i>Item #2</li>
<li><i class="fa-li fa fa-check"></i>Item #3</li>
<li><i class="fa-li fa fa-check"></i>Item #4</li>
</ul>
</body>
</html>

También puedes utilizar otros iconos del tipo fa-solid o fa-regular. Vamos también a añadirle un título y cambiar los nombres del listado. Veamos como queda:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
  background: #222;
  color: #fff;
  font-family: sans-serif;
}
div {
width: 800px;
margin: 0 auto;
padding: 0 50px;
}
.fa,
.fa-solid,
.fa-regular,
h2 {
  color: #08ffa3;
}
h2 {
  font-size: 40px;
  }
ul {
  line-height: 34px;
  font-size: 20px;
}
</style>
</head>
  
  <body>
    
    <div>
  <h2>Lista con FontAwesome</h2>
    <ul class="fa-ul">
        <li><i class="fa-li fa fa-check"></i>Una lista con iconos</li>
      <li><i class="fa-li fa-solid fa-check-square"></i>puede ser usada</li>
      <li><i class="fa-li fa-solid fa-magnifying-glass"></i>para reemplazar</li>
      <li><i class="fa-li fa-solid fa-spinner fa-pulse"></i>las viñetas normales</li>
      <li><i class="fa-li fa-regular fa-square"></i>en listas</li>
        </ul>
 
  </div>
</body>
</html>

HTML

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div>
    <ul class="fa-ul">
        <li><i class="fa-li fa fa-check"></i>Una lista con iconos</li>
      <li><i class="fa-li fa-solid fa-check-square"></i>puede ser usada</li>
      <li><i class="fa-li fa-solid fa-magnifying-glass"></i>para reemplazar</li>
      <li><i class="fa-li fa-solid fa-spinner fa-pulse"></i>las viñetas normales</li>
      <li><i class="fa-li fa-regular fa-square"></i>en listas</li>
        </ul>
 
  </div>
</body>
</html>

CSS

.mimg {
    width: 800px;
    height: 350px;
    padding: 20px;
    text-align: left;
    line-height: 74px;
    font-size: 44px;
    color: #fff;
    font-family: 'Montserrat';
}
.mimg-in {
  margin-left: 20%; 
}
.fa,
.fa-solid,
.fa-regular,
h2 {
  color: #08ffa3;
}
h2 {
  font-size: 40px;
  }