Try adding this

#belowcontent .moduletable.fa:before {content: " ";}

#belowcontent .moduletable. h3.fa-money:before {content: "\f0d6";}

Many Thanks

but I try to extend it to show the icon on the right side and with some space after the h3. Bit neverthink happen!

#belowcontent .moduletable. h3.fa-money:before {
content: "\f0d6";
float: right;
padding-left: 6px;

}

Any Idea?
Ricardo

Try instead using :after

Now I use the h3 with a specifical class together with the icon and icon-calender classes. the css look like:

h3.title-text {
color:#fff !important;
font-weight: normal;

display: inline-block;
background-color: #a0a73a;
background-image: linear-gradient(to bottom, #a6ad3c, #979e37);
background-repeat: repeat-x;
border-bottom: 4px solid #82872f;
border-radius: 3px;
margin: 0px -10px 20px;
padding: 6px 20px;
}

h3.icon-calendar:before{
float: right;
padding-left: 10px;
}

but unfortulantelly something change the font-family and font-size

I try to put fant-family: open sans, on the h3.title-text class and the icon disapear. How can I have both toguether in the h3 tag?

Ricardo

never happens

I try so:


#belowcontent .moduletable. h3.fa-money:before {
content: "\f0d6";
}


#belowcontent .moduletable. h3.fa-money:after{
float: right;
padding-left: 10px;

}

and so:

#belowcontent .moduletable. h3.fa-money:after {
content: "\f0d6";
float: right;
padding-left: 10px;
}

and it´s change nothing

Ricardo

Try using :after rather than floating it - may give more flexibility with the css

and remove the float - still not working?

I m not sure if I understand you suggestion,
I try
#belowcontent .moduletable. h3.fa-money:after{
content: "\f0d6";
padding-left: 10px;

}

and also I try:

#belowcontent .moduletable. h3.fa-money:before {
content: "\f0d6";
}

#belowcontent .moduletable. h3.fa-money:after{
padding-left: 10px;
}

both make no effect on the h3 tour cost with the money icon, you need scroll down to see

www.yoga-retreats.in/yoga-trekking/yoga-and-trekking-in-the-himalaya-bhrigu-lake-trek.html

works for me

#belowcontent .module-inner h3.fa-money:after {
content: "\f0d6";
padding-left:5px
}

#belowcontent .module-inner h3.fa-money:before {
content: " ";
}

Your styling has extra unwanted .

Unwanted? don´t understand...

How can I restore the correct font-family

at the on the clausure :before and :after never happen.

some other form to realize it?

Ricardo

If you vew the css - this bit is wrong

.moduletable.

extra dot meaning a class - which you don't want

you thuink this line?

#belowcontent .moduletable.fa:before {content: " ";}

All the stuff you tried has the error

#belowcontent .moduletable. h3.fa-money:after{
content: "\f0d6";
padding-left: 10px;

}

and also I try:

#belowcontent .moduletable. h3.fa-money:before {
content: "\f0d6";
}

#belowcontent .moduletable. h3.fa-money:after{
padding-left: 10px;
}

With using :after hopefully we should be able to target the text and the icon separately with before we can't

sorry, for me it ´s no clear

this is my code:
#mainWrap .zen-container ul:before, #belowcontent .module-inner ul:before {content: " ";}

#belowcontent .moduletable.fa:before,
#belowcontent .module-inner h3.fa-money:before
{content: " "; }


#belowcontent .module-inner h3.fa-money:after {
content: "\f0d6";
padding-left: 10px
}

the result can you see here

www.yoga-retreats.in/yoga-trekking/yoga-and-trekking-in-the-himalaya-bhrigu-lake-trek.html

what I try now is to have the h3 with the same font-family and fint size as defined on the template (open sans)m but until now was not sucessfull. Any idea?

Many Thanks in advance
Ricardo

We need to target the text without changing the icon font hence why you need an after rather than a before

with a :before and :after we can hopefully target one without the other
with only a before it won't work

the icon needs to be after with no float