Custom Social Media Icons

Last Updated: Jun 27, 2017

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.

 

[Please be aware that we can’t give support for this kind of customization, we highly recommend to only use this code if you are familiar with HTML & CSS, we will not be able to help you with the implementation and/or with adding new icons to the code.]

 

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

 

(https://cl.ly/3c2g2g0o002J)

 

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.

 
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
http://assets0.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete