2013-07-02 9 views
5

Sto sviluppando un nuovo modello utilizzando Joomla 3.0 con il framework Gantry e sto riscontrando un problema con le icone Font Awesome non visualizzate. Ora, questo framework ha già creato Font Awesome nel framework e tutto quello che sto facendo è sovrascrivere il CSS del template con stili CSS personalizzati e lasciare TUTTI i file template in modo tattile.Font Icone fantastiche - alcuni display, alcuni non lo sono

Detto questo, questo è come sto codifica il carattere icone impressionanti nella mia pagina (abbastanza semplice):

<div class="container"> 
    <ul> 
    <li><a href="#"><i class="icon-twitter"></i></a></li> 
    <li><a href="#"><i class="icon-facebook"></i></a></li> 
    <li><a href="#"><i class="icon-youtube"></i></a></li> 
    <li><a href="#"><i class="icon-google-plus"></i></a></li> 
    <li><a href="#"><i class="icon-pinterest"></i></a></li> 
    </ul> 
</div> 

Ecco il CSS (di nuovo, abbastanza semplice):

/* ---------- Social Media ----------*/ 

.custom_socialMedia ul{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 

.custom_socialMedia li{ 
font-size:2.5em; 
display:inline; 
} 

.custom_socialMedia .container{ 
    width:100%; 
    margin: 0 auto; 
} 

.custom_socialMedia p{ 
    font-family:'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; 
font-weight: 200; 
color:#F47820; 
font-size:1.5em; 
    text-align:center; 
} 

.custom_socialMedia a { 
    color: #999; 
    text-decoration: none; 
} 

.custom_socialMedia a:hover { 
    color: #666; 
} 

.custom_socialMedia i { 
    width: 1em; 
    height: 1em; 
    cursor: pointer; 
    padding:0em 1em; 
} 

Poiché questo è il mio primo post non posso pubblicare un'immagine, ma l'icona di youtube non viene visualizzata, tuttavia gli altri quattro sono in Firefox, Chrome & IE, perfettamente come previsto.

Spero che qualcuno abbia una spiegazione per questo.

+0

Questo vi aiuterà a: http://stackoverflow.com/a/29134488/2817112 – Oriol

risposta

2

L'icona icon-youtube è stata introdotta nella versione Fontawsome 3.2

Dal Twitter, Facebook, Pinterest e Google + sono stati introdotti nel v 2.0, immagino è necessario aggiornare Fontawsome alla versione 3.2

Vedi anche: http://fortawesome.github.io/Font-Awesome/icons/

+0

Fontawesome era una vecchia versione per me ... grazie una dipendenza inaspettata dalle gemme di rotaie. Ho fatto la versione corrente e ora tutte le icone funzionano alla grande. –

11

Potresti avere problemi relativi a AdBlock o AdBlock Plus.

Fare clic sull'estensione e su "Disattiva per questo dominio/pagina" o deselezionare "Abilita per questo sito".

+0

Ho riscontrato questo problema (caratteri fantastici e caratteri social non visualizzati in Chrome). Quando ho autorizzato il sito in Adblock Plus, i caratteri sono riapparsi immediatamente. –

+3

Per chiarire, le icone sociali vengono rimosse dal componente aggiuntivo "Elenco social block fan di Fanboy" per Adblock Plus (almeno nel mio caso). La disabilitazione di questo elenco (pur mantenendo EasyList, ad esempio) impedirà questo problema su tutti i siti. –

0

nel codice HTML, il div contenente è classificato come "contenitore".

Nel CSS, si definisce la classe .custom_socialMedia.

Dovrete applicare tale classe al div contenente