时间戳

首页 > 解决方案 > 如何在按钮上正确显示图标

css - 如何在按钮上正确显示图标

问题描述

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

<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;}

标签： css

解决方案

这里的按钮在哪里？你应该使用而不是 . 语法应如下所示 阅读简介

它应该按预期显示图标。

推荐阅读