search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.45k stars 2.12k forks source link

Inline icons are not rendered correctly when inside "bold" text #104

Closed sodik82 closed 8 years ago

sodik82 commented 8 years ago

If I have (fontawsome) icon inline in text with style fontWeight: 'bold' the icon is rendered as "crossed box". Problem is solved by removing font weight property.

Not sure if this can be easily handled by the library or at least documentation should state this limitation.

oblador commented 8 years ago

Thanks for spotting. This is an android only issue afaik.

sodik82 commented 8 years ago

yes, I am on android (only). Thank for quick fix

oblador commented 8 years ago

Released in 1.1.1

tharrington commented 8 years ago

Does this only work with certain icon sets? I have tried numerous combinations:

<Icon name={'chevron-left'} style={{fontWeight:'900'}} color='white' size={28} /> <Text style={{paddingLeft: 20, paddingTop: 8, fontWeight: '100'}}><Icon name={'chevron-left'} fontWeight='900' color='white' size={28} /></Text>

<Text style={{paddingLeft: 20, paddingTop: 8}}><Icon name={'chevron-left'} fontWeight='900' color='white' size={28} /></Text>

Nothing seems to change the actual weight.

rahulkmurali commented 6 years ago

Same issue: Icons displays as square box in android emulator import Icon from 'react-native-vector-icons/Ionicons';

< Icon name="ios-person" size={30} color="white" />

All fonts are in the assets folder inside "fonts".

Please help.

AnthonyAstige commented 5 years ago

I just ran into this and was able to bandaid a work-around like so:

<Text style={{ fontWeight: '600' }}>
    Some bold text
    <Text style={{ fontWeight: 'normal' }}>
        <Icon name="info-circle" />
    </Text>
</Text>

Note that setting a font weight of bold on the <Icon> style didn't seem to help. Seems to need the normal font weight set on a wrapping <Text> element.

react-native-vector-icons version 6.2.0 React Native Version: 0.59.1 Caveats: Running in an ejected / custom setup inside a Titanium Appcelerator view