CODEWITHSUNDEEP
htmlcssfont-awesome
user13899130
user13899130

Reputation:

How to make a space between icon and text in CSS

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

Upvotes: 7

Views: 21065

Answers (6)

user8234870
user8234870

Reputation:

In Bootstrap you can use me which represents margin from end in icon

<button type="button" class="btn btn-primary"
 style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>

Sample Code:

<html>
  <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <center>
      <button type="button" class="btn btn-primary" style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
      <br><br>
      <button type="button" class="btn btn-secondary" style="width:150px;"><i class="bi bi-gear-fill me-3"></i>Settings</button>
      <br><br>
      <button type="button" class="btn btn-info" style="width:150px;"><i class="bi bi-person-circle me-3"></i>Profile</button>
    </center>
    
  </body>
</html>

Upvotes: 0

soulglider
soulglider

Reputation: 161

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>

Upvotes: 0

kiranvj
kiranvj

Reputation: 34147

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

Upvotes: 8

Maciej Bledkowski
Maciej Bledkowski

Reputation: 713

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.

Upvotes: 0

habib
habib

Reputation: 1594

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

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17487

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.

Upvotes: 1

Related Questions