Изменение размера значка для соответствия div

Question

У меня есть div, который может содержать от 0 до 7 значков, в зависимости от выбора. Значки: ionicons. В настоящее время мой код:

<div class="item item-text-wrap" style="text-align:center;"> 
    <button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button> 
    <button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button> 
    <button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button> 
    <button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button> 
    <button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button> 
    <button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button> 
    <button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button> 
</div> 

Возможно ли это сделать так, чтобы иконы изменялись на одну строку точно? Проблема сейчас в том, что если их размер экрана слишком мал, это занимает несколько строк.

EDIT: Кроме того, я начал использовать ionic grid system, теперь проблема заключается только в том, что при меньших размерах экрана между ними нет интервала между ними, можно ли разбить две строки, если пространство между ними будет слишком маленьким ?

Answer 1

Эта проблема может быть легко решена, если вы поместите таблицу.

Это код.

<table style="text-align: center; margin: auto;"> <!-- to make the buttons in the center--> 
    <tbody> 
     <tr> 
      <td><button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button></td> 
     </tr> 
    </tbody> 
</table>