Question

我想知道我的代码有什么问题，它导致图标以错误的方式显示，显示在左上方并被剪切，而不是正确地显示在整个中心位置。

<link rel="stylesheet" id="simple-css" href="//cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" type="text/css" media="all">


<div id="button-offer">
<div class="container">
<div class="text-center">
<div class="btn btn-offer btn-lg btn-watch" data-toggle="modal" data-target="#player-modal">
<span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Read Intro
</div>
<a class="btn btn-offer btn-lg btn-download" onclick="pdf_demo_download()">
<span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Download
</a>
</div>
</div>
</div>

应该这样显示它们：https://images2.imgbox.com/f8/5f/4O2RA6V1_o.png 实际上是这样显示它们的方式：https://images2.imgbox.com/bc/e1/7sLUZlog_o.png

编辑：添加了CSS按钮代码部分

#button-offer{padding:15px 0;background:#000;}
.btn-offer:focus,.btn-offer:active{color:#fff;}
.btn-watch{background-color:#c00;}
.btn-download{background-color:#c00;}
.btn-offer{outline:none!important;color:#fff;padding:15px 20px 15px 70px;text-decoration:none;border-radius:3px;font-family:Oswald,Sans-serif;font-weight:700;letter-spacing:1px;text-shadow:0 1px 1px #000;position:relative;text-transform:uppercase}
.btn-bg{color:#fff;display:inline-block;position:absolute;width:30px;height:54px;top:0px;left:-1px;background-color:#333;border-radius:3px 0 0 3px}
.btn-bg:before{background-color:#9C360E;content:"";position:absolute;top:8px;width:38px;height:38px;background:inherit;border:inherit;border-left-color:transparent;border-bottom-color:transparent;border-radius:0 4px 0 0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);left:10px;border-right:1px solid;border-top:1px solid}
.btn-bg .icon{position:relative;top:16px;left:7px}
.btn-watch:hover{color:#fff;background-color:#6f0404;}
.btn-download:hover{color:#fff;background-color:#6f0404;}
.sub-section span, .widget-title span{background:#c00;}

Answer 1

按钮在哪里？您应该使用而不是。语法应如下所示阅读简介

，它应该按预期显示图标。

Answer 2

您只是遵循此代码并使用了它

#button-offer{padding:15px 0;background:#000;}
.btn-offer:focus,.btn-offer:active{color:#fff;}
.btn-watch{background-color:#c00;}
.btn-download{background-color:#c00;}
.btn-offer{outline:none!important;color:#fff;padding:15px 20px 15px 70px;text-decoration:none;border-radius:3px;font-family:Oswald,Sans-serif;font-weight:700;letter-spacing:1px;text-shadow:0 1px 1px #000;position:relative;text-transform:uppercase}
.btn-bg{color:#fff;display:inline-block;position:absolute;width:30px;height:45px;top:0px;left:-1px;background-color:#333;border-radius:3px 0 0 3px}
.btn-bg:before{background-color:#9C360E;content:"";position:absolute;top:8px;width:38px;height:28px;background:inherit;border:inherit;border-left-color:transparent;border-bottom-color:transparent;border-radius:0 4px 0 0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);left:10px;border-right:1px solid;border-top:1px solid}
.btn-bg .icon{position:relative;top:16px;left:7px}
.btn-watch:hover{color:#fff;background-color:#6f0404;}
.btn-download:hover{color:#fff;background-color:#6f0404;}
.sub-section span, .widget-title span{background:#c00;}
i{position: absolute;
  padding-top: 11px;
  font-size: 25px !important;
}

<link rel="stylesheet" id="simple-css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">


<div id="button-offer">
<div class="container">
<div class="text-center">

<button class="btn btn-offer btn-lg btn-watch" data-toggle="modal" data-target="#player-modal"><span class="btn-bg"><i class="fa fa-share" aria-hidden="true"></i></span> Read Intro</button>
</div>
</div>
</div>

如何正确显示按钮上的图标

2 个答案: