How to Maintain Equal Spacing Between Font Icons in a Navigation Bar When Texts With Font-Icons Are Used as Link

body {  margin: 0;}
.navbar {  background-color: #495057;  width: 100%;}
.navbar ul {  display: flex;  justify-content: space-around;  text-align: center;  list-style-type: none;  padding: 20px}
.navbar ul li a {  text-decoration: none;  color: #adb5bd;}
.navbar ul li a:hover {  color: white;}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="navbar">  <ul>    <li>      <a href="#">        <i class="fas fa-font"></i>        <div>test</div>      </a>    </li>
    <li>      <a href="#">        <i class="fas fa-font"></i>        <div>123test123</div>      </a>    </li>
    <li>      <a href="#">        <i class="fas fa-font"></i>        <div>12345test12345</div>      </a>    </li>
    <li>      <a href="#">        <i class="fas fa-font"></i>        <div>12test12</div>      </a>    </li>
    <li>      <a href="#">        <i class="fas fa-font"></i>        <div>1test1</div>      </a>    </li>  </ul></div>

Space between link and icon, fontawesome

I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.

Instructions: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

How to make a space between icon and text in CSS

Try one of the below methods as mentioned in Fontawesome examples page

Text outside i tag, and add a space in between

<i class="fab fa-facebook"></i> Facebook

Use  , below code is from Fontawesome site

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>

If you dont want to change your markup(html) use the below CSS

.login-with > a i::before {
 padding-right: 15px;
}

Can I add spacing around an icon in Flutter Bottom Navigation Bar?

You could try to add a Padding widget (https://api.flutter.dev/flutter/widgets/Padding-class.html) around your Icon that uses Font awesome.

How to make a space between i tags (icons) in table?

Just apply a padding (or a margin, depending on the style you've used) between elements, e.g.

td a + a {
   padding-left: 3em;
} 

Changing the space between each item in Bootstrap navbar

You can change this in your CSS with the property padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Also you can set margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

---

Related Topics