esempi bottoni e icone

Esempio di testi con icone  (copiare il codice sorgente)

  Testo con icona
<i class="fas fa-exclamation-circle"></i> Testo

Testo con icona calsse accent
<span class="Accent"><i class="fas fa-info-circle"></i></span> Testo

Testo con icona con colore e dimensione modificati
<span style="color:#0099cc;"><i class="fas fa-exclamation-circle"></i> </span>Testo

Testo con icona con colore e dimensione modificati
<span style="font-size: 26px; color:#0099cc;"><i class="fas fa-exclamation-circle"></i> </span> Testo

Classe More Icon 
<a class="More Icon" href="/#/">Testo <i class="fa fa-chevron-circle-right"></i></a>

Bottoni

Gli stili 1, 2 e 3 sono configurabili da Site Editor

Esempio bottone 1 Esempio bottone 2 Esempio bottone 3

    <a class="Button" href="#" style="">Esempio bottone 1</a>
    <a class="Button-2" href="#" style="">Esempio bottone 2</a>
    <a class="Button-3" href="#" style="">Esempio bottone 3</a>
 

Esempio bottone 1 Esempio bottone 2 Esempio bottone 3

<a class="Button Icon"href="#" >Esempio bottone 1<i class=fas fa-caret-circle-right></i></a>
<a class="Button Icon Button-2" href="#" >Esempio bottone 2<i class="fas fa-caret-circle-right></i></a>
<a class="Button Icon Button-3" href="#" >Esempio bottone 3<i class="fas fa-caret-circle-right></i></a>

 (Finestra in blanck:  href=# target=_blank)

A TUTTA LARGHEZZA

<p fullwidth="" style="text-align: center;"><a class="Button Icon FullWidth" href="#">A TUTTA LARGHEZZA <i class="fas fa-caret-circle-right"></i> </a></p>

Allineamenti

ALLINEATO A SX    

<a class="Button Simple" href="#">ALLINEATO A SX <i class="fas fa-sun"></i></a>

CENTRATO    

<p style="text-align: center;"><a class="Button Simple" href="#">CENTRATO <i class="fas fa-sun"></i></a></p>

ALLINEATO A DX    

<p style="text-align: right;"><a class="Button Simple" href="#">ALLINEATO A DX <i class="fas fa-sun"></i></a></p>

DOPPI CENTRATI DOPPI CENTRATI

<p style="text-align: center;">
<a class="Button Icon" href="/#/DOPPI CENTRATI <i class="fas fa-caret-circle-right"></i> </a>
<a class="Button Icon" href="/#/">DOPPI CENTRATI <i class="fas fa-caret-circle-right"></i></a>
</p>

DOPPI ALLINEATI SX DOPPI ALLINEATI SX

<p>
<a class="Button Icon" href="/#/">DOPPI ALLINEATI SX<i class="fas fa-caret-circle-right"></i> </a>
<a class="Button Icon" href="/#/">DOPPI ALLINEATI SX<i class="fas fa-caret-circle-right"></i></a>
</p>

Allineato a sx
<p><a class="More Icon" href="/#/">Allineato a sx <i class="fa fa-chevron-circle-right"></i></a></p> 

Centrato
<p style="text-align: center;"><a class="More Icon" href="/#/">Centrato <i class="fa fa-chevron-circle-right"></i></a></p>

Allineato a dx
<p style="text-align: right;"><a class="More Icon" href="/#/">Allineato a dx <i class="fa fa-chevron-circle-right"></i></a></p>