在Bootstrap手风琴中使用图标调整宽度标题

Question

当Bootstrap中的手风琴标题很长时，它非常靠近右侧的图标。我想在图标和标题之间添加一些空间。

这是CSS代码：

.card-header a {
padding: 15px 20px;
display: block;
position: relative;
color: #5d5d5d;
}

.card-body {
 color: #777;
 font-family: 'Raleway', sans-serif;
 line-height: 26px;
}

.card-header a:hover {
 background-color: #ff4d1c;
 color: #fff;
 border-radius: 2px;
 text-decoration: none;
 }

.card-header.active a {
 color: #ff4d1c;
}

.card-header.active a:hover {
 color: #fff;
}

.card-header.active a:after {
 content: '\ef9a';
 color: #ff4d1c;
}

.card-header a:after {
 content: '\efc2';
 font-family: 'IcoFont';
 font-size: 14px;
 position: absolute;
 right: 15px;
 top: 16px;
 color: #ff4d1c;
}

.card-header.active a:hover:after,
.card-header a:hover:after {
 color: #fff
}

这是html：

<div class="card-header" role="tab" id="faq1"><a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">here comes the long text</a></div>

我在a：after中添加了填充和边距，但这并不能解决问题。我应该添加些什么，以便当文本靠近右侧图标时，它在下一行继续？