Archived topic
How to use different svg icons on services page?
7 replies · Started by Anant on February 26, 2023
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.
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.
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.
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
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.
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.
Hi David,
Thank you so much. This helped.
You're welcome
