Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 23, 2016 at 8:33 pm #570614
    Daniel

    Hi there

    I trying to create a simple list with an icon to the left of the title, but the text below doesn’t align correctly:

    This is the code I entered into the Text Box:

    <p>[av_font_icon icon='ue841' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='#efbb20'][/av_font_icon]<strong>Header</strong><br>First item<br>Second item<br>Third item</p>

    Upon saving, however, Enfold removes the p-tags and br-tags and changes the code to this:

    [av_font_icon icon='ue841' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='#efbb20'][/av_font_icon]<strong>Header</strong>
First item
Second item
Third item

    I found another Enfold page http://bit.ly/1JsTzQ3 where you can see what I am trying to achieve. Hope that helps :-)

    Thanks!
    Daniel

    January 24, 2016 at 3:58 am #570660
    Elliott

    Hey Daniel!

    The link you provided is not your own site correct? Send us a link to your page where the issue is happening on and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    January 24, 2016 at 12:40 pm #570764
    Daniel

    Hi Elliot,

    Thanks for looking into this. Please find the details in the private section of this post. The link I posted earlier doesn’t lead to my own website, but there in the left sidebar you can see what I want my own to look like.

    Cheers,
    Daniel

    January 25, 2016 at 8:18 am #571137
    Rikard

    Hi Daniel,

    I’m getting a 404 error on the test page you linked to, did you remove it? We need to inspect the item itself in order to give you custom CSS for it.

    Best regards,
    Rikard

    January 25, 2016 at 8:51 am #571148
    Daniel

    The page is set “private”. You have to log in first with the credentials I provided.

    January 26, 2016 at 5:49 am #571884
    Rikard

    Hi,

    I think you should be able to format that using blank spaces before the text, if not then you should probably consider putting the items in a structure like this: 

    <span>icon + text</span>
<ul>
<li>text</li>
<li>text</li>
<ul>

    Thanks,
    Rikard

    January 26, 2016 at 9:52 am #571974
    Daniel

    Hi Rikard,

    Thanks for your feedback, but what you suggested doesn’t really solve my problem.

    Using ul and li tags adds bullets in front of the items and they are not aligned with the title. And blank spaces are automatically deleted when I save the text block. But even if they would work, it would only be a useful workaround for short list items, not for longer text as you can see in this screenshot:

    I contacted the owner of the other website and he gave me the following CSS:

    .your-custom-class p .av-icon-char {
    position: absolute;
    left: -30px;
}
.your-custom-class {
margin-left: 30px; 
}

    Can you help me adjust this code for my website?

    Thanks,
    Daniel

    January 27, 2016 at 1:53 pm #572860
    Vinay

    Hi!

    We have added a new shortcode below your example on the test page. Please check it out.

    I recommend you enable debug mode which will allow you to enter the shortcode in default editor and edit it in Advance layout builder which will be very easy for you to change content without dealing with the code.

    Please check this link below

    http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    Cheers!
    Vinay

    January 31, 2016 at 7:29 pm #575368
    Daniel

    Hi Vinay!

    The shortcode you added still doesn’t make it look like the example I gave you (http://bit.ly/1JsTzQ3) but I guess this is probably more complicated to achieve then I thought.

    Thanks anyway, I really appreciate your efforts!

    Cheers,
    Daniel

    January 31, 2016 at 8:14 pm #575395
    Basilis

    Hi!

    Glad we got it short out!
    Please do let us know if you need anything else related to our theme, we will be more than happy to help.

    Best regards,
    Basilis

    May 15, 2016 at 6:05 am #632452
    Nathan

    I am feeling curious how I can center the text I have in the icon list element with the icons here:
    https://vitalthrive.us/

    Notice under where it says”Clear Vision • Deep Purpose • Authentic Service”
    The text to the left is a little raised.

    And I need support removing that dotted line behind the icons too please.

    Thank you as always!

    May 17, 2016 at 7:37 am #633517
    Ismael

    Hi,

    Please use this in the Quick CSS field:

    body .av-special-heading.modern-centered {
    text-align: left;
}

    And remove the line with this:

    .iconlist-timeline {
    display: none;
}

    Best regards,
    Ismael

    May 17, 2016 at 8:25 am #633545
    Nathan

    Thank you,

    The dotted line is gone

    However I notice that the text is still not centered with the icon, could I please get code support to accomplish this?

    Thank you for your time!

    May 18, 2016 at 1:30 pm #634418
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-icon-list .iconlist_icon { margin-left: 0; }

    If that does not help, Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Yigit

    May 20, 2016 at 7:59 pm #636034
    Nathan

    it worked thank you

    May 20, 2016 at 10:17 pm #636061
    Basilis

    Hey!

    Great
    Please open a new ticket if you need anything else.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Text with icon not aligning correctly’ is closed to new replies.