title: how to create a resposnsive diamond shaped div with icons and border?
body: <p>I am trying to create a diamond shaped div with a border around it. but the problem i am facing is that it needs to be responsive and the shape is also unusual. attaching a image for reference.</p>
  
  <p><img src="https://i.imgur.com/IwHd3py.jpg" alt="Imgur"></p>
  
  <p>I have created a custom icon font using icomoon app. The text next to the icon links also need to be responsive</p>
  
  <p>My attempt so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.diamond {
    width: 60px;
    height: 60px;
    border: 1px solid #626262;
    margin-top: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .diamond i {
    display: inline-block;
    margin: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .diamond .top {
    margin-top: -10px;
    margin-bottom: 10px;
  }
  .diamond .bottom {
    margin-top: 10px
  }
  .diamond .top.left,
  .diamond .bottom.left {
    margin-left: -10px;
  }
  .diamond .top.right,
  .diamond .bottom.right {
    margin-right: -10px;
  }
  i.socialicn {
    color: #fff;
    padding: 6px 6px;
    background-color: #8a4d8e;
    border-radius: 50%;
    vertical-align: middle;
    font-size: 17px;
  }
  i.socialfb {
    color: #fff;
    padding: 6px 10px;
    background-color: #8a4d8e;
    border-radius: 50%;
    vertical-align: middle;
    font-size: 17px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6 col-md-6 col-xs-6"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 col-md-12 col-xs-12"&gt;
          &lt;div class="diamond center-block"&gt;
            &lt;div class="clearfix"&gt;
              &lt;div class="pull-left"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook top left socialfb"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter top right socialicn"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="clearfix"&gt;
              &lt;div class="pull-left"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope bottom left socialicn"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-linkedin bottom right socialicn"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>