Is it possible to insert image in a link?

Design help General
1

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

2

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 →

3

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

Screen Shot 2023-04-25 at 6.39.00 AM
Screen Shot 2023-04-25 at 6.39.00 AM2420×1534 215 KB

4

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):

image
image1980×580 60.3 KB

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:

image
image1640×1256 215 KB

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

image
image1316×1354 18.2 KB

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

image
image1548×198 55.4 KB

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:

image
image1108×1230 178 KB

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

1 Like
5

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

1 Like