减少FontAwesome

Question

我有以下带有以下输出的HTML代码段：

<div id="share">

  <!-- facebook -->
  <a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&title={{title}}" target="blank"><i class="fa fa-facebook fa-1x"></i>3232</a>

  <!-- twitter -->
  <a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"><i class="fa fa-twitter fa-1x"></i>232</a>

  <!-- google plus -->
  <a class="googleplus" href="https://plus.google.com/share?url={{url}}" target="blank"><i class="fa fa-google-plus"></i>532</a>

  <!-- linkedin -->
  <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&source={{source}}" target="blank"><i class="fa fa-linkedin fa-1x"></i>242</a>

  <!-- pinterest -->
  <a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&url={{url}}&is_video=false&description={{title}}" target="blank"><i class="fa fa-pinterest-p"></i>125</a>

</div>

我正在使用FontAwesome。如您所见，文本在输出中溢出。

我可以将图标（f，G +等）向上移动一点，还可以缩小圆圈的大小，包括图标和数字的字体吗？

我也使用了fa-1x类，但这没有帮助。这是整个CSS和HTML

Link to CodePen

提前感谢任何指示。

Answer 1

这样的话，你可以用text包裹span，然后用font-size进行播放。

#share a span {
    font-size: 14px;
    display: block;
}

/* container */

#share {
  width: 100%;
  margin: 100px auto;
  text-align: center;
}


/* buttons */

#share a {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 8px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.15s linear;
}

#share a:hover {
  opacity: 1;
}

.fa {
  font-size: 20px;
}


/* icons */

#share i {
    position: relative;
    top: 4px;
    font-size: 20px;
}


/* colors */

.facebook {
  background: #3b5998;
  font-size: 2px;
}

.twitter {
  background: #55acee;
}

.googleplus {
  background: #dd4b39;
}

.linkedin {
  background: #0077b5;
}

.pinterest {
  background: #cb2027;
}

a:-webkit-any-link {
    text-decoration: none!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />


<div id="share">

  <!-- facebook -->
  <a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&title={{title}}" target="blank"><i class="fa fa-facebook fa-1x"></i><span>3232</span></a>

  <!-- twitter -->
  <a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"><i class="fa fa-twitter fa-1x"></i><span>232</span></a>

  <!-- google plus -->
  <a class="googleplus" href="https://plus.google.com/share?url={{url}}" target="blank"><i class="fa fa-google-plus"></i><span>532</span></a>

  <!-- linkedin -->
  <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&source={{source}}" target="blank"><i class="fa fa-linkedin fa-1x"></i><span>242</span></a>

  <!-- pinterest -->
  <a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&url={{url}}&is_video=false&description={{title}}" target="blank"><i class="fa fa-pinterest-p"></i><span>125</span></a>

</div>

第二版：

#share span {
  display: block;
}

#share div {
  display: inline-block;
}


/* container */

#share {
  width: 100%;
  margin: 100px auto;
  text-align: center;
}


/* buttons */

#share a {
  width: 35px;
  height: 35px;
  display: inline-block;
  margin: 8px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.15s linear;
}

#share a:hover {
  opacity: 1;
}

.fa {
  font-size: 20px;
}


/* icons */

#share i {
  position: relative;
  top: 4px;
  font-size: 20px;
}


/* colors */

.facebook {
  background: #3b5998;
  font-size: 2px;
}

.twitter {
  background: #55acee;
}

.googleplus {
  background: #dd4b39;
}

.linkedin {
  background: #0077b5;
}

.pinterest {
  background: #cb2027;
}

a:-webkit-any-link {
  text-decoration: none!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />


<div id="share">

  <!-- facebook -->
  <div><a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&title={{title}}" target="blank"><i class="fa fa-facebook fa-1x"></i></a><span>3232</span></div>

  <!-- twitter -->
  <div><a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"><i class="fa fa-twitter fa-1x"></i></a><span>232</span></div>

  <!-- google plus -->
  <div><a class="googleplus" href="https://plus.google.com/share?url={{url}}" target="blank"><i class="fa fa-google-plus"></i></a><span>532</span></div>

  <!-- linkedin -->
  <div><a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&source={{source}}" target="blank"><i class="fa fa-linkedin fa-1x"></i></a><span>242</span>
  </div>

  <!-- pinterest -->
  <div><a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&url={{url}}&is_video=false&description={{title}}" target="blank"><i class="fa fa-pinterest-p"></i></a>
    <span>125</span></div>
</div>

Answer 2

您可以将以下规则添加到CSS：

#share a {
    display: inline-grid;
    font-size: 10px;
    text-decoration: none; /* Personal taste */
}

以下是更新版本：https://codepen.io/anon/pen/PEWBXp?editors=1100，请注意图标不居中或文字不适合圈子。

Answer 3

首先，删除此规则#share i

然后添加此规则：

i.fa {
  padding-top: 6px;
}

并将#share a font-size缩减为16px，就是这样。

检查更新后的CodePen