Spacing between Font Awesome icons - SOLVED

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:

08

This is the website and scroll down to the footer:

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?

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.

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.

3 Likes

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;
}
3 Likes

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

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.

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.

Is ASCII (https://www.cs.cmu.edu/~pattis/15-1XX/common/handouts/ascii.html) 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…

this;nbsp;looks;nbsp;this

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: https://www.baskerville.me/?post=pesky-html-code-for-ascii-character-things&tag=code

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

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.

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.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.