How to link URL to embed .SVG icon

Hello, I’ve uploaded .svg icons via Embed so I can change icon color from Style palette. SVG icons using Style Palette colors

soc

embed

Question is, how can I link those DIV blocks? I cannot put my embed svg icons inside a link block, that will cause errors.

My goal is to make this hover interaction (change div’s bg to blue and .svg icon to white)

goal but it has to be a functional link.

Adding this link alink to my dynamic embed does not solve the problem because the link is only around the .svg icon.

link

Why not use the embed element to create the hole wrapper?

<a class="soclink">
  <div class="socicon">
    <svg>
      <path fill="currentColor">
    </svg>
  </div>
</a>
1 Like

BTW,
for these kind of things i use http://app.fontastic.me/ to create an SVG based font

1 Like

http://app.fontastic.me/ works pretty good. Thank you man.

For y’all who’d like to do this way. Upload all your .svg icons to http://app.fontastic.me/, name font pack, define characters

and upload downloaded .ttf file to webflow project font settings.

Then just add text inside link block, select Font name and write your symbol. On typography panel you can change color and size which is super useful :innocent:

// However, I would appreciate the possibility of editing the .svg icon in the future directly from the Style panel Icon Fonts vs SVGs - Which One Should You Use? - KeyCDN

1 Like

You can. Create link block, then hold alt while clicking on embed component. The same way you can add form elements without creating form block first.

1 Like

I just tested it out and it works. Thank you.

No problem. Happy designing!

Hi @dram can you please explain a bit more about how you can hold alt while clicking on embed component? I’m on a Mac and tried different things but still can’t add an tag to an embedded svg. Thank you! PS If you can share a Loom-type video, that would be even better. Again, much thanks.