使用boostrap图标作为div的背景

Question

我正在努力实现这样的目标。我想使用bootstrap图标作为背景

Answer 1

这很快，你可以根据你的需要进行修改。

试试这个：

p {
  margin-bottom: 1em;
  color: #fff;
  font-size: 15px;
}

#wrap {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
  position: relative;
  background: #007BC5;
}

.inner {
  position: relative;
  z-index: 2;
 
}

#wrap .glyphicon {
  
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  font-size: 90px;
  color: #639CC6;
  margin-top: 25%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="wrap">
  <span class="glyphicon glyphicon-thumbs-up"></span>
  <div class="inner">
  <h1>Heading</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
    
  </div>
</div>