Okay
  Public Ticket #3712499
Flip Box icon
Closed

Comments

  •  2
    eduardplan started the conversation

    Hello! 

    I would like to know if there is a possibility to use a custom icon/image for the flipbox, instead of having to choose between predefined libraries (iconsmid, fontawesome..etc) 

    Attached files:  Captura de pantalla 2024-08-27 a las 10.25.32.png

  •  3,001
    Andrew replied

    Hi Eduard,

    Thank you for getting in touch.

    Unfortunately, there is no way to achieve this without customizations which would fall out of the scope of our support.

    Alternatively, you can try using the shortcode feature to add the icons and see if this will work for you. In that case you can use the Text with icon shortcode:

    [text-with-icon icon_type="image_icon" icon_image="1244"][/text-with-icon]

    "icon_image" should have the ID of the image to be shown which can be found in the media library: 6251199862.png

    We appreciate your understanding on this matter.

    Thanks,

  •  2
    eduardplan replied

    Hi Andrew,

    Thanks for the fast reply. 

    Do you mean writing the shortcode in the "Front Box Content"? 

  •  3,001
    Andrew replied

    Hi Eduard,

    Thank you for getting back to us.

    To clarify, I'm referring to this section in the screenshot below.

    7136383432.png

    I hope that helps.

    Thanks,

  •  2
    eduardplan replied

    Thanks! it works. The icon displays. Is there a way to increase/decrease size of the image in the text shortcode?

  •  8,938
    Tahir replied

    Hey Again,

    Alternatively you can use the Icon Shortcode via the Nectar Shortcodes GUI . View attached screenshot. 

    Thanks.

    Attached files:  nectar-icon-shortcode.jpg


    ThemeNectar Support Team 

  •  3,001
    Andrew replied

    Hi Eduardo,

    Thank you for getting back to us.

    Please share your site URL so we can look into this and advise.

    We look forward to your reply.

    Thanks,

  •   eduardplan replied privately
  •  3,001
    Andrew replied

    Hi Eduard,

    Thanks for writing to us.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .page-id-4215 .nectar-fancy-box .fancy-box-custom-icon, 
    .page-id-4215 .nectar-flickity:not(.masonry) .flickity-slider .cell .nectar-fancy-box .fancy-box-custom-icon {
      max-width: 30%!important;
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

    Regards,

  •  2
    eduardplan replied

    Hello Andrew,

    I just did what you mentioned, but the icon is still very small. Looks the same size as before. Could you take a look? I updated the page

    Attached files:  Captura de pantalla 2024-08-29 a las 8.41.37.png

  •  3,001
    Andrew replied

    Hi Eduard,

    Thank you for getting back to us.

    Please replace the previous CSS with this one to adjust the size of the image.

    .row .col .iwithtext .iwt-icon img:not([srcset]) {
        width: 80px !important;
    }
    

    My apologies for the previous response. Try this and let us know how it goes.

    Regards,

  •  2
    eduardplan replied

    Great, now it works! thanks!

    One last question related to this: I guess there is also a code to make the text of the front box  bigger? (for example I want the word "PRP" to look the same as in the "fancy box" above it


  •  3,001
    Andrew replied

    Hi Again,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel:

    .nectar-flip-box .flip-box-front .inner {
        font-family: Lato;
        font-weight: 600;
        font-size: 22px;
        line-height: 34px;
        color:#444444
    }
    

    Try this and let us know how it goes.

    Thanks,

  •  2
    eduardplan replied

    Thanks Andrew, it worked. Thanks for your fast help and support