Question

已更新

如何才能获得Facebook图标上的删除按钮，如上图所示？我想把右上角的删除按钮添加到Facebook图标.... DEMO

＆＃13;

.fa-remove{
    float:right;
    top:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.css">


  </head>

  <body>
 <div class="form-group social col-xs-2">
                    <a class="btn btn-lg btn-social-icon btn-facebook center-block">
                        <span class="fa fa-facebook"><span class="fa-remove"></span>
                    </a>
                    <p class="social-icon-name">Facebook</p>
                </div>
                

  </body>

</html>

＆＃13;

Answer 1

这是绝对的位置。

您的代码中有很多错误。但这不是，你需要什么。

你需要这个：

 <a class="btn btn-lg btn-social-icon btn-facebook center-block">
   <span class="facebook">
  </a>
  <span class="fa-remove"></span>

 .fa-remove{ 
  position:absolute; 
  top:0; 
  right:15px; 
  z-index:9999; 
  float:right; 
  top:-30px; 
  cursor:pointer; 
  color: #fff; 
  border: 1px solid #AEAEAE; 
  border-radius: 30px; 
  background: #605F61; 
  font-size: 31px; 
  }

Answer 2

您的代码中存在一些错误，但您可以尝试此操作。

<a class="btn btn-lg btn-social-icon btn-facebook center-block">
    <span class="fa fa-remove"></span>
    <span class="fa fa-facebook fa-2x"></span>
</a>

在你的CSS中

.fa.fa-remove {
    color: #f00;
    left: 50px;
    position: relative;
    top: -15px;
}

相应地更改顶部和左侧的值。

Answer 3

使用以下代码可能会对您有所帮助

<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.css">
<div class="form-group social col-xs-1">
                    <a class="btn btn-lg btn-social-icon btn-facebook center-block">
                        <i class="fa fa-facebook"><i class="fa fa-remove"></i> </i>
                    </a>
                    <p class="social-icon-name">Facebook</p>
                </div>

我怎样才能在Facebook图标上删除按钮

3 个答案: