Change arrow icons

  • Resolved midknightgenius

    (@midknightgenius)


    5 years, 2 months ago

    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)
  • Plugin Author Aleksandar Urošević

    (@urkekg)

    5 years, 2 months ago

    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

    Thread Starter midknightgenius

    (@midknightgenius)

    5 years, 2 months ago

    Awesome

    Thanks

    Thread Starter midknightgenius

    (@midknightgenius)

    5 years, 2 months ago

    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: '▼ ';
}
    Plugin Author Aleksandar Urošević

    (@urkekg)

    4 years, 11 months ago

    Hello,

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

    Thanks,
    Aleksandar

    haciendoblogsbonitos

    (@haciendoblogsbonitos)

    4 years, 10 months ago

    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

    Plugin Author Aleksandar Urošević

    (@urkekg)

    4 years, 10 months ago

    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)
  • The topic ‘Change arrow icons’ is closed to new replies.