html - 如何将 Logo 添加到 css 中的以下 span 标记

Question

需要在下面的span标签中添加一些logo图片

<div class="container">
        <div class="col-md-4">

         <p><span class="glyphicon glyphicon-home"><br></span><b>LARGEST WAREHOUSES</b></p>
         <h6>Transport provide best theme for lioeiusmod tempor dolor list</h6>

<p><span class="glyphicon glyphicon-pushpin"><br></span><b>GOOD TRACKING SUPPORTS</b></p>
         <h6>Transport provide best theme for lioeiusmod tempor dolor list</h6>
</div>
</div>

我需要在这个 Bootstrap 默认字体图像附近添加 Logo

<span class="glyphicon glyphicon-home">
<span class="glyphicon glyphicon-pushpin">

我需要外部 css 文件我也有图像文件夹

Answer 1

您可以使用伪元素 ::before 和 ::after

.logo {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
}

.logo::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  margin: auto;
  background-image: url('http://imagespng.com/Data/DownloadLogo/Success-Transparent.png');
  background-position: center;
  background-size: contain;
}

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

<div class="container">
  <div class="col-md-4">
    <p><span class="logo"><br></span><b>LARGEST WAREHOUSES</b></p>
    <h6>Transport provide best theme for lioeiusmod tempor dolor list</h6>

    <p><span class="logo"><br></span><b>GOOD TRACKING SUPPORTS</b></p>
    <h6>Transport provide best theme for lioeiusmod tempor dolor list</h6>
  </div>
</div>

相应的风格

Fiddle