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:
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
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.
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.
- 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 characters.
