Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 11, 2016 at 3:06 am #562866
    m_gnowit

    Hi,

    I would like to have a comparison of my 3 packages on the pricing table. I want to showcase which feature is available on which package by having a tick icon or an x icon.

    I have tried using the code from the font icons but it messes up the table’s layout.

    How can I achieve this?

    Thanks.

    • This topic was modified 8 years, 10 months ago by m_gnowit.
    January 11, 2016 at 10:23 am #563024
    Rikard

    Hi m_gnowit,

    Could you provide us with a link to the site in question so that we can take a closer look please? We might need access to the backend as well if you want to include admin login details in private.

    Thanks,
    Rikard

    January 11, 2016 at 6:16 pm #563405
    m_gnowit

    Hi Rikard,

    The info is in the private section

    January 11, 2016 at 9:03 pm #563486
    Basilis

    Hey!

    You can use an icon / image to replace some text, through CSS.

    Nine Techniques for CSS Image Replacement

    Let us know if that helps you out!

    Cheers!
    Basilis

    March 7, 2016 at 6:49 pm #594533
    m_gnowit

    Hey Basilis, that didn’t quite help. Is there another way I can add font icons on my pricing table?

    March 12, 2016 at 12:59 pm #597194
    Ismael

    Hi!

    Use the rendered html code of the icon shortcodes. This is for “tick” or “check” icon:

    <div data-av_icon="" class="table-icons table-tick"></div>

    .. and this is for the “x” icon:

    <div data-av_icon="" class="table-icons table-x"></div>

    Add this css code:

    .table-icons {
    font-size: 30px;
    color: red;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-family: entypo-fontello;
    margin: 0 auto;
}

    Regards,
    Ismael

    May 6, 2016 at 2:26 pm #628294
    Cliffy

    I know this is late, but it might help…

    I just used the following in each cell:

    A green tick box:

    [av_font_icon icon='ue812' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#02a800' size='20px' position='right'][/av_font_icon]

    A red cross:

    [av_font_icon icon='ue813' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#CC0000' size='20px' position='right'][/av_font_icon]

    H

    May 6, 2016 at 5:32 pm #628408
    Basilis

    Hi!

    Thanks a lot for sharing any solution – it is never late for that!
    Please do let us know if we can do anything else for you!

    Regards,
    Basilis

    May 19, 2016 at 6:20 pm #635384
    m_gnowit

    Thanks @Heathcliffe. I’ll try that out.

    August 24, 2019 at 1:30 pm #1130593
    creative_instinct

    The code offered by Cliffy can be simplified:

    A green tick box:
    [av_font_icon icon='ue812' color='#33aa2a' size='20px'][/av_font_icon]

    A red cross:
    [av_font_icon icon='ue813' color='#dd0000' size='23px'][/av_font_icon]

    August 25, 2019 at 5:51 am #1130702
    Rikard

    Hi creative_instinct,

    Thanks for sharing, it’s much appreciated :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.