Font Awesome icons - some display, some do not

Question

I'm developing a new template using Joomla 3.0 with the Gantry framework and I'm running into an issue with my Font Awesome icons not displaying. Now, this framework has Font Awesome already built into the framework and all I am doing is overriding the template's CSS with custom CSS styles and leaving ALL of the template files in tact.

That being said, this is how I'm coding the Font Awesome icons into my page (fairly simple):

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

Here is the CSS (again, fairly simple):

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

Since this is my first post I cannot post an image, but the youtube icon is not displaying however the other four are in Firefox, Chrome & IE, perfectly as expected.

I'm hoping someone has an explanation for this.

Collinsia

This will help you: https://mcmap.net/q/1923383/-some-font-awesome-icon-not-displaying – Dichlorodifluoromethane

Answer 1

You may be experiencing problems related to AdBlock or AdBlock Plus.

Click on the extension and 'Disable for this domain/page' or uncheck 'Enable for this site'.

Kalinda

I had this problem (font awesome and social characters not displaying in Chrome). When I whitelisted the site in Adblock Plus the characters reappeared immediately. – Adrell

To clarify, the social icons are removed by the "Fanboy's Social Blocking List" supplementary add-on for Adblock Plus (at least in my case). Disabling this list (while retaining EasyList, for example) will prevent this issue on all sites. – Mainmast

Answer 2

The icon-youtube icon was introduced in Fontawsome version 3.2

Since Twitter,facebook,pinterest and google+ were introduced in v 2.0, I guess you have to update Fontawsome to version 3.2

See also: http://fortawesome.github.io/Font-Awesome/icons/

Matthias

Fontawesome was an old version for me... thanks to an unexpected rails gem dependency. I made it the current version and now all icons work great. – Claudetta

Answer 3

in the HTML, your containing div is classed as 'container'.

In the CSS, you define the class .custom_socialMedia.

You'll have to apply that class to your containing div

Urinalysis