Bootstrap 4 Buttonwith iFont图标将文本推到外面

Question

我正在尝试创建一个带有图标的下载按钮，使用Bootstrap 4和Font awsome作为图标。 事情就是我使用以下方式添加图标：

<i class="fa fa-mobile fa-3x pull-left" ></i>

它将文本从按钮中推出，我无法使按钮宽度与内容一起增长。

这是我的jsFiddle：

http://jsfiddle.net/x1hphsvb/48/

Answer 1

那是因为你正在浮动你的<i>元素。

从pull-left移除<i>课程并尝试：

<a class="d-inline-flex flex-nowrap">
</a>

并为您的txtAppStore div添加保证金等级。例如：

<div id="txtAppStore" class="ml-3"></div>

工作小提琴：http://jsfiddle.net/x1hphsvb/50/

Answer 2

主要问题是我有以下CSS，我错过了，并限制了我的按钮大小：

.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}

我已经发表评论，根据第一个答案进行了一些更改，现在看起来很糟糕，谢谢！ http://jsfiddle.net/dumitrudan608/x1hphsvb/52/

Answer 3

只需为#txtAppStore定义宽度，或者将其全部放入Bootstrap div，如col-md-3并将其居中，然后在col-md-3中你可以按下这个按钮，宽度为：100％;例如，在宽度为80％的txt内。 最快的解决方案，但不是“自动”是：

#txtAppStore {
  width: 150px;

}