如何在 CSS 中的图标和文本之间制作 space

Question

我正在学习 HTML 和 CSS。我正在通过设计一些页面来练习，但我遇到了问题。我尝试了很多方法，但无法修复它。我想在图标和文字之间加一个space让它们锁起来更漂亮

图片:

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>

你能帮我解决一下吗？当我手动添加 space 时，link 文本会转到图标下方。

完整代码link：

CSS: Full Code

HTML: Full Code

Answer 1

人们通常将图标元素保留为空节点，然后将文本内容放在它之后。然后为图标添加边距以获得适当的间距：

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

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

<span> 标签在技术上不是必需的，但通常要避免纯文本节点。

Answer 2

在文本和图标之间使用space或。另外请把 ; 放在

之后

Answer 3

尝试 Fontawesome 中提到的以下方法之一 examples page

文本在 i 标签外，并在

之间添加一个 space

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

使用 ，以下代码来自Fontawesome网站

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

如果您不想更改标记 (html)，请使用以下 CSS

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

Answer 4

将服务名称放在 i 标记之外。您可以将 margin-right: 10px; 样式添加到 i 元素，或 display: flex; justify-content: space-between; 到 a 标签。

Answer 5

最好为社交图标设置一个基数class

/* 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>

如何在 CSS 中的图标和文本之间制作 space

How to make a space between icon and text in CSS

html

css

font-awesome