Support » Plugin: Stock Quote » Change arrow icons

  • Resolved midknightgenius

    (@midknightgenius)


    Hi, is it possible to change the Arrow styling. I would like to use a caret style arrow instead of the default. How do I change that?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello @midknightgenius,

    You can simply customize look of Stock Quote arrow by styling CSS selectors .stock_quote.sqitem.minus::before and .stock_quote.sqitem.plus::before.
    You can set your custom image, or UNICODE character or SVG vector icon – whatever you imagine.

    Kind regards,
    Aleksandar

    Awesome

    Thanks

    Hi Aleksandar,

    I followed the selectors you mentioned. It did not work properly for me

    This is what I did. It overlays the unicode character ontop of the other one in the elementor editor, but on the live site it only displays the original arrows from the plugin.

    
    .stock_quote.sqitem.minus:before {
    	content: '▼ ';
    }
    

    Hello,

    I suppose you have sorted out this customization (use !important for :before content).

    Thanks,
    Aleksandar

    I tried to use important and the code suggested above

    
    .stock_quote.sqitem.minus:before {
    	content: '▼' !important;
    }

    Unfortunately I still see the old icon below https://i.imgur.com/TI8wOyL.png

    Hello @haciendoblogsbonitos,

    You should remove background form pseudo class. Complete CSS can be:

    .stock_quote.sqitem.minus::before, .stock_quote.sqitem.plus::before {background:none!important; display: inline !important;}
    .stock_quote.sqitem.minus::before { content: '▼' !important; }
    .stock_quote.sqitem.plus::before { content: '▲' !important; }
    .stock_quote.sqitem.zero::before { content: '◆' !important; margin-right: 2px;}

    Thanks,
    Aleksandar

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.