Gilberto Quintero
Gilberto Quintero

Reputation: 397

Use boostrap icon as background for div

I am trying to achieve something like this. I want to use a bootstrap icon as background

enter image description here

Upvotes: 0

Views: 2771

Answers (1)

Shank
Shank

Reputation: 1398

Did this fast, you can modify according to your needs.

Try this:

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>

Upvotes: 1

Related Questions