Classic Icon and Accent Lines

[kcreative]

Hi guys,

Is there a way to add accent lines to a classic icon? https://prnt.sc/oh2zyq

I did found this thread https://theme.co/apex/forum/t/how-to-set-icon-on-line-element/51275/2 but the icons I am suing are not included in the shortcodes and also tried this one https://theme.co/apex/forum/t/add-accent-to-v-2-headline-elements/57756, but couldn’t make it work.

Thank you,
Petar

[friech]

Hi Petar,

Thank you for writing in, please use the Social element instead, then add the custom CSS below in the Social element’s Element CSS area

$el.x-anchor:before {
    right: 100%;
    margin-right: 0.5em;
}
$el.x-anchor:after {
    left: 100%;
    margin-left: 0.5em;
}


$el.x-anchor:before,
$el.x-anchor:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 3px;
    width: 9999px;
    display: block;
    margin-top: -2px;
    border-top: 1px solid #36a391;
    border-bottom: 1px solid #36a391;
}

Then add this on the Column’s Element CSS area so the line won’t overflow in the column.

$el.x-column {overflow:hidden;}

Hope it helps,
Cheers!

[kcreative]

Thank you so much for the help! It works great!

[ruenel]

You’re welcome!
We really appreciate for letting us know that it has worked for you.