Articles in this section

Custom social media icons (Semplice 3)

  • Updated

FOR VERSION 3.0.9 OR EARLIER ONLY

Note: We don't offer support for this kind of customization, so we highly recommend to only use this code if you are familiar with HTML & CSS.

 

Within Semplice default functionality social media icons can only be added to the dropdown menu (hamburger). To do that, just add the link to your social media channels at:

‘Semplice  → Social Networks’ and the icons will automatically appear.

 

If you want to add your own custom social media icons here is a small template you can use. It contains following icons.

 

They all feature a hover effect, you can see them in action here:
http://blog.semplicelabs.com/social-media-icons-demo/

 

The HTML code is pretty straight forward.

There is an outer div (.soicons) which contains several anchor tags, each anchor tag contains one icon. If you want to remove one icon, make sure to delete the whole anchor tag from the code.

 

Every anchor tag has it’s own class, this way you can target every icon itself, to give it a hover effect or to change some CSS styles for just a certain item.

.soicons_yt → YouTube
.soicons_tb → Tumblr
.soicons_tw → Twitter
.soicons_fb  → Facebook
.soicons_dr  →Dribbble
.soicons_li → Instagram

 

If you need to have another icons, make sure to copy an existing one (the complete anchor tag),

then replace the SVG code and change the class to a new one. And don’t forget to give it the same styling within the CSS as your other items.

 

In case you want to center the icons, that would be the CSS to do so:

 .soicons { text-align: center; }

 

Download & Implementation

 

  1. Open following link: http://pastebin.com/raw/qN2RhA6r

  2. Open the page you want to add this icons

  3. Within the content editor you can either add a code module or use a multi-column module.

  4. I created a new 6 column wide container and gave it a 3 column offset to center the container.

  5. Then you can add a code module within this column and paste the code from the link above.

  6. Make sure to change the link of every anchor tag.
    → href=”MYTWITTERLINK” ...

  7. In this layout I want the icons to be centered so I need to add following code within the code modules CSS:

     .soicons { text-align: center; }

  8. Save everything.

    The icons might not be aligned perfectly, make sure to check it and change the margin if needed.

     

PS: If you are using Semplice Studio, you can save the code module as dynamic block, that allows you to simplify the process even more.

 

Related articles