html - Bootstrap 图标设置自动调整大小太小

Question

找到一个解决方案，使我的图标在容器内(水平和垂直) 自动居中。

但现在当视口(viewport)为智能手机大小时，图标会调整得非常小，而容器会调整得太大。

   <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/