Icons not showing on the MO Joomla Template

Hello,
I'm using header style 3 of the new MO template for Jommla 3 and I cannot see the facebook and twitter icons when the page loads. The circles load but the icons do not. Here the code that I'm using, which I copied from your template site:

<div class="gk-avatar"><img src="images/misc/IMG_0473r225.png" alt="My picture" data-scrollreveal="enter top and move 100px wait 0.5s" /><a class="gk-fb" href="#" data-scrollreveal="enter top and move 50px wait 1s"></a><a class="gk-twitter" href="#" data-scrollreveal="enter bottom and move 50px wait 1s"></a>
</div>
<h1 data-scrollreveal="enter top and move 100px wait 1s">TyrrellEccles.com</h1>
<p><small data-scrollreveal="enter bottom and move 50px wait 1s">Business Help for Entrepreneurs</small>
</p>

What am I doing wrong and/or how can I fix this? Thanks in advance.

Hi,
did you enabled typography in template configuration,
because those icons should be from Awesome Font

Not sure but I will go and check. Thanks.

The new MO template doesn't have a typography setting. I did enable the gk-typography plugin but that didn't help. Do you have any other ideas?

Could you tell me exactly where you wanted -- or should be those icons?
Screenshot or URL with more details.

Maybe check typography page in DEMO , there you can find icons for some social icons, for example:

Code: Select all

<i class="fa fa-twitter-square"></i>
<i class="fa fa-google-plus"></i>

The html hat I posted earlier was taken from the demo page. Here's a screenshot of what I want and what I'm getting. hopefully the screenshot makes it easier to understand what I'm trying to do.

thanks,
it is as a expected , font-awesome is not implemented right, but font file is loaded.

I know why... you forgot about "fa" in class, check:

Code: Select all

<i class="fa fa-facebook"></i>
 <i class="fa fa-twitter"></i>

- this will fix icons

Thank you!!!

No problem, check our WIKi we have lot's of interesting guides , also about how to speed up Joomla 3.x

I figured out how to implement your suggestion but now the social media icon circles are off. What am i missing? I've attached a screenshot and here's my code.

<div class="gk-avatar"><img src="images/misc/IMG_0473r225.png" alt="My picture" data-scrollreveal="enter top and move 100px wait 0.5s" />
<a class="fa fa-facebook" href="http://facebook.com/tyrrelleccles" data-scrollreveal="enter top and move 50px wait 1s"></a>
<a class="fa fa-twitter" href="http://twitter.com/asktyrrelle" data-scrollreveal="enter bottom and move 50px wait 1s"></a>
</div>
<h1 data-scrollreveal="enter top and move 100px wait 1s">TyrrellEccles.com</h1>
<p><small data-scrollreveal="enter bottom and move 50px wait 1s">Business Help for Entrepreneurs</small></p>

original code:
<div class="gk-avatar">
<img data-scrollreveal="enter top and move 100px wait 0.5s" alt="" src="/gk_mo_J3/images/demo/robert.jpg" data-sr-init="true" data-sr-complete="true">
<a data-scrollreveal="enter top and move 50px wait 1s" class="gk-fb" href="http://facebook.com/gavickpro" data-sr-init="true" data-sr-complete="true"><i class="fa fa-facebook"></i></a>
<a data-scrollreveal="enter bottom and move 50px wait 1s" class="gk-twitter" href="http://twitter.com/gavickpro" data-sr-init="true" data-sr-complete="true"><i class="fa fa-twitter"></i></a>
</div>

module suffix must be: gk-header3

p.s.
you forgot about class="gk-twitter" & class="gk-fb"