0.00 (0 votes)
5 stars 0
4 stars 0
3 stars 0
2 stars 0
1 stars 0

In this article I would like to guide you how to display social icons on the site.
I will use the template JM Real Estate Ads as an example.

Locate module position

At first you need to locate a module position for social icons.
In JM Real Estate Ads template social icons are located at the bottom of site.




Best way to check module position on already installed demo sites - quickstart is using front-end site management in Joomla 3.x 
If you build from scratch take a look at  All Templates Positions article (Template Features -> All Template's Positions) or follow Subpage link on the demo site.

In this case I would like to display social icons on position bottom3. Remember that in the other template positions may be different. In most of our templates social icons module is published on position social. You can also search for module using Module Manager and Filter: Position.

Get social icons code

If you want to create new custom HTML module with social icons you need to get social icons code. Each demo site of the particular template includes Typography article (Template Features -> Typography) where  you can find the ready made code.




Just copy the code to clipboard.

Create the custom HTML module

Next, I need to create Custom HTML module on bottom3 position.

TIP: How to create a custom HTML module?

Go to backend -> Extensions -> Module Manager -> New. Then select Custom HTML module
Then you need to paste the code to module. Use source code editor (because you need to paste HTML code, not regular text).




Change the default URLs to your own profile links

The last step is to change the default URLs to your own URLs. To do this, simply change the pasted code from the previous step. Remember to change only HREF value which is responsible for URL. Otherwise icons may appear incorrectly.




<a class="jm-facebook" href="#link"> </a>

Change to:

<a class="jm-facebook" href="http://www.facebook.com"> </a>


If social icons are already published on the site, the only you need to do is to change URLs.
Skip steps 1-3, just search for social module. 

Worth to mention

After adding a custom HTML code in module, you may find out the HTML code is different once you saved the module. It is because Joomla Editor changes '&nbsp;' to white space and could remove some HTML tags. Remember to always copy the code from Typography if you like to edit URLs.


Users' comments

Total rating (go to the top to rate): (0 votes) Log-in to comment

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?


ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.