Docs

[Kelalaina]

Hi! My icons aren’t lining up correctly with each line of text.

I’m using the Visual Composer, and I’ve attached screenshots of what it looks like on the Frontend as well as the coding I’m using for the text.

The page I’m referencing is: http://www.kellialaina.com/sobc-sp

Thanks so much for your help!

[Christian]

Hey there,

Please remove the <div style="font-size:125%"> wrapping your text (see attachment).

Thanks.

[Joao]

Hi There,

It seems like your icons are in a different div from your text.

Have they ever been aligned? Did something change?

If not, simply change your code structure and have it like this instead:

<div style="font-size: 125%;"><i class="x-icon-pagelines" data-x-icon="" aria-hidden="true"></i>You know you need a better marketing plan, but you don’t have time to waste.</div>

This way the icons will be aligned with the text.

Hope that helps,

Joao

[Kelalaina]

Hi! Thanks so much for your help!

I wasn’t sure if you wanted me to follow both steps you listed above (this one: <div style=”font-size:125%”> wrapping your text (see attachment) and this one: <div style=”font-size: 125%;”><i class=”x-icon-pagelines” data-x-icon=”” aria-hidden=”true”></i>You know you need a better marketing plan, but you don’t have time to waste.</div>).

I made the second coding correction which helped to get the icon in-line with the text, but the smaller one still appears above it.

Do you have any suggestions for getting rid of the smaller one that’s out-of-line from the text?

My apologies if the first suggestion you gave will fix it. I really have no clue what I’m doing!

(I’ve included a screenshot of what’s showing now on the frontend.)

Thank you!!

[Joao]

Hi There,

I am sorry if you got confused, by mistake Christian and I answered you at the same time. (I was 4 minutes late actually, I did not realized he had answered you already – my bad)

Any of the solutions will work. But since you choosed the second option, please follow this:

Since now you are adding the icon inside the div you need to delete the line of code the icon outside, before, the div.

<i class="x-icon-pagelines" data-x-icon="" aria-hidden="true"></i>
You can see it here on this picture:

https://s3.amazonaws.com/community-themeco/app/uploads/2016/05/12093438/2016-05-12_22h32_38.png

So the code <i class="x-icon-pagelines" data-x-icon="" aria-hidden="true"></i> show appear just one time. If the code is there two times, two icons will appear.

*** As you have 3 sentences with the icon in front, the icon code will be used 3 times on this section of your page, one time inside each div for each sentence.

Hope that helps and sorry for the confusion above.

Joao

[Author]

Posts