Streaming live at 10am (PST)

LInk Block, Rich Text, Div...Problem


#1

Hey all,

I don’t think I’m approaching this the right way;

I have some text and I wanted to put an image of an arrow to the right of the text. So I used a rich text block and that worked. I then threw the rich text block in a div thinking that I could have the whole div actionable (the div is 20% of the screen) and attach an interaction to it. That worked, so now when I roll over the div, its plays an interaction of the arrow moving… great. But, I realized I wanted to have the 20% div link to a page and rich text blocks can’t go inside of link block …apparently.

What do I do? Thanks in advance. Mike.


Here is my site Read-Only: https://preview.webflow.com/preview/mikes-fantabulous-project-e210ef?preview=2ea7ad69b2bf6499296b52edc6326dbe
(how to share your site Read-Only link)


#2

Hey @mjkingz Can you provide your share-link to your project? This way other contributors of the webflow community can take a peek at your site and offer the best support.

Thanks :slight_smile:


#3

@David_Sheltren , Thanks, see above.


#4

Use 1 Parent Link Block: Display Flex center center, Set to Relative
Add 1 Text Element: Set to Absolute, no css styles yet
Add 1 Text Link Element: Set to Absolute, not css styles yet

This will allow both text components align side by side. Then keep regular text on 1st. Then use fontawesome on the 2nd text, adding an arrow. This will keep both within the Typography CSS functionality. Adding a vector makes this cumbersome.

Finally use Line Height to give vertical sizing to both elements. On the parent link block remove the text underline in typography settings.


#5

@garymichael1313

Thanks for this — I’ll give it a shot. Typically, I avoid using font awesome as their icons are styled in a particular way (all their icons have slightly rounded corners). In the event I wanted to have a more specific look and use an svg, do you have an alternative way to achieve the same thing?


#6

Actually I use Ion Icons. They are the best too me :grin: They have nice icons, and you can use the “html reference” instead of css reference. It works the same but easier to see variations and comparisons.