css - 在 Bootstrap 4 中使用 Font Awesome
问题描述
我在使用 Bootstrap 4 开发并尝试创建一个 Font Awesome 按钮时发现的一个主要问题,当我创建一系列按钮时,我得到不同大小的按钮,获得相同大小按钮的唯一方法是为每个按钮使用相同的字体一所以问题是由于 Font Awesome 大小对于每个字体都不相同。
<a class="btn btn-outline-warning" type="button" href="#">
<i class="fa fa-edit"></i>
</a>
<a class="btn btn-outline-danger" type="button" href="#">
<i class="fa fa-trash"></i>
</a>
有没有一个实际的例子来解决这个问题?
解决方案
虽然您当然可以手动调整 Font Awesome 图标的字体大小,但我建议采用一种不太引人注目的方法:.fa-fw
. 这是一个实用类,它是 Font Awesome 样式表的一部分,有助于统一字体的宽度。根据 4.7.0 文档:
用于
fa-fw
将图标设置为固定宽度。当不同的图标宽度无法对齐时非常适合使用。在导航列表和列表组等方面特别有用。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a class="btn btn-outline-warning" href="#">
<i class="fa fa-fw fa-edit"></i>
</a>
<br>
<a class="btn btn-outline-danger" href="#">
<i class="fa fa-fw fa-trash"></i>
</a>
<br>
<a class="btn btn-outline-success" href="#">
<i class="fa fa-fw fa-wrench"></i>
</a>
<br>
<a class="btn btn-outline-info" href="#">
<i class="fa fa-fw fa-stop"></i>
</a>
在上面的示例中,您可以看到如何.fa-fw
调整图标间距并且一切看起来都一样。您可能会注意到,我确实也type="button"
从您的锚标记中删除了,因为这导致 Bootstrap 没有应用ban-outline-*
您声明的完整 CSS。
推荐阅读
- vba - MS Access 表导出为 excel 文件到用户定义的文件夹
- api - 多身份验证 API 令牌 laravel 5.4
- c# - C# String EndsWith 返回真问题
- javascript - 返回由 JS 承诺处理的有效 JSON 对象
- java - 如何识别生成的 swagger 文档中为什么有不需要的类型。如何防止它?
- popup - 关闭 VS Code 中的隐私弹出窗口
- postgresql - 从 RPM 安装 pgpool
- laravel - Apache 的多租户虚拟主机设置
- javascript - REST/JSON——响应的字段由浏览器静默递增?
- r - 标记基于参数的记录第一次出现在 r 数据框中