Tutoriales sobre Blogger

Es muy importante tener en cuenta que los íconos de Duotone no son GRATUITOS en este momento, lo que significa que debe comprar el paquete Pro para usar sus íconos de lista.
Al leer esto, muchos de ustedes pueden estar un poco decepcionados, pero tengan la seguridad de que aquí no perderé dinero y aún tendré productos genuinos para usar
Entonces, ¿qué son los iconos Duotone? Simplemente se entiende como "2 iconos" combinados en uno para que podamos personalizar el color, la opacidad, ... en comparación con la personalización de un icono tradicional.

La demostración la encontraran a medidas que se vaya desarrollando

Comencemos:

La primera etapa sera agregar el código fuentes de Duotone para eso:

Vamos a Blogger>> Plantilla>> Edición HTML
Buscamos la siguiente linea (Ctrol + F) <head>
Justo debajo <head> de pegamos la siguiente linea

<link href="//cdn.jsdelivr.net/gh/hung1001/font-awesome@268ad89/css/all.css" rel="stylesheet" type="text/css" />

Guardamos los cambios

Como utilizar

Al igual que sus hermanos, Duotone Icons usa la clase de moda como prefijo. Puede visitar https://fontawesome.com/icons?d=gallery&s=duotone para obtener la lista de iconos y el código

Iconos Basicos

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- un icono de cámara de estilo duotono -->
  <i class="fad fa-fire-alt"></i> <!-- un icono de fuego de estilo duotono -->
  <i class="fad fa-bus-alt"></i> <!-- un icono de bus de estilo duotono -->
  <i class="fad fa-fill-drip"></i> <!-- un icono de bote de estilo duotono -->
</div>

Intercambio de opacidad de capa

Puede revertir la opacidad utilizando la clase fa-swap-opacity

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- un icono de cámara de estilo duotono -->
  <i class="fad fa-camera fa-swap-opacity"></i> <!-- un icono de cámara de estilo duotono con opacidad intercambiada -->

  <i class="fad fa-fire-alt"></i> <!-- un icono de fuego de estilo duotono -->
  <i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- un icono de fuego de estilo duotono con opacidad intercambiada -->

  <i class="fad fa-bus-alt"></i> <!-- un icono de bus de estilo duotono -->
  <i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- un icono de bus de estilo duotono con opacidad intercambiada -->
</div>

Opacidad cambiante

FA usa 2 variables --fa-primary-opacity (predeterminado 1) y --fa-secondary-opacity (4 alternativas) para los iconos de duotono. Puedes cambiarlos usando el siguiente estilo


<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!--  opacidad de la capa primaria establecida en 20% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!--  opacidad de la capa primaria establecida en 40% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!--  opacidad de la capa primaria establecida en 60% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!--  opacidad de la capa primaria establecida en 80% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!--  opacidad de la capa primaria establecida en 100% -->
</div>

Colorear Iconos Duotono

De manera similar, FA usa 2 variables: fa-primary-color y --fa-secondary-color para asignar colores a 2 íconos, en caso de que desee personalizar, puede usar lo siguiente

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!--color de capa primaria definido -->
  <i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- color de capa primaria definido -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- color de capa secundaria definido -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- color de capa secundaria definido -->
  <i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- color de capa secundaria + primario definido -->
  <i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- color de capa secundaria + primario definido -->
</div>

Combinando variables

También puedes usar una combinación de variables para personalizarlo como quieras

<div class="fa-3x">
  <i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>

Personalizado a través de CSS interno

Agregarle tu propio estilo css aunque pareciera un poco mas largo

<style>
  .theme-ravenclaw {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(4, 56, 161);
    --fa-secondary-color: rgb(108, 108, 108);
  }
</style>

<div class="fa-3x">
  <i class="fad fa-hat-wizard theme-ravenclaw"></i>
  <i class="fad fa-flask-potion theme-ravenclaw"></i>
  <i class="fad fa-wand-magic theme-ravenclaw"></i>
  <i class="fad fa-scarf theme-ravenclaw"></i>
  <i class="fad fa-book-spells theme-ravenclaw"></i>
</div>

Eso es todo En realidad, no hay nada sublime, ¿verdad? Te he mostrado un nuevo estilo de FA y cómo usarlo.

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo