Streaming live at 10am (PST)

Add a down arrow symbol using just text


#1

I’d like to add a down arrow to a text link to indicate that clicking the link will reveal text below. Is there a way to add the arrow within the text i.e as a font rather than adding an image of an arrow?

Thanks


#2

Several solutions.

As pure text using unicode
Succede your text by an arrow unicode character like ↓
Unicode arrows : https://unicode-table.com/en/sets/arrows-symbols/
▼, :arrow_down:
Unicode symbols are supported by evey system and most normal quality fonts. Unicode includes all characters for all languages, plus arrows, plus symbols, plus dingbats… Welcome in the fabulous world of unicode characters :slight_smile:
I use those arrows e-very-where…

But images solutions are still cool:

As a background image on a text element or span element
Add a padding to a text or span and use an image as a background for this element.

As a pseudo element with custom code
Use custom code and pseudo elements like :after to succede your text with an image or unicode arrow.


#3

Thanks Vincent.

I have tried adding unicode but am having difficulty getting the arrow to sit next to the text. When I make them both inline-block they align but that ruins the list as everything sits next to each other. Please see the magenta section “Here’s a quick look at what we can do for you’ https://preview.webflow.com/preview/marketingmatters2?preview=8e8a9cde734a09777a13aa19fd2aa73a

I’d also ideally like the arrow to be part of the text rather than separate i.e the hover effect works for the arrow at the same time as the text.

Basically a solution to show that these links open up when clicked would be greatly appreciated!


#4

What about like this?


#5

Thanks Vincent! Perfect. Nice touch at the end there!


#6

The power of those sharing links is still baffling me… it’s genius and a part of webflows’ community success.


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.