Bootstrap图标设置自动调整大小

Question

找到一个解决方案，自动将容器中的图标（水平和垂直）置于中心位置。

但是现在当视口是智能手机大小时，图标调整得非常小，容器调整得太大。

   <section id="icon">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-2 col-xs-offset-3">
          <a href="https://github.com/RyanGarant"><img class="img-responsive" alt="github" src="http://image.flaticon.com/icons/svg/25/25231.svg"></a>
        </div>
        <div class="col-xs-2">
           <a href="http://stackoverflow.com/users/6502003/ryan-garant"><img alt="stackoverflow" src="http://ryangarant.com/stacko.png"></a>
        </div>
        <div class="col-xs-2">
         <a href="https://www.linkedin.com/in/ryantgarant"><img alt="linkedin" src="http://image.flaticon.com/icons/svg/145/145807.svg"></a>
        </div>
      </div>
    </div>
  </section>

    /*Icon Section*/
#icon .col-xs-2 {
  background: white;
  height: 100px;
}
#icon .container-fluid {
  background: white;
}
#icon img {
  height: 100%; width: 100%; object-fit: contain;
}

在其父容器中保持图标比例的最佳做法是什么？

Answer 1

使用FontAwesome图标做了诀窍:)

http://fontawesome.io/