> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/knapsack/layout-customization/home-page/top-left-social-icons.md).

# Top left social icons

### Top left social icons

> Module position: topbar-left
>
> Module class suffix: Not used

![](/files/8aXPuoF2W0iOUb0VMKLx)

**If you want to display your contact information like this you have to create a menu and publish the menu module like below**

#### Step-1:

![](/files/L1UiCRM6SnUxt7gnDx1l)

#### Step-2:

![](/files/JN8rTg1JNY7N9rjkRlc0)

#### Step-3:

Add the following code in your custom html module

```html
<div class="social social-head">
<a href="#" class="toptip" title="Linkedin"><em class="icon-linkedin"></em></a>
 <a href="#" class="toptip" title="Github"><em class="icon-github"></em></a> <a href="#" class="toptip" title="Dribbble"><em class="icon-dribbble"></em></a> 
<a href="#" class="toptip" title="Google Plus"><em class="icon-google-plus"></em></a>
 <a href="#" class="toptip" title="Facebook"><em class="icon-facebook"></em></a> 
<a href="#" class="toptip" title="Twitter"><em class="icon-twitter"></em></a>
</div>
```

#### Step-4:

![](/files/AfI0ZkPqy2d4BnTOPG4m)