您好，我正在使用 Font-awesome 和 bootstrap 4.请先检查我的脚本
<div class="row"><div class="col"><div class="row"><span class="fa fa-building fa-5x text-center"></span><div class="row"><h3 class="text-center">公司简介</h3>
<div class="col"><div class="row"><span class="fa fa-shopping-cart fa-5x text-center"></span>
<div class="row"><h3 class="text-center">购物车</h3>
<div class="col"><div class="row"><span class="fa fa-industry fa-5x text-center"></span>
<div class="row"><h3 class="text-center">库存控制</h3>
<div class="col"><div class="row"><span class="fa fa-users fa-5x text-center"></span>
<div class="row"><h3 class="text-center">用户管理</h3>
通过我上面的脚本，我得到了这个
如您所见，fa 图标不在文本的中心.如何在中心制作 fa 图标?
将 text-center 类添加到图标周围的 div 中，而不是像这样:
Good day, I'm using Font-awesome and bootstrap 4. Please check my Script first
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<span class="fa fa-building fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Company Profile</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-shopping-cart fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Shopping Cart</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-industry fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Inventory Control</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-users fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">User Management</h3>
</div>
</div>
</div>
</div>
with my script above i get this
as you can see, the fa icons is not at the center of text. How can i make the fa-icon in center ?
Add the text-center class to the div surrounding your icon instead of of the icon span like so:
<div class="row text-center">
<span class="fa fa-users fa-5x"> </span>
</div>
这篇关于在字体真棒图标下方居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！