Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #562866

    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 4 years, 2 months ago by  m_gnowit.
    #563024

    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

    #563405

    Hi Rikard,

    The info is in the private section

    #563486

    Hey!

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

    Let us know if that helps you out!

    Cheers!
    Basilis

    #594533

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

    #597194

    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

    #628294

    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

    #628408

    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

    #635384

    Thanks @heathcliffe. I’ll try that out.

    #1130593

    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]

    #1130702

    Hi creative_instinct,

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

    Best regards,
    Rikard

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.