How to change the order of custom icons?

This is a late comment but I had the same issue and managed to solve it, so here is how I solved it (I am a just a user, not the plugin developer):

This solution requires some minor fiddling with CSS. The CSS needs to be added in your additional CSS area (in the dashboard -> appearance -> customize -> additional CSS).

A small HTML description (no need to understand): We have a ‘ul’ container with the class: “.gp-social-share”, having the children ‘li’ containers with the classes “.gp-social-facebook”, “.gp-social-twitter”, “.gp-social-linkedin”, and so on. The main ‘ul’ container should have “display: flex;” – which is the case in your linked page.

If that wasn’t the case (for other readers), then this code should be added to additional CSS, in addition to the rest of the code below:

.gp-social-share{
display: flex;
}

Now, you can control your order of children ‘li’ elements by grabbing them through their classes and adding the ‘order’ field to them (in this example, I have three displayed icons, and I want twitter first, then LinkedIn, then Facebook):

.gp-social-facebook{
order: 3;
}
.gp-social-twitter{
order: 1;
}
.gp-social-linkedin{
order: 2;
}

However, you might face some issues with alignment. The reason is that by default, the last HTML ‘li’ item (last as it appears in the code, not how we reordered it) will not have a margin added to it like the rest of the icons. So when we reorder them, it ends up sticking to the icon next to it.

We can solve this by adding the required margin (10px) in the above code (in my example, that would be for LinkedIn, which was last and is now second). The word !important is to override the default style added by the plugin. The final result:

.gp-social-facebook{
order: 3;
}
.gp-social-twitter{
order: 1;
}
.gp-social-linkedin{ /*This was last before the reorder*/
order: 2;
margin-right: 10px !important;
}

• This reply was modified 4 years, 7 months ago by ghadir29.
• This reply was modified 4 years, 7 months ago by ghadir29.