Streaming live at 10am (PST)

Why can't I place and SVG icon (HTML Embed) into a link block?


#1

Hello,

I am trying to use svg icons within links (link blocks). Nothing crazy. Webflow is no longer allowing me.

A few weeks ago Webflow had no problem with this and now it gives me an error "This element can't be nested into a link block"

I don't get it.

Matt


#2

Hey @Matt_g!

It will be easier to help you if you could please provide your public link.

I just tested a solution that should work, though: drag and drop an image element into the link block and uploading your svg icon to that image element. Alternatively, you could set the background image of your link block as your icon.

Christopher


#3

Here is a sight that I had it working in:

https://preview.webflow.com/preview/atod2-bdd556?preview=499f8f83f9d82840e37a68b5c824bdc3

Everything still works but I am no longer able to do it.

I am using the HTML Embed component to place the SVG code.


#4

Wow @Matt_g it appears Webflow has changed this feature since you started working on your site.

I even dragged an HTML embed out of one of your link blocks from the Navigator, then attempted to drag it back into the link block and it would not let me. I got the same error you are describing. I also tried dragging a brand new HTML embed into a brand new link block and received the same error.

All that being said, what did work for me was to take an existing link block and copy it then paste it, then edit it. This will allow you to continue working on your site whilst working around this new restriction from Webflow.

Best,
Christopher


#5

Ya that will work for that site but I want it back :frowning:

@webflow what's deal? Why has this been blocked?


#6

no reply of course......


#7

I get your challenge here, but the problem isn't SVGs; it's placing embedded code into a link block. And you're correct in that Webflow doesn't seem to let us drop embedded code into a link block.

Why not just drop an SVG into a link block? You can simply take your SVG code, drop it into a text file, and save it with the .SVG extension. Then it'll drop right in like this:

Edit: Here's a great tool called SVG Crowbar which will take SVG code and generate an SVG file you can use in Webflow: http://nytimes.github.io/svg-crowbar/


#8

Cool I'm going to have to try that.


#9

Yes, that's what i have been doing now but it was simpler to just use the HTML embed.

Thank you for your replies!


#10