Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar