3

I want to use this arrow in my React app: U+02197. I read this article that explains why how to force a unicode symbol to render as text insted of emoji. Infat I want that the symbol is alway rendered as text.

I try:

<a href="...">U+02197</a>

But it is rendered as string "U+02197". How can I visualize the char? I try also:

U+2197 &U+2197; U+02197 U+02197; &U+02197; \U+02197 \u02197

Using <a href="...">↗&#8599; &#x2197;</a> the result in Chrome on Macbook is: enter image description here

and on Chrome/Firefox on Android mobile the result is different: enter image description here

I want always the char as text so always like that enter image description here.

Improve this question

3 Answers 3

Reset to default
6

You need a specific format for this to work on React, you can do the following:

<a href="...">{'\u02197'}</a>

You have to use the curly braces to prevent React from formating the string to just HTML content.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

Try String.fromCharCode() where the argument is the decimal representation of the unicode character (which is hex).

U+02197 would be written as String.fromCharCode(8599)

In my case, I needed an up (U+25B2) and down (U+25BC) arrow, so I got it working doing something like this:

<span className="direction">
   {String.fromCharCode(this.state.direction === "up" ? 9650 : 9660)}
</span>
Improve this answer

Comments

0

Try using the hex code:

<a href="...">&#x2197;&#xFE0E;</a>

Source: https://www.fileformat.info/info/unicode/char/2197/index.htm

Improve this answer

4 Comments

Thanks but it doesn't work, see my main question, I edit it
How about adding font-family:serif !important in your css?
I have edited the answer. It work for me. Before that, it show emoji in Microsoft Edge. But after I add &#xFE0E; it shows the text version.
I use BrowserStack to test it and it doesn't work.. I see the emoji instead of the text version

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.