Can I ask how does String.fromCharCode(61444) work to render FontAwesome Heart Icon?

[jbaek7023]

I've asked to the StackOverFlow and googled it but nobody understand how it works.

https://github.com/akveo/kittenTricks/blob/master/app/assets/icons.js Here is my actual question: https://stackoverflow.com/questions/46733687/how-to-use-string-fromcharcode-to-call-fontawesome-font-in-react

[priyankinfinnov]

Did you get and answer to this? Also when i am using FontIcons.xyz from https://github.com/akveo/kittenTricks/blob/master/app/assets/icons.js file it appears as a box with X in it (PFA screenshot below) can you help ?

[jbaek7023]

Hi there,

Yes, I solved the problem. Using hex to decimal convertor, https://www.binaryhexconverter.com/hex-to-decimal-converter, you can get decimal numbers for FontAwesome font. (I guess Javascript doesn't allow hexadecimal)

But I don't think it's relevant to your problem. I guess you didn't import FontAwesome file(should be .ttf format) correctly in App.js or wherever you pre-load your Fonts such as san-serif, mono....

I will be happy to help you out if you provide me more detail with code.

Best, John Baek

[priyankinfinnov]

Alas, the code is not open-source. Though i am using this repo as a base, so please can you point me to the file in this repo ?

[priyankinfinnov]

Hey, thanx. I figured the Font Awesome thing tff thing. (forgot to incluce rnpm assest in package.json and react-native link).

But i also want to use the FontAwesome.chevronRight from the https://github.com/akveo/kittenTricks/blob/master/app/assets/icons.js file and i used the https://www.binaryhexconverter.com/hex-to-decimal-converter to replace the hex numbers with decimal as you suggested. It did remove the box with cross, but did not give the expected ">" or "<" sign, it shows a horizintal $ with dots. Please can you help.

[jbaek7023]

Hi,

I hope you have a great holiday!

From FontAwesome Cheetsheet, you can refer to hex value.

For example, in your case, you need "<" sign.

0. Go to FontAwesome Cheetsheet, link
1. You would press "Ctrl+F" key and find for "left".
2. You will find fa-angle-left [] with "<" sign.
3. xf104 is hex value which is exactly what you were looking for.
4. convert hex value to the provided link
5. Decimal Value is 61700! :)
6. Save it to chevronLeft: toString(61700) to the icon.js
7. Use it wherever you enclose {FontAwesome.chevronLeft} with <Text/> tag
8. This solution will apply to every text icons from FontAwesome Cheetsheat

John Baek

[priyankinfinnov]

I am, John. Hope you are having a great season too :)

I tried chevronRight: String.fromCharCode(61700), however still shows box with X not the "<" sign.

Also tried the way mentioned here https://github.com/akveo/kittenTricks/issues/11 but unfortunately it does not work.

[sergey-kozel]

Hi @priyankinfinnov, @jbaek7023

@priyankinfinnov , are you still have this issue? I don't understand exactly from your comments do you see a crossed box or just incorrect symbol. I think your problem is that you use not 'fontawesome' in a place where you expect to see a chevron. If you look at 'Kitten Tricks' code you will see that we apply correct font by defining appropriate fontfamily in rkType:

  RkTheme.setType('RkText', 'awesome', {
    fontFamily: 'fontawesome',
  });

So, if you have correct:

1. Font in assets
2. FontFamily style in your component
3. The string value for this component

then all should work.

By the way, it is not necessary to specify decimal number in String.fromCharCode(61524). You can leave hex value there: String.fromCharCode(0xf054)

In case you still not be able to resolve your issue you can create a test project and we will see what the problem exactly you faced.

[jbaek7023]

Yeah that will work!

2017년 12월 27일 (수) 오후 7:57, sergey-kozel notifications@github.com님이 작성:

Hi @priyankinfinnov https://github.com/priyankinfinnov, @jbaek7023 https://github.com/jbaek7023

@priyankinfinnov https://github.com/priyankinfinnov , are you still have this issue? I don't understand exactly from your comments do you see a crossed box or just incorrect symbol. I think your problem is that you use not 'fontawesome' in a place where you expect to see a chevron. If you look at 'Kitten Tricks' code you will see that we apply correct font by defining appropriate fontfamily in rkType:

RkTheme.setType('RkText', 'awesome', { fontFamily: 'fontawesome', });

So, if you have correct:

1. Font in assets
2. FontFamily style in your component
3. The string value for this component

then all should work.

By the way, it is not necessary to specify decimal number in String.fromCharCode(61524). You can leave hex value there: String.fromCharCode(0xf054)

In case you still not be able to resolve your issue you can create a test project and we will see what the problem exactly you faced.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/akveo/kittenTricks/issues/37#issuecomment-354096250, or mute the thread https://github.com/notifications/unsubscribe-auth/AWAD8qjNMMgS9T-a0c2_XVkROeHOZSz-ks5tEiKVgaJpZM4P5LFz .

[priyankinfinnov]

Thanks, i am using <RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText> from the file https://github.com/akveo/kittenTricks/blob/master/app/screens/navigation/sideMenu.js

still no success with chevronRight: String.fromCharCode(61524), nor with chevronRight: String.fromCharCode(0xf054),

Also tried putting the below in sidemenu.js

RkTheme.setType('RkText', 'awesome', {
  fontFamily: 'fontawesome',
});

By Box with X i mean screenshot

[sergey-kozel]

It's hard to say then what is the reason for your issue. I suggest you create some small project from scratch and if it will not work publish it as I proposed earlier. We can talk more detailed then.