Give this approach a try. I have eliminated the m-x-2
classes from the icons and included text-xs-center
in their containers. This adjustment is intended to align inline elements such as the font awesome icons. Keep in mind that there is no center
value for the display
property.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="row">
<div class="bg-inverse p-x-1 col-xs-12 default-1 ">
<div class="row">
<div class="col-xs-2 offset-xs-2 text-xs-center">
<i class="fa fa-facebook-square fa-3x p-y-1" aria-hidden="true"></i>
</div>
<div class="col-xs-2 offset-xs-1 text-xs-center">
<i class=" fa fa-twitter-square fa-3x p-y-1" aria-hidden="true"></i>
</div>
<div class="col-xs-2 offset-xs-1 text-xs-center">
<i class=" fa fa-youtube-play fa-3x p-y-1" aria-hidden="true"></i>
</div>
</div>
</div>
</div>