2013-07-02 28 views
5

Ich entwickle eine neue Vorlage mit Joomla 3.0 mit dem Gantry-Framework und ich bin in ein Problem mit meinen Font Awesome Icons nicht angezeigt. Nun, in diesem Framework ist Font Awesome bereits in das Framework integriert, und alles, was ich tue, ist das Überschreiben des CSS der Vorlage mit benutzerdefinierten CSS-Stilen und das Zurücklassen ALLER Vorlagendateien.Font Awesome Icons - einige anzeigen, einige nicht

aber sagen, dass das ist, wie ich die Schriftart Ehrfürchtig Symbole in meine Seite bin Codierung (ziemlich einfach):

<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> 

Hier ist die CSS ist (auch hier recht einfach):

/* ---------- 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; 
} 

Da dies mein erster Beitrag ist, kann ich kein Bild posten, aber das Youtube-Symbol wird nicht angezeigt, aber die anderen vier sind in Firefox, Chrome & IE, perfekt wie erwartet.

Ich hoffe, jemand hat eine Erklärung dafür.

+0

Dies wird Ihnen helfen: http://stackoverflow.com/a/29134488/2817112 – Oriol

Antwort

2

Das icon-youtube Symbol wurde in Fontawsome Version eingeführt 3.2

Da Twitter, Facebook, pinterest und google + wurden in v 2.0 eingeführt, ich denke, Sie Fontawsome auf Version 3.2

Siehe auch aktualisieren: http://fortawesome.github.io/Font-Awesome/icons/

+0

Fontawesome war eine alte Version für mich ... Dank eine unerwartete Rails-Edelstein-Abhängigkeit. Ich habe es zur aktuellen Version gemacht und jetzt funktionieren alle Icons großartig. –

11

Möglicherweise treten Probleme im Zusammenhang mit AdBlock oder AdBlock Plus auf.

Klicken Sie auf die Erweiterung und 'Deaktivieren für diese Domain/Seite' oder deaktivieren Sie 'Aktivieren für diese Website'.

+0

Ich hatte dieses Problem (font awesome und soziale Zeichen nicht in Chrome angezeigt). Als ich die Seite in Adblock Plus auf die weiße Liste gesetzt habe, sind die Charaktere sofort wieder aufgetaucht. –

+3

Zur Verdeutlichung werden die Social Icons durch das Zusatz-Add-On "Fanboy's Social Blocking List" für Adblock Plus entfernt (zumindest in meinem Fall). Wenn Sie diese Liste deaktivieren (z. B. EasyList beibehalten), wird dieses Problem auf allen Websites verhindert. –

0

Im HTML-Code wird Ihr enthaltendes div als "Container" klassifiziert.

Im CSS definieren Sie die Klasse .custom_socialMedia.

Sie werden diese Klasse auf Ihre enthält div anwenden müssen