Font-awesome: Space between name and icon with JavaScript

[fakhamatia]

Before i used CSS FortAwesome5 and when i change CSS to JS space between name and icon disappear , and   not work .

JS

CSS

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I cannot replicate it with my reduced test case
CSS: https://jsfiddle.net/tagliala/6rhmuj25/16/
SVG: https://jsfiddle.net/tagliala/we7gtcvk/20/

but.. I advise you to avoid spaces and   for layout purposes.

Also, since icons have not the same width by design, I also suggest you to use the fa-fw class to keep icons and text vertically aligned in your use case

Demo: https://jsfiddle.net/tagliala/we7gtcvk/24/

Could you please provide a reproducible test case of your issue?

[fakhamatia]

I use fa-fw but dont work.
<li> <a href="index.html"> <i class="fas fa-fw fa-tachometer-alt"></i> Dashboard</a> </li>

But in inspect element i change width for svg tag and work.
.svg-inline--fa.fa-w-18 { width: 3.125em; }
how fix this?

[tagliala]

Could you please provide a reproducible test case?

What is not working?

[giliardgomes]

Use margin-right in icon.

[fakhamatia]

I use class fa-fw but not add margin enough .
https://jsfiddle.net/Fakhamatia/m80krne9/6/
Add this .svg-inline--fa{margin-right: 19px;} to main CSS and its work.
Before add JS instead of CSS i add this to main CSS li a i {margin-right: 19px;}
But this fa-fw keeps all icons and names vertically aligned in menu , i didnt know before.
I hurried up and did not read the doc well. Sorry

[tagliala]

Ok, got it.

Don't worry, glad it helped

As @giliardgomes suggested, if fa-fw is not enough, use margin-right, but keep in mind that <i> elements will be replaced by <svg> with the SVG framework, so li a i {margin-right: 19px;} should become something like li a svg {margin-right: 19px;} or better with a custom class, so it will work with both CSS and SVG approaches

https://jsfiddle.net/9mhrvtqc/