Question

我正在尝试创建如下图所示的按钮。

我使用堆叠的Font Awesome图标将图标放在圆圈上面，它看起来像这样：

（忽略底部的灰线。这是截图不佳的结果。）

但是，正如您所看到的，图标有点偏差。理想情况下，我想将它们向上推，使它们在圆圈中垂直居中，并使圆圈变大或图标变小以获得漂亮的填充，如示例中所示。我还想更改我不知道该怎么做的圆圈的颜色并添加悬停效果（比如将图标更改为白色）。

这是我的代码。

.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row footer">
  <!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">

    <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
            </span>

    <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
            </span>
  </div>
</div>

Answer 1

图标是文字，这意味着您可以像修改任何角色一样修改它们。

只需添加以下内容：

.fa-linkedin, .fa-envelope-o {
  font-size:12px;  
}
.fa-circle {color:red;}

对于你的css但是我建议你把你自己的类添加到你的图标中，这些图标被覆盖了很棒的字体css，如 fiddle

Answer 2

对于第一个问题，您可以使用CSS line-height

span.fa-stack {
  line-height: 37px;
}

关于第二个问题，您可以将font-size应用于FA图标，如下所示：

span.fa-stack > i:nth-of-type(2) {
  font-size: 13px; /* Or whatever value looks best */
}

或者如果您愿意，您甚至可以再次使用transform: scale();：

span.fa-stack > i:nth-of-type(2) {
  transform: scale(0.8); /* Or whatever value looks best */
}

对于:hover效果，您可以使用transform: scale();，我认为这是最好的悬停效果，并列cursor: pointer;：

span.fa-stack:hover {
  transform: scale(1.3); /* Or whatever value looks best */
  cursor: pointer;
}

要将color应用到圈子中，它很简单：

span.fa-stack:nth-of-type(1) {
  color: #2D79AF; /* Or whatever color looks best */
}

＆＃13;

.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
  display: table;
  align-items: center;
}
span.fa-stack:hover {
  transform: scale(1.3);
  cursor: pointer;
}
span.fa-stack {
  line-height: 36px;
}
span.fa-stack:nth-of-type(1) {
  color: #2D79AF;
}
span.fa-stack > i:nth-of-type(2) {
  font-size: 14px;
}
#copyright {
  padding-top: 6px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row footer">
<!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
  </div>
</div>

＆＃13;

无论如何，图标只是文字。

Answer 3

要手动调整图标的位置，您必须单独创建黑色背景，然后将图标放在其中。

最好的方法是使用ul li，如下所示

<ul class="social_icon">    
     <li>
        <a href="https://www.facebook.com/xxxxxxx" class="facebook">
          <i class="fa fa-facebook"></i>
        </a>
     </li>
     <li>
        <a href="https://twitter.com/xxxxxx" class="twitter">
          <i class="fa fa-twitter"></i>
        </a>
     </li>
     <li>
        <a href="https://in.linkedin.com/xxxxxxxx" class="linkedin">
          <i class="fa fa-linkedin"></i>
        </a>
     </li> 
     <li>
        <a href="mailTo:mail@xxxxxxxxxx.com" class="email">
           <i class="fa fa-envelope"></i>
        </a>
     </li> 
</ul>

CSS将会是这样的：

.social_icon {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
}

.social_icon li {
    width: 38px;
    height: 38px;
    background: black;
    border-radius: 100%;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
}

.facebook i {
    position: relative;
    top: xx;
}

如何使用Font Awesome图标（和悬停效果）制作圆形按钮？

3 个答案: