Comments (10)
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.
- Go to FontAwesome Cheetsheet, link
- You would press "Ctrl+F" key and find for "left".
- You will find
fa-angle-left []
with "<" sign. xf104
is hex value which is exactly what you were looking for.- convert hex value to the provided link
- Decimal Value is 61700! :)
- Save it to chevronLeft: toString(61700) to the icon.js
- Use it wherever you enclose
{FontAwesome.chevronLeft}
with<Text/>
tag - This solution will apply to every text icons from FontAwesome Cheetsheat
John Baek
from kittentricks.
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 ?
from kittentricks.
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
from kittentricks.
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 ?
from kittentricks.
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.
from kittentricks.
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 #11 but unfortunately it does not work.
from kittentricks.
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:
- Font in assets
- FontFamily style in your component
- 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.
from kittentricks.
from kittentricks.
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
from kittentricks.
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.
from kittentricks.
Related Issues (20)
- "Objects are not valid as a React child" Error when using UI Kitten 5.0 HOT 2
- Change Status Bar Color of Splash Screen
- Upgrade to Expo SDK 39 HOT 1
- Cannot find module './env' in ios. HOT 3
- v5 compatibility HOT 1
- facing problem when run the kitten code for ios with new app. please help, thnx HOT 1
- Failed to launch the app on IOS simulator (react-native run-ios) HOT 2
- Badge Component
- Is there kittenTricks Javascript version ? HOT 1
- Error: ENOENT "eva/packages/dss" HOT 3
- Is Eva Design Color Generator broken?
- cannot simultaneously extend types 'StyledComponentProps' and 'LayoutProps HOT 2
- Installation error : Styled components should specify corresponding style name HOT 1
- [Warning] Extending warning on SafeAreaLayout
- Error while running npm install HOT 8
- Can't run yarn ios
- Use `Pressable` instead of `TouchableWithoutFeedback` for wrapping password eye icon in auth layouts. HOT 1
- Is this library in active development? HOT 1
- ERROR ReferenceError: Can't find variable: React
- Cannot install Android app. App is built for an older version of Android. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kittentricks.