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