adjust width title with icon in bootstrap accordion

[chechu]

When the title of the accordion in Bootstrap is very long, it comes very close to the icon on the right. I would like to add some space in between the icon and the title.

This is the css code:

.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
}

And this is the 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>

I added padding and margin to the a:after, but that doesn't do the trick. What should I add so that, when the text comes close to the icon on the right, it continues on the next line?

[coothead]

Hi there chechu,

try changing this...

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

...to this...

.card-header a {
    padding: 15px 40px 15px 20px; /* adjust the 40px to suit */
    display: block;
    position: relative;
    color: #5d5d5d;
}

coothead

[chechu]

Lovely, that did the trick.
Thanks!

[coothead]

No problem, you're very welcome.

coothead