Headline icon with circular background

Hi,

Does any have a css solution for placing a circular background behind an SVG icon on a headline block? I’m comfortable in creating custom classes if somebody could share an example.

Thanks,
Paul.

Hi Paul,

One approach to achieve this is through Custom CSS code with clip-path.

See: clip-path - CSS: Cascading Style Sheets | MDN

Here is a sample CSS:

.gb-headline span.gb-icon {
    background-color: rgb(0,255,0);
    clip-path: circle(50%);
    padding-right:0;
    padding:5px;
    margin-right: 0.5em;
}

Adding this through Appearance > Customize > Additional CSS should work.

Hope this helps! :slight_smile: