Spacing in footer column between css-class icon and navigation label

Hi there!

I think this snippet of code will do the trick for you:

[class^="icon-"]::before, [class*=" icon-"]::before {
   padding-right:  5px;
}

You can paste this code in your child theme’s style.css or in a custom css plugin such as Simple Custom CSS.

I hope that helps ??

Luke the Daft Duke

Hi Luke,

Thanks! That seems to create some spacing.
But as the icons apparently are not all centered the same, this results in a distorted alignment of the text labels.
See my updated version on https://www.citymapxl.com

I could mask it by setting a “text-align: center” on the containerfooter (which applies to both the icon and the text).

But maybe there is a better way?

Also, the labels for the icons in the primary navigation are not neatly centered under the icons. Probably same cause. Any ideas on that?

Best regards

Peter

Hi Peter,

You could deal with the icons individually so the text spacing remains consistent?

Giving you this: Screenshot

1. Remove the code I gave you before.

2. Use something like this instead:

.icon-question,
.icon-book,
.icon-envelope,
.icon-truck,
.icon-map-marker {
  padding-right:  15px;
}
.icon-leaf {
  padding-right:  10px;
}
.icon-lock {
  padding-right:  18px;
}

As for the primary navigation labels try:

#menu-main-menu li a .icon-map-marker {
  padding-left: 9px;
}

#menu-main-menu li a .icon-envelope {
  padding-left: 15px;
}

Those two seem to be the main culprits – Screenshot

Hope that sorts it for you ??

Luke the Daft Duke

Seems like a workable solution. Thanks for the fast answers!