Spacing between Font Awesome icons - SOLVED

(Jeroen Born) #1

I am using the Social media icons from Font Awesome in a foot paragraph. I can not seem to get a normal space between the icons. Also trying to add the YouTube icon, but this one appears much smaller. Is there anybody with some ‘html’ knowledge that can help me fix this code?

The current code is (and obviously the added space bar space is not the correct way to do this I know…):

(I can not copy/paste the code here, because is results in something not readable…). So I made a screenshot:


This is the website and scroll down to the footer:

(Joe Martin) #2

Is this what you are looking for…

I used @joeworkman Share it stacks… in a 4 column foundation stack.

I just noticed…Extra Content? in Foundation?

(Jeroen Born) #3

No, not really. I need adding a code for ‘space’ between the icons and also how to enlarge a bit the (not yet in the code) icon for YouTube.

(Stuart Marshall) #4

if you use this code it will give you a space:  

You can use a couple of them together to give you more space.

To make the icons bigger you could try with fa-2x or fa-3x instead of fa-lg.

(Andrew Tavernor) #5

Do not add <div>s into Paragraph stacks. Block level elements are invalid inside paragraph tags and so the browser will break them out anyway. If you need to add <div>'s then add them to an HTML stack. If you are only adding them so that you can insert a custom class then you can do this in Stacks4 to any stack in the settings or previously you can use a stack that supports adding a custom class.

So, if you have added custom id without the defunct paragraph then you can just CSS some padding onto your icons which can be adjusted for small screens etc and made dynamic if you like

#myExtraContent2 .fa{
    padding-right: 16px!important;

(Jeroen Born) #6

Thanks. But it is ‘working’ fine in a Paragraph stack. Within a ‘html’ stack, I have no control over the used Site Styles.

(Andrew Tavernor) #7

But it is no longer inside the paragraph because the browser has removed it due to invalid HTML.

Your paragraph is picking up Foundation Swatch 1 colour of purple ( rgba(185, 77, 127, 1.00)) but your social icons are not this colour because they are not inside this paragraph.

You icons are getting the link colour from Site Styles because they are wrapped in <a> tags - they would get this colour without being in a paragraph stack - they would look exactly the same green colour if just in an HTML stack.

Here is the paragraph tag from the stack where you put the code - it is empty and so its styles are not being applied. Your content has been moved to after the paragraph by the browser every time the page is viewed.

(Jeroen Born) #8

Thanks for your knowledge, but it is above my level. I can not follow you. For the end result counts, and for now I can see it is working on a new copy not uploaded yet. Thanks, I am closing this topic now.

(Uikitter ) #9

Is ASCII ( for a space. You literally just type that in anywhere, and it will be normally be represented on the screen as a space.

So, for instance…


Converts to this…

this looks this

with nbsp; removed and replaced with a space.

It’s a really little trick to use when you are trying to add a space to some text in code.

This has all the codes:

(Paul Ricci) #10

A little typo in the code above – should be   not ;nbsp;

(Paul Ricci) #11

Sorry - it lost the code should be AMPnbsp; – only replace AMP with the & .

I could’t get the code to print right if I typed the & - it of course changed it to a space.

(Doug Bennett) #12

When you type any code in online forums like here you need to mark it as code.
Highlight the code and the choose the code button </> right above where you’re typing.

&nbsp; - is a non-breaking space, that’s a space that will not break into a new line or be truncated by the browsers.
Browsers will remove extra spaces, If you write 5 spaces in your text, the browser will remove 4 of them. To add real spaces to your text, you can use the &nbsp; characters.