[Resolved] How to use different svg icons on services page?

[Anant]

Hi Team,

On the services page, I am looking to replace the existing icons. (URL of services page is mentioned in private info)
I have the new png and svg icons downloaded but at implementation, the block is asking for inline css of svg icons. How do I generate that? I was not able to find a good solution to this.

[Ying]

Hi there,

If you open the SVG file in a browser, right-click, and click view page source, the code you see is the SVG code.

PNG would not work in this case.

PNG needs to be added using an image block.

[Anant]

Makes sense. Thanks for the hack.

I tried converting a PNG to svg and do the same but in that case it doesn’t work. It requires an actual svg it seems.

I was unable to add a small image block at the icon location otherwise that would have worked.

[Ying]

I was unable to add a small image block at the icon location otherwise that would have worked.

If you update GB to 1.7, you should be able to do so.

Here’s a screenshot for your reference, the container is set to display:flex, align item: center:
https://www.screencast.com/t/dSblpPf5d

[Anant]

Hi Ying,

I updated GB to 1.7 but was not able to replicate the screenshot on my page. If possible, can you please help create one such block on a dummy page? I have shared the credentials in private info.

[David]

Hi there,

create a new draft page.
The go to the 3 dot top bar menu and select the Code editor.
Paste this code into the editor:

<!-- wp:generateblocks/container {"uniqueId":"ffb9d0cc","isDynamic":true,"blockVersion":3,"display":"flex","alignItems":"center","columnGap":"20px"} -->
<!-- wp:generateblocks/image {"uniqueId":"141edb16","sizeSlug":"full","width":"100px","widthMobile":"100px","height":"auto","heightMobile":"auto"} -->
<figure class="gb-block-image gb-block-image-141edb16"><img class="gb-image gb-image-141edb16" src="https://picsum.photos/id/237/100/100" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"f7d8d378","blockVersion":2,"flexGrowMobile":1,"flexShrinkMobile":1,"flexBasisMobile":"auto","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":""} -->
<h2 class="gb-headline gb-headline-f7d8d378 gb-headline-text">This is the Headline</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"cb891a33","isDynamic":true,"blockVersion":3,"display":"flex","displayMobile":"block","alignItems":"center","columnGap":"20px"} -->
<!-- wp:generateblocks/image {"uniqueId":"08e37f65","sizeSlug":"full","width":"100px","widthMobile":"100px","height":"auto","heightMobile":"auto","paddingBottomMobile":"10"} -->
<figure class="gb-block-image gb-block-image-08e37f65"><img class="gb-image gb-image-08e37f65" src="https://picsum.photos/id/237/100/100" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/headline {"uniqueId":"4793d8dd","blockVersion":2,"flexGrowMobile":1,"flexShrinkMobile":1,"flexBasisMobile":"auto","marginBottom":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":""} -->
<h2 class="gb-headline gb-headline-4793d8dd gb-headline-text">This is the Headline</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Switch back to the visual editor.

I made 2 container row layouts, they are identical on desktop. On mobile the second one stacks.

Copy one of the Container Blocks and paste it into where you need it.

[Anant]

Hi David,

Thank you so much. This helped.

[David]

You’re welcome

[Author]

Posts