Is it possible to insert image in a link?

Hi, I’m trying to implement simple ‘See details ->’ link with an arrow inside it and I can’t insert arrow image inside link, I suppose I need to use ‘Link Block’ element in this case, but the only way I can insert text there is to use ‘Text Block’ element which in turn wraps the text into div, but I don’t need that div, is it possible to avoid extra nesting and use simple structure consisting of link, simple text without wrapping tag and image?

image

image

Hi Finch!

If you really don’t want to use an image as arrow, you could use a text symbol. Like so:

See details ➜
See details ➔
See details :arrow_right:
See details →

1 Like

My two approaches have always been the emoji solution (→) as mentioned by @RoryVB or just add a background image:

1 Like

Hi @Finch :wave: Here is another flexible way to use custom svg icons in text links (for example if you want to change icon color too when hover on link):point_down:

Step #1. In Webflow apply some class to your link (in my example it’s “link-with-arrow” name):

Step 2.
Copy this CSS code:

<style>
.YOUR_LINK_CLASS_NAME:after {
  background-color: currentColor;
  content: "\00a0";
  display: -webkit-inline-flex;
  padding: 0 4px;
  margin: 0 4px;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,PLACE_HERE_YOUR_RESULT_CODE");
  mask-image: url("data:image/svg+xml;charset=utf-8,PLACE_HERE_YOUR_RESULT_CODE");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
</style>

Step #3.
Insert “Embed” element on your page and paste code there (replace “YOUR_LINK_CLASS_NAME” to your link class name:

Step #4. In Figma create and save your icon artboard with transparent background as SVG:

Step #5. Open your SVG image in Text Editor and remove “width”, “height”, and “fill” parameters:

Step #6. Copy your clean SVG code:

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M379.915 218.272L296.439 135.163L340.798 91L500 249.5L340.798 408L296.439 363.837L379.915 280.728H0V218.272H379.915Z"/>
</svg>

Step #7. Go to this encoder page URL-encoder for SVG > paste your SVG code into “Insert SVG:” field > copy result code from “Take encoded:” field:

Step #8. Go to opened Webflow Embed Code Editor and replace “PLACE_HERE_YOUR_RESULT_CODE” to code from clipboard > Save.

And Voila✅ Now when you hover over the link, the color of the arrow is also changes💪

UPD By the way, in this solution if text link will be wide of container > arrow will move to the next string with text unlike the flexbox container method (text+image) where arrow may move separately or a method with background image where arrow is placed as a background image and when text will have two lines — arrow image be still have right top corner position.

https://broplayground.webflow.io/is-it-possible-to-insert-image-in-a-link

Read-only link: Webflow - BroPlayGround

2 Likes

Yep, it’s the best solution to the problem, but only when design allows you to do that)

2 Likes