使用社交媒体图标创建css格式

Question

我有这个设计，我想在html和CSS中实现。我已经完成了背景部分，社交媒体按钮，还编写了保持连接的文本。我无法得到的是如何围绕文本制作线条。 我尝试了<hr>标签，但是将行和文本放在不同的行中，即需要3行。任何人都可以告诉我如何在css中创建这个图像

目前我的代码是：

＆＃13;

＆＃13;

<footer style="background-color:black; height:100px; margin-bottom:0px;">
  <div class="row">
    <div class="col-lg-12">
      <center>
        <div class="row">
          <p>Stay Connected</p>
          <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
            <li> <a href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li> <a href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li> <a href="#"><i class="fa fa-google-plus"></i></a>
            </li>
          </ul>
        </div>
      </center>
    </div>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;