引导按钮文本未调整大小答案

【问题标题】：Bootstrap Button Text not sizing引导按钮文本未调整大小
【发布时间】：2018-06-06 21:35:38
【问题描述】：

我正在使用引导程序，并且有几个社交媒体按钮。我需要它们更大，并且我已经使社交图标足够大，但我似乎无法让文本同样增加。有人有想法么？ HTML：

<a role="button" class="btn btn-primary btn-tw col-6 mx-1 my-1" 
href="https://twitter.com/alvanhumane?lang=en" target="_blank"><i class="fab 
fa-twitter-square fa-5x"></i> Twitter</a>
<a role="button" class="btn btn-primary btn-in col-6 mx-1 my-1" 
href="https://www.instagram.com/explore/locations/99236675/al-van-humane- 
society/" target="_blank"><i class="fab fa-instagram fa-5x"></i> 
Instagram</a>

和 CSS：

a.btn-tw {
    background-color: #00acee;
    font-size: 5em;
}

a.btn-in {
    background-color: #3f729b;
    font-size: 5em;
}

【问题讨论】：

stackoverflow.com/questions/17579469/…

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试使用!important。它将覆盖在它之后加载的任何内容

a.btn-in {
    background-color: #3f729b;
    font-size: 5em !important;
}

您还可以在 HTML 文档的 <head> 部分中的自定义样式表之后加载引导 CSS 样式表。将引导链接放在您自己的上方。

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

【讨论】：

我的 CSS 在我的引导之后被加载，但是 !important 修复了它。需要注意的一点是 5em 和 !important 之间不应该有分号。谢谢！