Autore Topic: [RISOLTO]cambiare colore font awesome  (Letto 198 volte)

Offline Alessia77

  • Esploratore
  • **
  • Post: 118
  • Sesso: Femmina
    • Mostra profilo
    • Ossolaweb
[RISOLTO]cambiare colore font awesome
« il: 08 Ago 2017, 16:22:21 »

Ciao a tutti chiedo a voi guru in quanto da sola ho letto mille post ma il risultato non è quello che vorrei.
Ho aggiunto font awesome al template e mi piacerebbe che solo l'icona Fa-check diventi verde ma impostato così anche il testo diventa verde

<p><i class="fa fa-check" style:="green"><span style="font-size: 12pt;">testo</span></p>


Qualche anima pia mi dice come impostare il codice in maniera che solo l'icona fa-check sia verde?
Perdonate l'ignoranza.



« Ultima modifica: 08 Ago 2017, 16:44:03 da Alessia77 »
Con applicazione e impegno porti sempre a casa il risultato

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5023
  • "Bastard Inside"
    • Mostra profilo
    • redwebsite
Re:cambiare colore font awesome
« Risposta #1 il: 08 Ago 2017, 16:26:51 »
Ciao, secondo me andrebbe fatto sul foglio di stile (css) e richiamata la regola, comunque prova a "chiudere" l'icona

Codice: [Seleziona]
<i class="fa fa-check" style:="green"></i><span style="font-size: 12pt;">testo</span>
alterjoomla Guide joomla altervista - RedWebSite  joomla! e non solo joomla

Offline mr.fifteen

  • Nuovo arrivato
  • *
  • Post: 23
    • Mostra profilo
Re:cambiare colore font awesome
« Risposta #2 il: 08 Ago 2017, 16:27:38 »
è un problema di CSS non di Joomla...


sostituisci style:="green" con style="color:green;" o forse sarebbe meglio il codice esadecimale del verde...
e a questo punto scrivi nello span subito dopo 12pt; color:#000;

Offline Limma

  • Appassionato
  • ***
  • Post: 583
  • Sesso: Maschio
    • Mostra profilo
Re:cambiare colore font awesome
« Risposta #3 il: 08 Ago 2017, 16:34:25 »
Hanno già risposto in molti...  ;)

Se vuoi usare codice inline come hai fatto tu, questo funziona:
Codice: [Seleziona]
<p><i class="fa fa-check" style="color:green;"></i><span style="font-size: 12pt;">testo</span></p>che altro non è che una semplice correzione di quello che avevi scritto tu.

P.S. Anche se è un po' fuori topic, ma giusto per piccola precisazione, "green" corrisponde all'esadecimale #008000 e all'rgb(0,128,0) e possono essere usati del tutto indifferentemente.
« Ultima modifica: 08 Ago 2017, 16:49:37 da Limma »

Offline Alessia77

  • Esploratore
  • **
  • Post: 118
  • Sesso: Femmina
    • Mostra profilo
    • Ossolaweb
Re:cambiare colore font awesome
« Risposta #4 il: 08 Ago 2017, 16:43:31 »
Grazie a tutti per le risposte.
Col tuo codice Limma però,utilizzando l editor di default, mi scompare l'icona (magari sbaglio qualcosa)
Invece aggiungendo il codice consigliato da mr.fifteen (avevo trascritto sbagliato e avevo usato già color:green) e aggiungendo il colore nero al testo funziona.
Grazie anche a $red ma il suo consiglio era già un livello troppo alto per me  8)
Con applicazione e impegno porti sempre a casa il risultato

Offline Limma

  • Appassionato
  • ***
  • Post: 583
  • Sesso: Maschio
    • Mostra profilo
Re:cambiare colore font awesome
« Risposta #5 il: 08 Ago 2017, 16:48:06 »
Col tuo codice Limma però,utilizzando l editor di default, mi scompare l'icona (magari sbaglio qualcosa)

...molto bizzarro...
Io uso JCE, ma non credo dia nessun problema con qualunque altro editor.
Se hai un minuto riprova ri-copiando il codice sopra (che ti evita ogni volta di forzare il colore anche sul testo, invece che solo sull'icona).

Offline Alessia77

  • Esploratore
  • **
  • Post: 118
  • Sesso: Femmina
    • Mostra profilo
    • Ossolaweb
Re:[RISOLTO]cambiare colore font awesome
« Risposta #6 il: 08 Ago 2017, 16:52:27 »
Ok proverò a fare copia incolla  :)
Con applicazione e impegno porti sempre a casa il risultato

Offline Limma

  • Appassionato
  • ***
  • Post: 583
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO]cambiare colore font awesome
« Risposta #7 il: 08 Ago 2017, 16:59:34 »
Giusto per completezza d'informazione (raccogliendo lo spunto di $Red) puoi ottenere lo stesso risultato in maniera più "elegante" utilizzando una classe css.

La classe css, da inserire nel file custom.css (o chi per lui) del tuo template:
Codice: [Seleziona]
.green {
    color: green;
}

L'HTML dell'icona:
Codice: [Seleziona]
<i class="fa fa-check green"></i>dove, come vedi, compare la classe "green" che la rende verde.

Offline Alessia77

  • Esploratore
  • **
  • Post: 118
  • Sesso: Femmina
    • Mostra profilo
    • Ossolaweb
Re:[RISOLTO]cambiare colore font awesome
« Risposta #8 il: 08 Ago 2017, 17:13:20 »
Ecco cosi detta mi è stata più semplice capirla
Con applicazione e impegno porti sempre a casa il risultato

Offline Limma

  • Appassionato
  • ***
  • Post: 583
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO]cambiare colore font awesome
« Risposta #9 il: 08 Ago 2017, 17:19:37 »
Le classi css ti permettono di sbizzarrirti quasi come ti pare.
Vedi qui una piccola variazione alla classe di cui sopra.

 

Torna su