How to make a space between icon and text in CSS

Admin 1
Viewed 7353

I am learning HTML and CSS. I am practicing by designing some pages but I got a problem. I tried many ways but couldn't fix it. I want to add a space between the icon and the text so that they lock more beautiful.

Image:

enter image description here

CSS:

.facebook {
    background: blue;
    padding: 0.8rem;
    padding-left: 4.1vw;
    padding-right: 4.1vw;
    margin-left: 0vw;
    border-radius: 10px;
}
.facebook:hover {
    opacity: 0.5;
}
.google {
    background: red;
    padding: 0.8rem;
    padding-left: 4.6vw;
    padding-right: 4.6vw;
    margin-left: 3vw;
    border-radius: 10px;
}
.google:hover {
    opacity: 0.5;
}

HTML:

<div class="login-with">
          <a href="https://www.facebook.com/" target="_blank" class="facebook"><i class="fab fa-facebook">Facebook</i></a>
          <a href="https://www.google.com/" target="_blank" class="google"> <i class="fab fa-google">Google</i> </a>
        </div>

Can you please help me to fix it. When I add a space manually the link text go to below the icon.

Full Codes link:

CSS: Full Code

HTML: Full Code

font-awesome css html
5 Answers

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 &nbsp;, below code is from Fontawesome site

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

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

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

People usually keep the icon element as an empty node and put the text content after it. Then you add a margin to the icon to get appropriate spacing:

.facebook .fab { margin-right: 1em }

<a href="..." class="facebook">
   <i class="fab fa-facebook"></i>
   <span>Facebook</span>
</a>

The <span> tags are technically not necessary, but it is common to avoid text-only nodes.

user_10289490

Use space or &nbsp between text and icon. Also plz put ; after &nbsp

user_100292650

Place service name outside i tag. You can add margin-right: 10px; styling to i element, or display: flex; justify-content: space-between; to the a tag.

user_104922950

It would be best to set a base class for the social icons

/* set base class */
.social-btn {
  padding: 0.8rem 4.1vw;
  border-radius: 10px;
  color: white;
  background: gray;
  text-decoration: none;
  font-family: sans-serif;
}

/* space the buttons */
.social-btn + .social-btn {
  margin-left: 1rem;
}

/* set icon padding */
.social-btn i {
  padding-right: 0.5rem;
}

/* Modifiers */
.facebook-btn {
  background: blue;
}

.google-btn {
  background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>

<a href="#" class="social-btn facebook-btn"><i class="fab fa-facebook"></i>Facebook</a>

<a href="#" class="social-btn google-btn"><i class="fab fa-google"></i>Google</a>

user_15654200
Related