Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 23, 2016 at 11:34 am #715831
    jaroljmek

    Hi there!
    Is it easy to do the following with a standalone icon via CSS only? I want to be able to add a caption so would like to use the standalone option because the inline option does not allow a caption:

    – remove circle border
    – align left
    – align caption left

    Thanks!

    November 24, 2016 at 4:47 pm #716492
    Yigit

    Hey jaroljmek,

    Can you please post a screenshot and show the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here

    Best regards,
    Yigit

    November 24, 2016 at 6:25 pm #716540
    jaroljmek

    Hi Yigit

    Thanks for getting back to me. Here is a screenshot annotated:

    https://dl.dropboxusercontent.com/u/25523105/standalone-icon.png

    Basically I just want to align Icon and Caption left and remove the circle border when using a Standalone Icon. (If I use an inline Icon there is not option for a Caption and I need the caption.)

    I hope this is clear. Here is the page:

    test

    Thanks

    Christian

    November 25, 2016 at 8:10 am #716694
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-1889 a.av-icon-char {
    float:left !important;
    border-color: transparent !important;
}

.page-id-1889 a.av-icon-char span {
    display: inline-block !important;
    text-align: left !important;
}

    Best regards,
    Rikard

    November 26, 2016 at 9:05 pm #717261
    jaroljmek

    Hi Rikard

    Thanks a lot for that.

    The icon aligns left nicely. However, the text is still centred and to the right of the icon. Is it possible to align text left and ensure it appears underneath the icon.

    test

    Sorry to hassle!

    Thank you.

    Christian

    November 26, 2016 at 10:10 pm #717268
    Basilis

    Hi!

    Try the following CSS
    .av_font_icon a { width: 200px; }
    and that will do fix the issue for you.

    Let us know if we can help further

    Regards,
    Basilis

    November 27, 2016 at 4:55 pm #717449
    jaroljmek

    Hi Basilis

    Thanks for that fix. It does place the icon above the text but both are now centred again!

    test

    Am I doing something wrong? It would really be great to be able to align icon and text left.

    Thanks!

    Christian

    November 28, 2016 at 6:34 am #717580
    Rikard

    Hi,

    Please try this as well:

    .page-id-1889 .av_icon_caption {
  text-align:left !important;
}

    Best regards,
    Rikard

    November 28, 2016 at 2:19 pm #717757
    jaroljmek

    Hi Rikard

    Nearly but not quite!! The caption is left aligned but the icon is still centred.

    test

    This is the CSS currently in place:

    .page-id-1889 a.av-icon-char {
    float:left !important;
    border-color: transparent !important;
    }
    .page-id-1889 a.av-icon-char span {
    display: inline-block !important;
    text-align: left !important;
    }
    .page-id-1889 .av_font_icon a {
    width: 200px !important;
    }
    .page-id-1889 .av_icon_caption {
    text-align:left !important;
    }

    Hope we can resolve this one. Thanks!

    Christian

    November 30, 2016 at 11:28 am #718689
    Andy

    Hi,

    you could move your icon to the left with this code:

    a.av-icon-char {
left: -106px;
}

    Adjust as needed.

    Best regards,
    Andy

    November 30, 2016 at 12:51 pm #718714
    jaroljmek

    Hi Guys

    You might be interested to see my solution to placing Standalone Icon + Caption to the left:

    .av_font_icon.av-icon-style-border .av-icon-char {
    padding: 0px;
    }
    .av_font_icon {
    display: block;
    text-align: left;
    }
    #top .av_font_icon a {
    display: inline;
    }
    .av_icon_caption {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 20px;
    text-align: left;
    text-transform: uppercase;
    }

    Works well!

    You can close this thread now

    Thanks

    Christian

    December 1, 2016 at 8:09 am #719119
    Rikard

    Hi Christian,

    Thanks a lot for sharing, much appreciated :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Standalone Icon left align?’ is closed to new replies.